mirror of
https://github.com/containous/traefik.git
synced 2024-12-22 13:34:03 +03:00
Add dark theme for Web UI
This commit is contained in:
Dmitry Sharshakov
GitHub
parent
18d90ecd96
commit
389536aff0
@ -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
7
webui/src/assets/middlewares-empty-dark.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -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 () {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -80,6 +80,10 @@ export default {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.body--dark .q-toolbar {
|
||||
background-color: #0e204c;
|
||||
}
|
||||
|
||||
.q-tabs {
|
||||
/deep/ .q-tabs__content {
|
||||
.q-tab__label {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user