Convert color schema, begin migrating old classes (finishes grey & red)
This commit is contained in:
Dane Everitt
parent
6c7a5d5bb9
commit
32b43cff9a
35 changed files with 186 additions and 166 deletions
|
|
@ -82,32 +82,28 @@ export default Vue.component('server', {
|
|||
<div class="mr-6">
|
||||
<div class="p-6 text-center bg-white rounded shadow">
|
||||
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
|
||||
<span class="text-grey-dark text-sm">{{server.node}}</span>
|
||||
<power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
|
||||
<span class="text-neutral-600 text-sm">{{server.node}}</span>
|
||||
<power-buttons class="mt-6 pt-6 text-center border-t border-neutral-100"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 sidenav mr-6">
|
||||
<router-link :to="{ name: 'server', params: { id: $route.params.id } }">
|
||||
Console
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'server-files' }">
|
||||
File Manager
|
||||
</router-link>
|
||||
<!--<router-link :to="{ name: 'server-subusers' }">-->
|
||||
<!--<icon name="users" class="h-4"></icon> Subusers-->
|
||||
<!--</router-link>-->
|
||||
<!--<router-link :to="{ name: 'server-schedules' }">-->
|
||||
<!--<icon name="calendar" class="h-4"></icon> Schedules-->
|
||||
<!--</router-link>-->
|
||||
<router-link :to="{ name: 'server-databases' }">
|
||||
Databases
|
||||
</router-link>
|
||||
<!--<router-link :to="{ name: 'server-allocations' }">-->
|
||||
<!--<icon name="globe" class="h-4"></icon> Allocations-->
|
||||
<!--</router-link>-->
|
||||
<!--<router-link :to="{ name: 'server-settings' }">-->
|
||||
<!--<icon name="settings" class="h-4"></icon> Settings-->
|
||||
<!--</router-link>-->
|
||||
<div class="sidenav mt-6 mr-6">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'server', params: { id: $route.params.id } }">
|
||||
Console
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'server-files' }">
|
||||
File Manager
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'server-databases' }">
|
||||
Databases
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full w-full">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default Vue.component('power-buttons', {
|
|||
v-on:click.prevent="sendPowerAction('start')"
|
||||
>Start</button>
|
||||
<div v-else>
|
||||
<button class="btn btn-red uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
|
||||
<button class="btn btn-red-500 uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('stop')">Stop</button>
|
||||
<button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('restart')">Restart</button>
|
||||
<button class="btn btn-secondary uppercase text-xs px-4 py-2" v-on:click.prevent="sendPowerAction('kill')">Kill</button>
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@ export default Vue.component('power-buttons', {
|
|||
<div v-else>
|
||||
<div class="text-center">
|
||||
<div class="spinner"></div>
|
||||
<div class="pt-2 text-xs text-grey-light">Connecting to node</div>
|
||||
<div class="pt-2 text-xs text-neutral-400">Connecting to node</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default Vue.component('progress-bar', {
|
|||
} else if (this.percent >= 70 && this.percent < 90) {
|
||||
return "bg-yellow-dark";
|
||||
} else {
|
||||
return "bg-red-dark";
|
||||
return "bg-red-600";
|
||||
}
|
||||
},
|
||||
borderColor: function () {
|
||||
|
|
@ -22,7 +22,7 @@ export default Vue.component('progress-bar', {
|
|||
} else if (this.percent >= 70 && this.percent < 90) {
|
||||
return "border-yellow-dark";
|
||||
} else {
|
||||
return "border-red-dark";
|
||||
return "border-red-600";
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -30,7 +30,7 @@ export default Vue.component('progress-bar', {
|
|||
template: `
|
||||
<div>
|
||||
<div class="text-right mb-1" v-if="title.length > 0">
|
||||
<span class="text-grey-dark text-xs uppercase">{{ title }}</span>
|
||||
<span class="text-neutral-600 text-xs uppercase">{{ title }}</span>
|
||||
</div>
|
||||
<div class="w-full border rounded h-4" :class="borderColor">
|
||||
<div class="h-full w-1/3 text-center" :style="{ width: percent + '%' }" :class="backgroundColor">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<message-box class="alert error mb-6" :message="errorMessage" v-show="errorMessage.length"/>
|
||||
<h2 class="font-medium text-grey-darkest mb-6">Create a new database</h2>
|
||||
<h2 class="font-medium text-neutral-900 mb-6">Create a new database</h2>
|
||||
<div class="mb-6">
|
||||
<label class="input-label" for="grid-database-name">Database name</label>
|
||||
<input id="grid-database-name" type="text" class="input" name="database_name" required
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<div class="content-box mb-6 hover:border-grey">
|
||||
<div class="flex items-center text-grey-darker">
|
||||
<div class="content-box mb-6 hover:borderneutral-500">
|
||||
<div class="flex items-center text-neutral-800">
|
||||
<database-icon class="flex-none text-green"></database-icon>
|
||||
<div class="flex-1 px-4">
|
||||
<p class="uppercase text-xs text-grey pb-1 select-none">Database Name</p>
|
||||
<p class="uppercase text-xs textneutral-500spb-1 select-none">Database Name</p>
|
||||
<p>{{database.name}}</p>
|
||||
</div>
|
||||
<div class="flex-1 px-4">
|
||||
<p class="uppercase text-xs text-grey pb-1 select-none">Username</p>
|
||||
<p class="uppercase text-xs textneutral-500spb-1 select-none">Username</p>
|
||||
<p>{{database.username}}</p>
|
||||
</div>
|
||||
<div class="flex-1 px-4">
|
||||
<p class="uppercase text-xs text-grey pb-1 select-none">Password</p>
|
||||
<p class="uppercase text-xs textneutral-500spb-1 select-none">Password</p>
|
||||
<p>
|
||||
<code class="text-sm cursor-pointer" v-on:click="revealPassword">
|
||||
<span class="select-none" v-if="!database.showPassword">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="flex-1 px-4">
|
||||
<p class="uppercase text-xs text-grey pb-1 select-none">Server</p>
|
||||
<p class="uppercase text-xs textneutral-500spb-1 select-none">Server</p>
|
||||
<p><code class="text-sm">{{database.host.address}}:{{database.host.port}}</code></p>
|
||||
</div>
|
||||
<div class="flex-none px-4">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2 class="font-medium text-grey-darkest mb-6">Delete this database?</h2>
|
||||
<p class="text-grey-darkest text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
|
||||
<h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
|
||||
<p class="text-neutral-900 text-sm">This action <strong>cannot</strong> be undone. This will permanetly delete the <strong>{{database.name}}</strong> database and remove all associated data.</p>
|
||||
<div class="mt-6">
|
||||
<label class="input-label">Confirm database name</label>
|
||||
<input type="text" class="input" v-model="nameConfirmation"/>
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@ export default Vue.component('file-row', {
|
|||
<icon name="link2" v-else/>
|
||||
</div>
|
||||
<div class="flex-1">{{file.name}}</div>
|
||||
<div class="flex-1 text-right text-grey-dark">{{readableSize(file.size)}}</div>
|
||||
<div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
|
||||
<div class="flex-1 text-right text-neutral-600">{{readableSize(file.size)}}</div>
|
||||
<div class="flex-1 text-right text-neutral-600">{{formatDate(file.modified)}}</div>
|
||||
<div class="flex-none w-1/6"></div>
|
||||
</div>
|
||||
<file-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ export default Vue.component('folder-row', {
|
|||
<icon name="folder"/>
|
||||
</div>
|
||||
<div class="flex-1">{{directory.name}}</div>
|
||||
<div class="flex-1 text-right text-grey-dark"></div>
|
||||
<div class="flex-1 text-right text-grey-dark">{{formatDate(directory.modified)}}</div>
|
||||
<div class="flex-1 text-right text-neutral-600"></div>
|
||||
<div class="flex-1 text-right text-neutral-600">{{formatDate(directory.modified)}}</div>
|
||||
<div class="flex-none w-1/6"></div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -162,12 +162,12 @@ export default Vue.component('server-console', {
|
|||
<div class="animate fadein shadow-md">
|
||||
<div class="text-xs font-mono">
|
||||
<div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
|
||||
<div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div>
|
||||
<div class="mb-2 text-neutral-400" ref="terminal" v-if="connected"></div>
|
||||
<div v-else>
|
||||
<div class="spinner spinner-xl mt-24"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-b bg-grey-darkest text-white flex">
|
||||
<div class="rounded-b bg-neutral-900 text-white flex">
|
||||
<div class="flex-no-shrink p-2">
|
||||
<span class="font-bold">$</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@ export default Vue.component('server-databases', {
|
|||
<div class="animate fadein" v-else>
|
||||
<div class="content-box mb-6" v-if="!databases.length">
|
||||
<div class="flex items-center">
|
||||
<icon name="database" class="flex-none text-grey-darker"></icon>
|
||||
<div class="flex-1 px-4 text-grey-darker">
|
||||
<icon name="database" class="flex-none text-neutral-800"></icon>
|
||||
<div class="flex-1 px-4 text-neutral-800">
|
||||
<p>You have no databases.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export default Vue.component('file-manager', {
|
|||
<div class="alert error" v-text="errorMessage"></div>
|
||||
</div>
|
||||
<div v-else-if="!directories.length && !files.length">
|
||||
<p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
|
||||
<p class="textneutral-500stext-sm text-center p-6 pb-4">This directory is empty.</p>
|
||||
</div>
|
||||
<div class="filemanager" v-else>
|
||||
<div class="header">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue