[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

View file

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

View file

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

View file

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

View file

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

View file

@ -215,5 +215,11 @@
reversiGameEmptyCell: ':lighten<2<$secondary', reversiGameEmptyCell: ':lighten<2<$secondary',
reversiGameEmptyCellMyTurn: ':lighten<5<$secondary', reversiGameEmptyCellMyTurn: ':lighten<5<$secondary',
reversiGameEmptyCellCanPut: ':lighten<4<$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)',
}, },
} }

View file

@ -215,5 +215,11 @@
reversiGameEmptyCell: 'rgba(0, 0, 0, 0.06)', reversiGameEmptyCell: 'rgba(0, 0, 0, 0.06)',
reversiGameEmptyCellMyTurn: 'rgba(0, 0, 0, 0.12)', reversiGameEmptyCellMyTurn: 'rgba(0, 0, 0, 0.12)',
reversiGameEmptyCellCanPut: 'rgba(0, 0, 0, 0.9)', 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)',
}, },
} }