baalajimaestro/traefik
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
webui/src/App.vue
View file

@ -15,6 +15,13 @@ export default {
// debug
console.log('Quasar -> ', this.$q.version)
this.$q.dark.set(localStorage.getItem('traefik-dark') === 'true')
},
watch: {
'$q.dark.isActive' (val) {
localStorage.setItem('traefik-dark', val)
}
}
}
</script>

7
webui/src/assets/middlewares-empty-dark.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="88" height="96" viewBox="0 0 88 96">
<g fill="none" fill-rule="nonzero" stroke="#7A7A7A" stroke-width="4">
<path fill="#3D3D3D" d="M41.05 42.807zm0 0l-.006.003 1.917 3.508-1.876-3.532c1.866-1.05 4.007-1.044 5.82-.006 8.058 4.62 22.413 13.097 37.112 21.84C85.14 65.299 86 66.39 86 68c0 1.612-.866 2.71-1.993 3.383-15.424 9.173-29.305 17.368-37.1 21.836a5.813 5.813 0 0 1-5.812 0C33.322 88.765 19.88 80.83 3.983 71.38 2.86 70.7 2 69.61 2 67.999c0-1.615.869-2.72 1.993-3.382a8052.42 8052.42 0 0 1 17.004-10.023l.05-.03a33723.823 33723.823 0 0 1 18.288-10.75l1.27-.746.334-.196.085-.05.022-.013.004-.002z"/>
<path fill="#1D1D1D" stroke-dasharray="0,10" stroke-linecap="round" d="M4 48c0-.96.707-1.483 1.012-1.662 9.254-5.48 37.058-21.81 37.054-21.809 1.274-.717 2.664-.69 3.844-.014 10.211 5.854 30.961 18.182 37.074 21.819.305.183 1.016.71 1.016 1.666 0 .955-.71 1.482-1.016 1.664-7.914 4.707-27.37 16.26-37.07 21.818a3.813 3.813 0 0 1-3.824.002c-9.703-5.56-29.16-17.113-37.074-21.818C4.71 49.482 4 48.955 4 48z"/>
<path fill="#3D3D3D" d="M41.05 2.807zm0 0l-.006.003 1.917 3.508-1.876-3.532c1.866-1.05 4.007-1.044 5.82-.006 8.058 4.62 22.413 13.097 37.112 21.84C85.14 25.299 86 26.39 86 28c0 1.612-.866 2.71-1.993 3.383-15.424 9.173-29.305 17.368-37.1 21.836a5.813 5.813 0 0 1-5.812 0C33.322 48.765 19.88 40.83 3.983 31.38 2.86 30.7 2 29.61 2 27.999c0-1.615.869-2.72 1.993-3.382a8052.42 8052.42 0 0 1 17.004-10.023l.05-.03a33723.375 33723.375 0 0 1 18.288-10.75l1.27-.746.334-.196.085-.05.022-.013.004-.002z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

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>

26
webui/src/css/sass/app.scss
View file

@ -42,6 +42,9 @@ body {
.bg-app-toggle {
background-color: rgba( $accent, .1 );
}
.body--dark .bg-app-toggle {
background-color: rgba( $accent, .3 );
}
// Helps
.xs-text-center {
@ -157,3 +160,26 @@ body {
background-color: rgba($app-text-grey, 0.1);
}
}
.body--dark .app-chip {
&-accent, &-rule {
background-color: rgba($accent, 0.25);
}
&-green, &-entry-points {
background-color: rgba($app-text-green, 0.25);
}
&-purple, &-name {
background-color: rgba($app-text-purple, 0.25);
}
&-warning, &-service {
background-color: rgba($warning, 0.25);
}
&-negative, &-error {
background-color: rgba($negative, 0.25);
}
&-green-2, &-options {
background-color: rgba($app-text-green-2, 0.25);
}
&-marine, &-interval {
background-color: rgba($app-text-grey, 0.25);
}
}