homelab/traefik
1
0
Fork 0
Code Activity

Add dark theme for Web UI

Browse source
This commit is contained in:
Dmitry Sharshakov 2020-02-27 23:30:04 +03:00 • committed by GitHub
parent 18d90ecd96
commit 389536aff0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 98 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
webui/src/components/_commons/ChartDoughnut.vue
View file

@ -22,6 +22,9 @@ export default {
// this.$data._chart.update()
this.renderChart(this.chartdata, this.options)
}
},
'$q.dark.isActive' (val) {
this.renderChart(this.chartdata, this.options)
}
},
mounted () {

7
webui/src/components/_commons/NavBar.vue
View file

@ -13,13 +13,14 @@
<q-route-tab to="/udp" icon="eva-globe-2-outline" no-caps label="UDP" />
</q-tabs>
<q-space />
<q-btn @click="$q.dark.toggle()" stretch flat no-caps icon="invert_colors" :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`" class="btn-menu" />
<q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
<q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="`${name} ${version}`" class="btn-menu" />
</q-toolbar>
</div>
</section>
<section class="app-section bg-white text-black">
<section class="app-section text-black sub-nav" :class="{ 'bg-white': !$q.dark.isActive }">
<div class="app-section-wrap app-boxed app-boxed-xl">
<slot />
</div>
@ -72,6 +73,10 @@ export default {
min-height: 64px;
}
.body--dark .sub-nav {
background-color: #0e204c;
}
.logo {
display: inline-block;
img {

3
webui/src/components/_commons/PanelMiddlewares.vue
View file

@ -1055,7 +1055,8 @@
<div class="col-12">
<div class="block-empty"></div>
<div class="q-pb-lg block-empty-logo">
<img alt="empty" src="~assets/middlewares-empty.svg">
<img v-if="$q.dark.isActive" alt="empty" src="~assets/middlewares-empty-dark.svg">
<img v-else alt="empty" src="~assets/middlewares-empty.svg">
</div>
<div class="block-empty-label">There are no<br>Middlewares configured</div>
</div>

3
webui/src/components/_commons/PanelTLS.vue
View file

@ -67,7 +67,8 @@
<div class="col-12">
<div class="block-empty"></div>
<div class="q-pb-lg block-empty-logo">
<img alt="empty" src="~assets/middlewares-empty.svg">
<img v-if="$q.dark.isActive" alt="empty" src="~assets/middlewares-empty-dark.svg">
<img v-else alt="empty" src="~assets/middlewares-empty.svg">
</div>
<div class="block-empty-label">There are no<br>TLS configured</div>
</div>

18
webui/src/components/_commons/SkeletonBox.vue
View file

@ -69,4 +69,22 @@ export default {
to { transform: translateX(100%) translateZ(0); }
}
}
.body--dark .SkeletonBox {
background-color: #525252;
&.dark {
background-color: #333;
}
&::after {
background-image: linear-gradient(
90deg,
rgba(#5e5e5e, 0) 0,
rgba(#5e5e5e, 0.2) 20%,
rgba(#5e5e5e, 0.5) 60%,
rgba(#5e5e5e, 0)
);
}
}
</style>

4
webui/src/components/_commons/ToolBar.vue
View file

@ -80,6 +80,10 @@ export default {
padding: 0;
}
.body--dark .q-toolbar {
background-color: #0e204c;
}
.q-tabs {
/deep/ .q-tabs__content {
.q-tab__label {

2
webui/src/components/_commons/ToolBarTable.vue
View file

@ -17,7 +17,7 @@
]"
/>
<q-space />
<q-input v-model="getFilter" rounded dense outlined type="search" debounce="500" placeholder="Search" bg-color="white" class="bar-search">
<q-input v-model="getFilter" rounded dense outlined type="search" debounce="500" placeholder="Search" :bg-color="$q.dark.isActive ? undefined : 'white'" class="bar-search">
<template v-slot:append>
<q-icon name="eva-search-outline" />
</template>

10
webui/src/components/dashboard/PanelChart.vue
View file

@ -138,7 +138,10 @@ export default {
return {
datasets: [{
backgroundColor: [
'#f2f3f5'
this.$q.dark.isActive ? '#2d2d2d' : '#f2f3f5'
],
borderColor: [
this.$q.dark.isActive ? '#1d1d1d' : '#fff'
],
data: [1]
}]
@ -152,6 +155,11 @@ export default {
'#db7d11',
'#ff0039'
],
borderColor: [
this.$q.dark.isActive ? '#1d1d1d' : '#fff',
this.$q.dark.isActive ? '#1d1d1d' : '#fff',
this.$q.dark.isActive ? '#1d1d1d' : '#fff'
],
data: this.getData()
}],
labels: [

14
webui/src/components/dashboard/PanelFeature.vue
View file

@ -27,7 +27,7 @@ export default {
return typeof this.featureVal === 'string'
},
isBoolean () {
return typeof variable === 'boolean' || this.featureVal === ''
return typeof this.featureVal === 'boolean' || this.featureVal === ''
},
isTrue () {
return this.isBoolean && this.featureVal === true
@ -83,4 +83,16 @@ export default {
}
}
}
.body--dark {
.feature-chip-string {
background-color: rgba( $app-text-grey, .3 );
}
.feature-chip-boolean {
background-color: rgba( $negative, .3 );
&-true {
background-color: rgba( $positive, .3 );
}
}
}
</style>