forked from mirror/misskey
[Client] Improve admin panel
This commit is contained in:
parent
b7a15bf6ca
commit
449b9f7fa0
@ -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
|
||||
|
@ -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: {
|
||||
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();
|
||||
},
|
||||
@ -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
|
||||
|
@ -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
|
||||
|
@ -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%
|
||||
|
@ -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)',
|
||||
},
|
||||
}
|
||||
|
@ -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)',
|
||||
},
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user