aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdBreadcrumb.vue
diff options
context:
space:
mode:
authorZero~Informatique2020-02-10 05:41:16 +0100
committerpacien2020-02-10 14:56:47 +0100
commitb56fd91c3ecc61ccbe692a21e8eb0f378b4a90ca (patch)
tree9215394932855b94e480aeeb94ced45cdd8b1f0c /viewer/src/components/LdBreadcrumb.vue
parente561958ba30d88cb5a3413f3076e12a05d41a006 (diff)
downloadldgallery-b56fd91c3ecc61ccbe692a21e8eb0f378b4a90ca.tar.gz
viewer: ldbreadcrumbs: implement horizontal scrolling
This comes with a fix for the DragScroll component for mobile devices. GitHub: closes #101, closes #102
Diffstat (limited to 'viewer/src/components/LdBreadcrumb.vue')
-rw-r--r--viewer/src/components/LdBreadcrumb.vue93
1 files changed, 76 insertions, 17 deletions
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index ebefc50..5f9695d 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -18,23 +18,62 @@
18--> 18-->
19 19
20<template> 20<template>
21 <ul class="ld-breadcrumb"> 21 <div
22 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path"> 22 ref="breadcrumb"
23 <router-link :to="item.path"> 23 v-dragscroll
24 <fa-icon :icon="getIcon(item)" size="lg" /> 24 class="ld-breadcrumb flex scrollbar"
25 {{item.title}} 25 @click.capture="e => dragScrollClickFix.onClickCapture(e)"
26 </router-link> 26 @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
27 <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" /> 27 @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
28 </li> 28 @dragscrollmove="checkForOverflowMask"
29 </ul> 29 >
30 <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
31 <ul class="ld-breadcrumb">
32 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
33 <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
34 <router-link :to="item.path" class="link">
35 <fa-icon :icon="getIcon(item)" size="lg" />
36 {{item.title}}
37 </router-link>
38 </li>
39 </ul>
40 </div>
30</template> 41</template>
31 42
32<script lang="ts"> 43<script lang="ts">
33import { Component, Vue } from "vue-property-decorator"; 44import { Component, Vue, Ref, Watch } from "vue-property-decorator";
45import DragScrollClickFix from "@/dragscrollclickfix";
34import Tools from "@/tools"; 46import Tools from "@/tools";
35 47
36@Component 48@Component
37export default class LdBreadcrumb extends Vue { 49export default class LdBreadcrumb extends Vue {
50 @Ref() readonly breadcrumb!: HTMLUListElement;
51
52 readonly dragScrollClickFix = new DragScrollClickFix();
53
54 dragging: boolean = false;
55 overflowMask: boolean = false;
56
57 mounted() {
58 window.addEventListener("resize", this.checkForOverflowMask);
59 }
60
61 destroyed() {
62 window.removeEventListener("resize", this.checkForOverflowMask);
63 }
64
65 checkForOverflowMask() {
66 this.overflowMask = this.breadcrumb.scrollLeft > 1;
67 }
68
69 @Watch("$galleryStore.currentItemPath")
70 changedCurrentItemPath() {
71 this.$nextTick(() => {
72 this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
73 this.checkForOverflowMask();
74 });
75 }
76
38 getIcon(item: Gallery.Item) { 77 getIcon(item: Gallery.Item) {
39 return Tools.getIcon(item); 78 return Tools.getIcon(item);
40 } 79 }
@@ -44,16 +83,36 @@ export default class LdBreadcrumb extends Vue {
44<style lang="scss"> 83<style lang="scss">
45@import "@/assets/scss/theme.scss"; 84@import "@/assets/scss/theme.scss";
46 85
86.ld-breadcrumb-overflow-mask {
87 position: absolute;
88 width: 100%;
89 height: 100%;
90 background: linear-gradient(
91 to right,
92 rgba($panel-top-bgcolor, 1) $breadcrumb-margins,
93 rgba($panel-top-bgcolor, 0) $breadcrumb-overflow-mask-size
94 );
95 pointer-events: none;
96}
97
47.ld-breadcrumb { 98.ld-breadcrumb {
48 padding-left: 15px; 99 ul {
49 display: flex; 100 display: flex;
50 list-style: none; 101 height: 100%;
51 margin: 5px; 102 align-items: center;
103 white-space: nowrap;
104 }
52 a { 105 a {
53 margin-right: 5px; 106 margin-left: $breadcrumb-margins;
107 }
108 li {
109 margin-right: $breadcrumb-margins;
54 } 110 }
55 li:not(:first-child) { 111 &.scrollbar {
56 margin-left: 10px; 112 scrollbar-width: none;
113 &::-webkit-scrollbar {
114 height: 0;
115 }
57 } 116 }
58} 117}
59</style> 118</style>