homelab/traefik
1
0
Fork 0
Code Activity

feat: Traefik Pilot WebUI

Browse source
This commit is contained in:
Matthieu Hostache 2020-05-19 09:12:53 +02:00 • committed by Traefiker Bot
parent 4a31544024
commit 58bf1a2ca5
16 changed files with 564 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@
<q-toolbar class="row no-wrap items-center">
<div class="q-pr-md logo">
<img alt="logo" src="~assets/logo.svg">
<q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="version" class="btn-menu version" />
</div>
<q-tabs align="left" inline-label indicator-color="transparent" active-color="white" stretch>
<q-route-tab to="/" icon="eva-home-outline" no-caps label="Dashboard" />
@ -12,10 +13,23 @@
<q-route-tab to="/tcp" icon="eva-globe-2-outline" no-caps label="TCP" />
<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" />
<div class="right-menu">
<q-tabs>
<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 stretch flat icon="eva-question-mark-circle-outline">
<q-menu anchor="bottom left" auto-close>
<q-item>
<q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" flat color="accent" align="left" icon="eva-book-open-outline" no-caps label="Documentation" class="btn-submenu full-width"/>
</q-item>
<q-separator />
<q-item>
<q-btn type="a" href="https://github.com/containous/traefik/" target="_blank" flat color="accent" align="left" icon="eva-github-outline" no-caps label="Github repository" class="btn-submenu full-width"/>
</q-item>
</q-menu>
</q-btn>
</q-tabs>
<platform-auth-state />
</div>
</q-toolbar>
</div>
</section>
@ -30,14 +44,12 @@
<script>
import config from '../../../package'
import PlatformAuthState from '../platform/PlatformAuthState'
import { mapActions, mapGetters } from 'vuex'
export default {
name: 'NavBar',
data () {
return {
}
},
components: { PlatformAuthState },
computed: {
...mapGetters('core', { coreVersion: 'version' }),
version () {
@ -73,14 +85,29 @@ export default {
min-height: 64px;
}
.body--dark .sub-nav {
background-color: #0e204c;
.body--dark {
.sub-nav {
background-color: #0e204c;
}
}
.q-item--dark {
background: var(--q-color-dark);
}
.logo {
display: inline-block;
display: flex;
align-items: center;
img {
height: 24px;
margin-right: 10px;
}
.version {
min-height: inherit;
line-height: inherit;
padding: 0 4px;
}
}
@ -97,9 +124,25 @@ export default {
}
}
.btn-menu{
.right-menu {
flex: 1;
height: 64px;
display: flex;
justify-content: flex-end;
}
.btn-menu {
color: rgba( $app-text-white, .4 );
font-size: 16px;
font-weight: 600;
}
.q-item {
padding: 0;
}
.btn-submenu {
font-weight: 700;
align-items: flex-start;
}
</style>

71
webui/src/components/_commons/SidePanel.vue Normal file
View file

@ -0,0 +1,71 @@
<template>
<div class="panel">
<div
class="panel-backdrop"
@click="close"
v-if="isOpen"
></div>
<transition name="slide">
<div v-if="isOpen" class="panel-content">
<slot></slot>
</div>
</transition>
</div>
</template>
<script>
export default {
props: ['isOpen'],
methods: {
close () {
this.$emit('onClose')
}
}
}
</script>
<style scoped lang="scss">
@import "../../css/sass/mixins";
.slide-enter-active,
.slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(100%);
transition: all 150ms ease-in 0s;
}
.panel-backdrop {
z-index: 3000;
background-color: rgba(255, 255, 255, 0.47);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
}
.panel-content {
z-index: 9999;
overflow-y: auto;
background-color: white;
position: fixed;
right: 0;
top: 0;
height: 100vh;
padding: 0;
width: 100vw;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
box-shadow: 2px 0 6px 0 #000;
@include respond-to(md) {
width: 80vw;
max-width: 1500px;
}
}
</style>