From 2bd8674f27810b7a34cabf29d1353af5171d3d7a Mon Sep 17 00:00:00 2001
From: Jannik Schönartz
Date: Fri, 17 Apr 2020 17:13:44 +0000
Subject: [webapp/Backends] Add docu overlay styles, used for the screenshots

---
 webapp/src/components/BackendModule.vue | 50 +++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 8 deletions(-)

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

diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index 2670230..09ebc34 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -36,7 +36,7 @@
 </i18n>
 
 <template>
-  <v-container fill-height>
+  <v-container fill-height class="">
     <v-layout>
       <v-flex xl10 offset-xl1 lg12>
       <v-card class="tabbar-card">
@@ -59,12 +59,15 @@
                 <div slot="action" slot-scope="row" style="text-align: right">
                   <v-tooltip top open-delay="800">
                     <template v-slot:activator="{ on }">
-                      <v-btn text icon :loading="row.item.loading"
+                      <v-btn
+                        text
+                        icon
+                        :loading="row.item.loading"
                         :disabled="row.item.loading"
                         :color="row.item.connection"
                         @click.stop="checkConnection(row.item)"
                         v-on="on"
-                        class="mx-2"
+                        :class="row.index === 0 ? 'mx-2 tutorial-element label-top-left element-icon' : 'mx-2'" style="--label-number: '4'"
                       ><v-icon>cached</v-icon></v-btn>
                     </template>
                     <span>{{ $t('checkConnectionTooltip') }}</span>
@@ -72,14 +75,28 @@
 
                   <v-tooltip top open-delay="800">
                     <template v-slot:activator="{ on }">
-                      <v-btn text icon color="primary" @click.stop="$store.commit('backends/editSync', row.item.id)" v-on="on" class="mx-2"><v-icon>settings_ethernet</v-icon></v-btn>
+                      <v-btn
+                        text
+                        icon
+                        color="primary"
+                        @click.stop="$store.commit('backends/editSync', row.item.id)"
+                        v-on="on"
+                       :class="row.index === 0 ? 'mx-2 tutorial-element label-top-left element-icon' : 'mx-2'" style="--label-number: '5'"
+                      ><v-icon>settings_ethernet</v-icon></v-btn>
                     </template>
                     <span>{{ $t('editSyncTooltip') }}</span>
                   </v-tooltip>
 
                   <v-tooltip top open-delay="800">
                     <template v-slot:activator="{ on }">
-                      <v-btn text icon color="primary" @click.stop="$store.commit('backends/editBackend', row.item.id)" v-on="on" class="mx-2"><v-icon>edit</v-icon></v-btn>
+                      <v-btn
+                        text
+                        icon
+                        color="primary"
+                        @click.stop="$store.commit('backends/editBackend', row.item.id)"
+                        v-on="on"
+                        :class="row.index === 0 ? 'mx-2 tutorial-element label-top-left element-icon' : 'mx-2'" style="--label-number: '6'"
+                      ><v-icon>edit</v-icon></v-btn>
                     </template>
                     <span>{{ $t('editTooltip') }}</span>
                   </v-tooltip>
@@ -89,13 +106,30 @@
 
             <div class="text-right">
 
-              <v-btn color="primary" text @click="checkConnections(selectedBackends)" :disabled="selectedBackends.length === 0" class="ma-2">
+              <v-btn
+                color="primary"
+                text
+                @click="checkConnections(selectedBackends)"
+                :disabled="selectedBackends.length === 0"
+                class="ma-2 tutorial-element label-left" style="--label-number: '3'"
+              >
                 <v-icon left>cached</v-icon>{{ $tc('checkConnection', selectedBackends.length, [selectedBackends.length]) }}
               </v-btn>
-              <v-btn color="error" text @click="$store.commit('backends/setDialog', true)" :disabled="selectedBackends.length === 0" class="ma-2">
+              <v-btn
+                color="error"
+                text
+                @click="$store.commit('backends/setDialog', true)"
+                :disabled="selectedBackends.length === 0"
+                class="ma-2 tutorial-element label-bottom" style="--label-number: '2'"
+              >
                 <v-icon left>remove_circle_outline</v-icon>{{ $tc('removeBackend', selectedBackends.length, [selectedBackends.length]) }}
               </v-btn>
-              <v-btn color="success" text @click="$store.commit('backends/editBackend', 0)" class="ma-2">
+              <v-btn
+                color="success"
+                text
+                @click="$store.commit('backends/editBackend', 0)"
+                class="ma-2 tutorial-element label-right" style="--label-number: '1'"
+              >
                 <v-icon left>add_circle_outline</v-icon>{{ $t('addBackendBtn') }}
               </v-btn>
             </div>
-- 
cgit v1.2.3-55-g7522

