aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/PanelTop.vue
diff options
context:
space:
mode:
authorZero~Informatique2020-01-30 21:24:15 +0100
committerZero~Informatique2020-01-30 21:24:15 +0100
commit42105af46681d81959a5d5a9a16ec9e98463a92e (patch)
tree9a7e32da0c3ebcc41199cd2667ca1da113b93d21 /viewer/src/views/PanelTop.vue
parent16d319ac092aea56ac9f872129d23fface4b379d (diff)
downloadldgallery-42105af46681d81959a5d5a9a16ec9e98463a92e.tar.gz
viewer: new breadcrumb. navigation buttons. and styling improvements
Diffstat (limited to 'viewer/src/views/PanelTop.vue')
-rw-r--r--viewer/src/views/PanelTop.vue78
1 files changed, 37 insertions, 41 deletions
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
index 0efc9b6..7e24699 100644
--- a/viewer/src/views/PanelTop.vue
+++ b/viewer/src/views/PanelTop.vue
@@ -18,23 +18,25 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div v-if="isReady"> 21 <div class="flex">
22 <b-steps 22 <div class="command-btns">
23 v-model="activeStep" 23 <fa-icon icon="filter" size="lg" class="disabled" />
24 class="pathBreadcrumb" 24 <router-link to="/" :class="{disabled: $galleryStore.currentItemPath.length <= 1}">
25 type="is-info" 25 <fa-icon icon="home" size="lg" />
26 :has-navigation="false" 26 </router-link>
27 :animated="false" 27 <div class="link" @click="$router.go(-1)">
28 @input="onStepClick" 28 <fa-icon icon="arrow-left" size="lg" />
29 > 29 </div>
30 <b-step-item 30 </div>
31 v-for="item in $galleryStore.currentItemPath" 31 <ul class="pathBreadcrumb">
32 :key="item.path" 32 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
33 :label="item.title" 33 <router-link :to="item.path">
34 :icon="getIcon(item)" 34 <fa-icon :icon="getIcon(item)" size="lg" />
35 :to="item.path" 35 {{item.title}}
36 /> 36 </router-link>
37 </b-steps> 37 <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" />
38 </li>
39 </ul>
38 </div> 40 </div>
39</template> 41</template>
40 42
@@ -44,23 +46,8 @@ import Gallery from "./Gallery.vue";
44 46
45@Component 47@Component
46export default class PanelTop extends Vue { 48export default class PanelTop extends Vue {
47 activeStep: number = -1;
48
49 mounted() {
50 this.currentItemPathChanged();
51 }
52
53 get isReady() {
54 return this.activeStep >= 0;
55 }
56
57 @Watch("$galleryStore.currentItemPath")
58 currentItemPathChanged() {
59 this.activeStep = -1;
60 this.$nextTick(() => (this.activeStep = this.$galleryStore.currentItemPath.length - 1));
61 }
62
63 getIcon(item: Gallery.Item) { 49 getIcon(item: Gallery.Item) {
50 if (item.path.length <= 1) return "home";
64 switch (item.properties.type) { 51 switch (item.properties.type) {
65 case "picture": 52 case "picture":
66 return "image"; 53 return "image";
@@ -68,19 +55,28 @@ export default class PanelTop extends Vue {
68 return "folder"; 55 return "folder";
69 } 56 }
70 } 57 }
71
72 onStepClick(index: number) {
73 const item = this.$galleryStore.currentItemPath[index];
74 if (item) this.$router.push(item.path);
75 }
76} 58}
77</script> 59</script>
78 60
79<style lang="scss"> 61<style lang="scss">
62@import "@/assets/scss/theme.scss";
63
80.pathBreadcrumb { 64.pathBreadcrumb {
81 margin: 3px; 65 display: flex;
66 list-style: none;
67 margin: 5px;
68 a {
69 margin-right: 5px;
70 }
71 li:not(:first-child) {
72 margin-left: 10px;
73 }
82} 74}
83.step-title { 75.command-btns {
84 color: white; 76 display: flex;
77 justify-content: space-around;
78 vertical-align: middle;
79 align-items: center;
80 width: $layout-left;
85} 81}
86</style> 82</style>