From fe03f891b8255fc79fdab5509e5ce870410f3bd0 Mon Sep 17 00:00:00 2001
From: Jannik Schönartz
Date: Wed, 15 May 2019 21:16:43 +0000
Subject: [documentation] Add faq pages & add webapp tutorial classes for the
 home module

---
 webapp/src/components/DashboardPage.vue | 50 ++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 19 deletions(-)

(limited to 'webapp/src/components/DashboardPage.vue')

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 }}
-- 
cgit v1.2.3-55-g7522

