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.vue50
1 files changed, 31 insertions, 19 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 68c3973..00d2620 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 }">
+ <v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }" class="tutorial-enabled">
<v-navigation-drawer
class="drawer non-selectable"
@@ -28,33 +28,45 @@
width="250"
app
>
- <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>
- <v-list>
- <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
- <v-list-tile-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>
- <v-divider></v-divider>
+ <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>
+ <v-list>
+ <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
+ <v-list-tile-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>
+ <v-divider></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 class="drawer-icon" @click.stop="toggleDrawer"></v-toolbar-side-icon>
+ <v-toolbar-side-icon
+ @click.stop="toggleDrawer"
+ class="drawer-icon tutorial-element label-bottom tutorial-border element-icon"
+ style="--label-number: '2'"
+ ></v-toolbar-side-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 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-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-btn class="user-button" flat slot="activator" style="text-transform: none;">
+ <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>
<v-flex>
{{ user.name }}