diff options
Diffstat (limited to 'viewer/src/components/LdBreadcrumb.vue')
-rw-r--r-- | viewer/src/components/LdBreadcrumb.vue | 20 |
1 files changed, 14 insertions, 6 deletions
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue index 7f7ef7d..2ac1216 100644 --- a/viewer/src/components/LdBreadcrumb.vue +++ b/viewer/src/components/LdBreadcrumb.vue | |||
@@ -29,24 +29,32 @@ | |||
29 | > | 29 | > |
30 | <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div> | 30 | <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div> |
31 | <ul class="ld-breadcrumb"> | 31 | <ul class="ld-breadcrumb"> |
32 | <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path"> | 32 | <li v-for="(item,idx) in currentItemPath" :key="item.path"> |
33 | <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" /> | 33 | <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" /> |
34 | <router-link :to="item.path" class="link"> | 34 | <router-link :to="item.path" class="link"> |
35 | <fa-icon :icon="getIcon(item)" size="lg" /> | 35 | <fa-icon :icon="getIcon(item)" size="lg" /> |
36 | {{item.title}} | 36 | {{item.title}} |
37 | </router-link> | 37 | </router-link> |
38 | </li> | 38 | </li> |
39 | <li v-if="searchMode"> | ||
40 | <fa-icon icon="angle-right" class="disabled" /> | ||
41 | <router-link :to="$route" class="link"> | ||
42 | <fa-icon icon="search" size="lg" class="disabled" /> | ||
43 | </router-link> | ||
44 | </li> | ||
39 | </ul> | 45 | </ul> |
40 | </div> | 46 | </div> |
41 | </template> | 47 | </template> |
42 | 48 | ||
43 | <script lang="ts"> | 49 | <script lang="ts"> |
44 | import { Component, Vue, Ref, Watch } from "vue-property-decorator"; | 50 | import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator"; |
45 | import DragScrollClickFix from "@/dragscrollclickfix"; | 51 | import DragScrollClickFix from "@/services/dragscrollclickfix"; |
46 | import Tools from "@/tools"; | 52 | import Navigation from "@/services/navigation"; |
47 | 53 | ||
48 | @Component | 54 | @Component |
49 | export default class LdBreadcrumb extends Vue { | 55 | export default class LdBreadcrumb extends Vue { |
56 | @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[]; | ||
57 | @Prop(Boolean) readonly searchMode!: boolean; | ||
50 | @Ref() readonly breadcrumb!: HTMLUListElement; | 58 | @Ref() readonly breadcrumb!: HTMLUListElement; |
51 | 59 | ||
52 | readonly dragScrollClickFix = new DragScrollClickFix(); | 60 | readonly dragScrollClickFix = new DragScrollClickFix(); |
@@ -66,7 +74,7 @@ export default class LdBreadcrumb extends Vue { | |||
66 | this.overflowMask = this.breadcrumb.scrollLeft > 1; | 74 | this.overflowMask = this.breadcrumb.scrollLeft > 1; |
67 | } | 75 | } |
68 | 76 | ||
69 | @Watch("$galleryStore.currentItemPath") | 77 | @Watch("currentItemPath") |
70 | changedCurrentItemPath() { | 78 | changedCurrentItemPath() { |
71 | this.$nextTick(() => { | 79 | this.$nextTick(() => { |
72 | this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth; | 80 | this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth; |
@@ -75,7 +83,7 @@ export default class LdBreadcrumb extends Vue { | |||
75 | } | 83 | } |
76 | 84 | ||
77 | getIcon(item: Gallery.Item) { | 85 | getIcon(item: Gallery.Item) { |
78 | return Tools.getIcon(item); | 86 | return Navigation.getIcon(item); |
79 | } | 87 | } |
80 | } | 88 | } |
81 | </script> | 89 | </script> |