summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJannik Schönartz2020-04-17 19:13:44 +0200
committerJannik Schönartz2020-04-17 19:13:44 +0200
commit2bd8674f27810b7a34cabf29d1353af5171d3d7a (patch)
treecb01e055edb8fdd49fe882ec44a8caea34ee99ff
parent[documentation] Add documentation for external backends. (diff)
downloadbas-2bd8674f27810b7a34cabf29d1353af5171d3d7a.tar.gz
bas-2bd8674f27810b7a34cabf29d1353af5171d3d7a.tar.xz
bas-2bd8674f27810b7a34cabf29d1353af5171d3d7a.zip
[webapp/Backends] Add docu overlay styles, used for the screenshots
-rw-r--r--webapp/src/components/BackendModule.vue50
1 files changed, 42 insertions, 8 deletions
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>