aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdBreadcrumb.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components/LdBreadcrumb.vue')
-rw-r--r--viewer/src/components/LdBreadcrumb.vue20
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">
44import { Component, Vue, Ref, Watch } from "vue-property-decorator"; 50import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator";
45import DragScrollClickFix from "@/dragscrollclickfix"; 51import DragScrollClickFix from "@/services/dragscrollclickfix";
46import Tools from "@/tools"; 52import Navigation from "@/services/navigation";
47 53
48@Component 54@Component
49export default class LdBreadcrumb extends Vue { 55export 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>