summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorJannik Schönartz2019-05-09 14:53:32 +0200
committerJannik Schönartz2019-05-09 14:53:32 +0200
commit75de22f41b87d1b987c823459159cbcab1080a9e (patch)
tree4320e8dddd8e051a7c074049630d59a98f2b0243 /webapp
parent[documentation] Add first webapp module (user management) with screenshots (diff)
downloadbas-75de22f41b87d1b987c823459159cbcab1080a9e.tar.gz
bas-75de22f41b87d1b987c823459159cbcab1080a9e.tar.xz
bas-75de22f41b87d1b987c823459159cbcab1080a9e.zip
[webapp] Add screenshot css classes & add Screenshot classes to the User Module
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/assets/styles.css78
-rw-r--r--webapp/src/components/DataTable.vue2
-rw-r--r--webapp/src/components/UserModule.vue8
3 files changed, 83 insertions, 5 deletions
diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css
index b33e2e7..aa6f146 100644
--- a/webapp/src/assets/styles.css
+++ b/webapp/src/assets/styles.css
@@ -70,3 +70,81 @@ html {
.tabbar-tabicon {
margin-right: 12px;
}
+
+.tutorial-enabled .tutorial-element {
+ position: relative;
+}
+
+.tutorial-enabled .tutorial-element::after {
+ content: '';
+ border: red solid 2px !important;
+ border-radius: 4px;
+ position: absolute;
+ top: -3px;
+ bottom: -3px;
+ left: -3px;
+ right: -3px;
+}
+
+.tutorial-enabled .tutorial-element.element-icon::after {
+ border-radius: 50%;
+}
+
+.tutorial-enabled .tutorial-element::before {
+ font-weight: bold;
+ content: var(--label-number);
+ opacity: 1;
+ border-radius: 50%;
+ border: 2px solid red;
+ color: white;
+ width: 24px;
+ height: 24px;
+ text-align: center;
+ position: absolute;
+ font-size: larger;
+ background-color: red;
+ z-index: 4;
+ top: auto;
+ bottom: auto;
+ left: auto;
+ right: auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.tutorial-element.label-top-left::before {
+ top: -5px;
+ left: -10px;
+}
+
+.tutorial-element.label-top-right::before {
+ top: -5px;
+ right: -10px;
+}
+
+.tutorial-element.label-bottom-left::before {
+ bottom: -5px;
+ left: -10px;
+}
+
+.tutorial-element.label-bottom-right::before {
+ bottom: -5px;
+ right: -10px;
+}
+
+.tutorial-element.label-top::before {
+ top: -14px;
+}
+
+.tutorial-element.label-bottom::before {
+ bottom: -14px;
+}
+
+.tutorial-element.label-left::before {
+ left: -14px;
+}
+
+.tutorial-element.label-right::before {
+ right: -14px;
+} \ No newline at end of file
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index 94bd524..c011353 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -163,7 +163,7 @@
</div>
<div v-for="header in headers" :key="header.key" :style="{ width: header.width }" :class="{ 'auto-width': header.width === undefined }">
<span v-if="$scopedSlots[header.key] === undefined" class="selectable">{{ item.data[header.key] }}</span>
- <slot v-else :name="header.key" :item="item.data" />
+ <slot v-else :name="header.key" :item="item.data" :index="index"/>
</div>
</div>
</template>
diff --git a/webapp/src/components/UserModule.vue b/webapp/src/components/UserModule.vue
index 2ee6825..e89afe3 100644
--- a/webapp/src/components/UserModule.vue
+++ b/webapp/src/components/UserModule.vue
@@ -41,15 +41,15 @@
<v-card>
<data-table v-model="selectedUsers" :headers="headers" :items="users" @dblclick="editUser($event.id)">
<div slot="action" slot-scope="row" style="text-align: right">
- <v-btn flat icon color="primary" @click.stop="editUser(row.item.id)"><v-icon>edit</v-icon></v-btn>
+ <v-btn flat icon color="primary" @click.stop="editUser(row.item.id)" :class="row.index === 0 ? 'tutorial-element label-top-left element-icon' : ''" style="--label-number: '3'"><v-icon>edit</v-icon></v-btn>
</div>
</data-table>
</v-card>
<div class="text-xs-right">
- <v-btn color="error" flat @click="deleteUsers" :disabled="selectedUsers.length === 0">
+ <v-btn color="error" flat @click="deleteUsers" :disabled="selectedUsers.length === 0" class="tutorial-element label-left" style="--label-number: '2'">
<v-icon left>delete</v-icon>{{ $tc('deleteUsers', selectedUsers.length, [selectedUsers.length]) }}
</v-btn>
- <v-btn color="success" flat @click="editUser(0)">
+ <v-btn color="success" flat @click="editUser(0)" class="tutorial-element label-right" style="--label-number: '1'">
<v-icon left>edit</v-icon>{{ $t('createUser') }}
</v-btn>
</div>
@@ -91,7 +91,7 @@ export default {
return {
tab: 0,
headers: [
- { text: this.$t('id'), key: 'id' },
+ { text: this.$t('id'), key: 'id', width: '50px', sortType: 'number' },
{ text: this.$t('username'), key: 'username' },
{ text: this.$t('name'), key: 'name' },
{ text: this.$t('email'), key: 'email' },