FoundKeyGang/FoundKey
FoundKeyGang
/
FoundKey
7
19
Fork 22
Code Issues 37 Pull Requests 4 Releases Activity

[Client] Improve admin panel

This commit is contained in:
syuilo 2018-11-04 11:08:03 +09:00
parent b7a15bf6ca
commit 449b9f7fa0
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
6 changed files with 58 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/client/app/admin/views/ap-log.vue
View File

@ -67,7 +67,7 @@ export default Vue.extend({
height 250px
overflow auto
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
background var(--face)
background var(--adminDashboardCardBg)
border-radius 8px
> table
@ -76,10 +76,11 @@ export default Vue.extend({
overflow auto
border-spacing 0
border-collapse collapse
color #555
color var(--adminDashboardCardFg)
font-size 15px
thead
border-bottom solid 2px #eee
border-bottom solid 2px var(--adminDashboardCardDivider)
tr
th
@ -89,7 +90,7 @@ export default Vue.extend({
tbody
tr
&:nth-child(odd)
background #fbfbfb
background rgba(0, 0, 0, 0.025)
th, td
padding 8px 16px

40
src/client/app/admin/views/charts.vue
View File

@ -39,6 +39,7 @@
<script lang="ts">
import Vue from 'vue';
import * as tinycolor from 'tinycolor2';
import * as ApexCharts from 'apexcharts';
const limit = 90;
@ -147,7 +148,7 @@ export default Vue.extend({
this.chartInstance.destroy();
}
this.chartInstance = new ApexCharts(this.$refs.chart, Object.assign({
this.chartInstance = new ApexCharts(this.$refs.chart, {
chart: {
type: 'area',
height: 300,
@ -168,17 +169,41 @@ export default Vue.extend({
},
grid: {
clipMarkers: false,
borderColor: 'rgba(0, 0, 0, 0.1)'
},
stroke: {
curve: 'straight',
width: 2
},
legend: {
labels: {
color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
},
},
xaxis: {
type: 'datetime'
type: 'datetime',
labels: {
style: {
colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
}
},
axisBorder: {
color: 'rgba(0, 0, 0, 0.1)'
},
axisTicks: {
color: 'rgba(0, 0, 0, 0.1)'
},
},
yaxis: {
}
}, this.data));
labels: {
formatter: this.data.bytes ? v => Vue.filter('bytes')(v, 0) : v => Vue.filter('number')(v),
style: {
color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
}
}
},
series: this.data.series
});
this.chartInstance.render();
},
@ -286,6 +311,7 @@ export default Vue.extend({
driveChart(): any {
return {
bytes: true,
series: [{
name: 'All',
data: this.format(
@ -314,6 +340,7 @@ export default Vue.extend({
driveTotalChart(): any {
return {
bytes: true,
series: [{
name: 'Combined',
data: this.format(sum(this.stats.drive.local.totalSize, this.stats.drive.remote.totalSize))
@ -396,6 +423,7 @@ export default Vue.extend({
networkUsageChart(): any {
return {
bytes: true,
series: [{
name: 'Incoming',
data: this.format(this.stats.network.incomingBytes)
@ -424,8 +452,8 @@ export default Vue.extend({
margin 0 8px
padding 0 0 8px 0
font-size 1em
color #555
border-bottom solid 1px #eee
color var(--adminDashboardCardFg)
border-bottom solid 1px var(--adminDashboardCardDivider)
> b
margin-right 8px

3
src/client/app/admin/views/cpu-memory.vue
View File

@ -79,6 +79,7 @@ export default Vue.extend({
},
grid: {
clipMarkers: false,
borderColor: 'rgba(0, 0, 0, 0.1)'
},
stroke: {
curve: 'straight',
@ -153,7 +154,7 @@ export default Vue.extend({
display flex
padding 0 8px
margin-bottom -16px
color #555
color var(--adminDashboardCardFg)
font-size 14px
> span

10
src/client/app/admin/views/dashboard.vue
View File

@ -128,8 +128,8 @@ export default Vue.extend({
display flex
margin-bottom 16px
padding-bottom 16px
border-bottom solid 1px #ccc
color #777
border-bottom solid 1px var(--adminDashboardHeaderBorder)
color var(--adminDashboardHeaderFg)
font-size 14px
> p
@ -154,9 +154,9 @@ export default Vue.extend({
flex 1
max-width 300px
margin-right 16px
color var(--text)
color var(--adminDashboardCardFg)
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
background var(--face)
background var(--adminDashboardCardBg)
border-radius 8px
&:last-child
@ -192,7 +192,7 @@ export default Vue.extend({
> div:last-child
display flex
padding 6px 16px
border-top solid 1px #eee
border-top solid 1px var(--adminDashboardCardDivider)
> span
font-size 70%

6
src/client/theme/dark.json5
View File

@ -215,5 +215,11 @@
reversiGameEmptyCell: ':lighten<2<$secondary',
reversiGameEmptyCellMyTurn: ':lighten<5<$secondary',
reversiGameEmptyCellCanPut: ':lighten<4<$secondary',
adminDashboardHeaderFg: ':alpha<0.9<$text',
adminDashboardHeaderBorder: 'rgba(0, 0, 0, 0.3)',
adminDashboardCardBg: '$secondary',
adminDashboardCardFg: '$text',
adminDashboardCardDivider: 'rgba(0, 0, 0, 0.3)',
},
}

6
src/client/theme/light.json5
View File

@ -215,5 +215,11 @@
reversiGameEmptyCell: 'rgba(0, 0, 0, 0.06)',
reversiGameEmptyCellMyTurn: 'rgba(0, 0, 0, 0.12)',
reversiGameEmptyCellCanPut: 'rgba(0, 0, 0, 0.9)',
adminDashboardHeaderFg: ':alpha<0.9<$text',
adminDashboardHeaderBorder: 'rgba(0, 0, 0, 0.1)',
adminDashboardCardBg: '$secondary',
adminDashboardCardFg: '$text',
adminDashboardCardDivider: 'rgba(0, 0, 0, 0.082)',
},
}