summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DashboardPage.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/DashboardPage.vue')
-rw-r--r--webapp/src/components/DashboardPage.vue96
1 files changed, 58 insertions, 38 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 278340c..c32e87d 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -16,7 +16,7 @@
</i18n>
<template>
- <v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }" class="">
+ <v-app :class="{ 'no-animation': settings.noAnimations }" class="">
<v-navigation-drawer
class="drawer non-selectable"
@@ -31,70 +31,86 @@
<div class="tutorial-element label-bottom tutorial-border" style="--label-number: '1'">
<div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
<div v-for="category in categories" :key="category.name">
- <div class="dashboard-category text--secondary">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
+ <div class="dashboard-category text--secondary body-2">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
<v-list>
- <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
- <v-list-tile-action>
+ <v-list-item ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
+ <v-list-item-action>
<v-icon v-html="module.icon"></v-icon>
- </v-list-tile-action>
- <v-list-tile-content>
- <v-list-tile-title v-text="$t('$dashboardModules.' + module.name)"></v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
+ </v-list-item-action>
+ <v-list-item-content>
+ <v-list-item-title v-text="$t('$dashboardModules.' + module.name)"></v-list-item-title>
+ </v-list-item-content>
+ </v-list-item>
</v-list>
- <v-divider></v-divider>
+ <v-divider :class="{ 'd-none': desktop && drawerMini }"></v-divider>
</div>
</div>
</v-navigation-drawer>
- <v-toolbar :height="$vuetify.breakpoint.smAndDown ? 56 : 64" dark app :clipped-left="settings.clipped" class="non-selectable" style="z-index: 10;" id="topbar">
- <v-toolbar-side-icon
+ <v-app-bar app dark
+ color="#212121"
+ :height="$vuetify.breakpoint.smAndDown ? 56 : 64"
+ :clipped-left="settings.clipped"
+ class="non-selectable"
+ style="z-index: 10;"
+ id="topbar"
+ >
+ <v-app-bar-nav-icon
@click.stop="toggleDrawer"
- class="drawer-icon tutorial-element label-bottom tutorial-border element-icon"
+ :class="{ 'ml-n2': $vuetify.breakpoint.mdAndUp }"
+ class="tutorial-element label-bottom tutorial-border element-icon"
style="--label-number: '2'"
- ></v-toolbar-side-icon>
+ ></v-app-bar-nav-icon>
+
<a class="logo" href="/dashboard/home"><img class="non-draggable hidden-md-and-down" src="@/assets/logo.svg" /></a>
+
<v-spacer></v-spacer>
+
<v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'locale', value: settings.locale === 'en' ? 'de' : 'en' })"><v-icon>language</v-icon></v-btn>
+
<v-btn
class="tutorial-element label-top-left element-icon" style="--label-number: '3'"
icon
@click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"
><v-icon>invert_colors</v-icon></v-btn>
+
<notifications-alerts style="margin-right: 16px;"></notifications-alerts>
- <v-toolbar-items>
- <v-menu offset-y attach>
+
+ <v-menu offset-y attach>
+ <template #activator="{ on }">
<v-btn class="user-button tutorial-element label-bottom tutorial-border"
- style="--label-number: '5'; text-transform: none;"
- flat slot="activator" >
- <v-icon left>account_circle</v-icon>
+ style="height: calc(100% + 8px); --label-number: '5'; text-transform: none;"
+ text v-on="on">
+ <v-icon>account_circle</v-icon>
<v-flex>
{{ user.name }}
<v-spacer></v-spacer>
<v-subheader class="user-subheader">{{ user.username }}</v-subheader>
</v-flex>
</v-btn>
- <v-list>
- <v-list-tile to="/dashboard/account" active-class="">
- <v-icon class="user-menu-icon">perm_identity</v-icon>
- <v-list-tile-title>{{ $t('user') }}</v-list-tile-title>
- </v-list-tile>
- <v-list-tile to="/dashboard/settings" active-class="">
- <v-icon class="user-menu-icon">settings</v-icon>
- <v-list-tile-title>{{ $t('settings') }}</v-list-tile-title>
- </v-list-tile>
- <v-list-tile @click="logout">
- <v-icon class="user-menu-icon">power_settings_new</v-icon>
- <v-list-tile-title>{{ $t('logout') }}</v-list-tile-title>
- </v-list-tile>
- </v-list>
- </v-menu>
- </v-toolbar-items>
- </v-toolbar>
+ </template>
+ <v-list>
+ <v-list-item to="/dashboard/account" active-class="">
+ <v-icon class="user-menu-icon">perm_identity</v-icon>
+ <v-list-item-title>{{ $t('user') }}</v-list-item-title>
+ </v-list-item>
+ <v-list-item to="/dashboard/settings" active-class="">
+ <v-icon class="user-menu-icon">settings</v-icon>
+ <v-list-item-title>{{ $t('settings') }}</v-list-item-title>
+ </v-list-item>
+ <v-list-item @click="logout">
+ <v-icon class="user-menu-icon">power_settings_new</v-icon>
+ <v-list-item-title>{{ $t('logout') }}</v-list-item-title>
+ </v-list-item>
+ </v-list>
+ </v-menu>
+
+ </v-app-bar>
<v-content>
<router-view />
</v-content>
+
<back-to-top-button></back-to-top-button>
<notifications-snackbars></notifications-snackbars>
</v-app>
@@ -134,11 +150,15 @@ export default {
computed: {
...mapState(['settings']),
...mapGetters(['user']),
+ dark () { return this.settings.dark },
mini () { return this.settings.mini },
desktop () { return this.$vuetify.breakpoint.lgAndUp },
devMode () { return localStorage.getItem('dev') === 'true' }
},
watch: {
+ dark (value) {
+ this.$vuetify.theme.dark = value
+ },
mini (value) {
if (value) {
this.drawerMini = !this.drawerOpen
@@ -179,7 +199,7 @@ export default {
}
.logo {
- height: 100%;
+ height: calc(100% + 8px);
overflow: hidden;
}
@@ -205,7 +225,7 @@ export default {
}
.user-button {
- min-width: 160px;
+ min-width: 160px !important;
}
.user-menu-icon {