From 170da2d55fec0359cbac780786383710b734eda7 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 31 Jan 2020 09:17:57 +0100
Subject: viewer: code cleaning, moved some views to components

---
 viewer/src/components/LdBreadcrumb.vue | 58 ++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 viewer/src/components/LdBreadcrumb.vue

(limited to 'viewer/src/components/LdBreadcrumb.vue')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
new file mode 100644
index 0000000..8c5b7eb
--- /dev/null
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -0,0 +1,58 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <ul class="ld-breadcrumb">
+    <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
+      <router-link :to="item.path">
+        <fa-icon :icon="getIcon(item)" size="lg" />
+        {{item.title}}
+      </router-link>
+      <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" />
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import Tools from "@/tools";
+
+@Component
+export default class LdBreadcrumb extends Vue {
+  getIcon(item: Gallery.Item) {
+    return Tools.getIcon(item);
+  }
+}
+</script>
+
+<style lang="scss">
+.ld-breadcrumb {
+  border-left: 2px solid rgba(white, 0.1);
+  padding-left: 15px;
+  display: flex;
+  list-style: none;
+  margin: 5px;
+  a {
+    margin-right: 5px;
+  }
+  li:not(:first-child) {
+    margin-left: 10px;
+  }
+}
+</style>
-- 
cgit v1.2.3


From b88adf17c2ff40f051b356bcfab006ff3a7fbc97 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 2 Feb 2020 05:20:24 +0100
Subject: viewer: disabled colour is now static instead of an arbitrary alpha

---
 viewer/src/components/LdBreadcrumb.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'viewer/src/components/LdBreadcrumb.vue')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 8c5b7eb..171e96a 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -42,8 +42,10 @@ export default class LdBreadcrumb extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/theme.scss";
+
 .ld-breadcrumb {
-  border-left: 2px solid rgba(white, 0.1);
+  border-left: 1px solid $disabled-color;
   padding-left: 15px;
   display: flex;
   list-style: none;
-- 
cgit v1.2.3


From ec5bda34f9d2714db19d61cd9e82fb45cc15bfc1 Mon Sep 17 00:00:00 2001
From: pacien
Date: Mon, 10 Feb 2020 12:18:32 +0100
Subject: viewer: use a different background to separate command buttons and
 breadcrumbs

---
 viewer/src/components/LdBreadcrumb.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'viewer/src/components/LdBreadcrumb.vue')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 171e96a..ebefc50 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -45,7 +45,6 @@ export default class LdBreadcrumb extends Vue {
 @import "@/assets/scss/theme.scss";
 
 .ld-breadcrumb {
-  border-left: 1px solid $disabled-color;
   padding-left: 15px;
   display: flex;
   list-style: none;
-- 
cgit v1.2.3


From b56fd91c3ecc61ccbe692a21e8eb0f378b4a90ca Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Mon, 10 Feb 2020 05:41:16 +0100
Subject: viewer: ldbreadcrumbs: implement horizontal scrolling

This comes with a fix for the DragScroll component for mobile devices.

GitHub: closes #101, closes #102
---
 viewer/src/components/LdBreadcrumb.vue | 93 +++++++++++++++++++++++++++-------
 1 file changed, 76 insertions(+), 17 deletions(-)

(limited to 'viewer/src/components/LdBreadcrumb.vue')

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 @@
 -->
 
 <template>
-  <ul class="ld-breadcrumb">
-    <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
-      <router-link :to="item.path">
-        <fa-icon :icon="getIcon(item)" size="lg" />
-        {{item.title}}
-      </router-link>
-      <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" />
-    </li>
-  </ul>
+  <div
+    ref="breadcrumb"
+    v-dragscroll
+    class="ld-breadcrumb flex scrollbar"
+    @click.capture="e => dragScrollClickFix.onClickCapture(e)"
+    @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
+    @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
+    @dragscrollmove="checkForOverflowMask"
+  >
+    <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
+    <ul class="ld-breadcrumb">
+      <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
+        <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
+        <router-link :to="item.path" class="link">
+          <fa-icon :icon="getIcon(item)" size="lg" />
+          {{item.title}}
+        </router-link>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Ref, Watch } from "vue-property-decorator";
+import DragScrollClickFix from "@/dragscrollclickfix";
 import Tools from "@/tools";
 
 @Component
 export default class LdBreadcrumb extends Vue {
+  @Ref() readonly breadcrumb!: HTMLUListElement;
+
+  readonly dragScrollClickFix = new DragScrollClickFix();
+
+  dragging: boolean = false;
+  overflowMask: boolean = false;
+
+  mounted() {
+    window.addEventListener("resize", this.checkForOverflowMask);
+  }
+
+  destroyed() {
+    window.removeEventListener("resize", this.checkForOverflowMask);
+  }
+
+  checkForOverflowMask() {
+    this.overflowMask = this.breadcrumb.scrollLeft > 1;
+  }
+
+  @Watch("$galleryStore.currentItemPath")
+  changedCurrentItemPath() {
+    this.$nextTick(() => {
+      this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
+      this.checkForOverflowMask();
+    });
+  }
+
   getIcon(item: Gallery.Item) {
     return Tools.getIcon(item);
   }
@@ -44,16 +83,36 @@ export default class LdBreadcrumb extends Vue {
 <style lang="scss">
 @import "@/assets/scss/theme.scss";
 
+.ld-breadcrumb-overflow-mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba($panel-top-bgcolor, 1) $breadcrumb-margins,
+    rgba($panel-top-bgcolor, 0) $breadcrumb-overflow-mask-size
+  );
+  pointer-events: none;
+}
+
 .ld-breadcrumb {
-  padding-left: 15px;
-  display: flex;
-  list-style: none;
-  margin: 5px;
+  ul {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    white-space: nowrap;
+  }
   a {
-    margin-right: 5px;
+    margin-left: $breadcrumb-margins;
+  }
+  li {
+    margin-right: $breadcrumb-margins;
   }
-  li:not(:first-child) {
-    margin-left: 10px;
+  &.scrollbar {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      height: 0;
+    }
   }
 }
 </style>
-- 
cgit v1.2.3


From ff889de22e5c6fc5102395c5cf384a7e1e3dc801 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 11 Feb 2020 01:43:28 +0100
Subject: viewer: larger breadcrumb links

---
 viewer/src/components/LdBreadcrumb.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'viewer/src/components/LdBreadcrumb.vue')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 5f9695d..7f7ef7d 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -98,17 +98,18 @@ export default class LdBreadcrumb extends Vue {
 .ld-breadcrumb {
   ul {
     display: flex;
-    height: 100%;
-    align-items: center;
     white-space: nowrap;
   }
   a {
+    padding: $breadcrumb-margins 0;
     margin-left: $breadcrumb-margins;
   }
   li {
+    align-self: center;
     margin-right: $breadcrumb-margins;
   }
   &.scrollbar {
+    overflow-y: hidden;
     scrollbar-width: none;
     &::-webkit-scrollbar {
       height: 0;
-- 
cgit v1.2.3


From 370e3db3455f548699ff5e046e0f8dcc304991ac Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 14 Feb 2020 09:19:53 +0100
Subject: viewer: major code and search mode overhaul

Updated libraries to the lastest version
SCSS Formatter as suggested VSC extensions
Renamed toolbar-color by scrollbar-color
LD components use Props in favor of touching the stores directly (when possible)
Moved most common algorithms to a "services" folder
Complete search overhaul (lots of code change)
---
 viewer/src/components/LdBreadcrumb.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

(limited to 'viewer/src/components/LdBreadcrumb.vue')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 7f7ef7d..643bfb6 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -29,24 +29,29 @@
   >
     <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
     <ul class="ld-breadcrumb">
-      <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
+      <li v-for="(item,idx) in currentItemPath" :key="item.path">
         <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
         <router-link :to="item.path" class="link">
           <fa-icon :icon="getIcon(item)" size="lg" />
           {{item.title}}
         </router-link>
       </li>
+      <li v-if="searchMode">
+        <fa-icon icon="search" size="lg" class="disabled" />
+      </li>
     </ul>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Ref, Watch } from "vue-property-decorator";
-import DragScrollClickFix from "@/dragscrollclickfix";
-import Tools from "@/tools";
+import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator";
+import DragScrollClickFix from "@/services/dragscrollclickfix";
+import Navigation from "@/services/navigation";
 
 @Component
 export default class LdBreadcrumb extends Vue {
+  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop(Boolean) readonly searchMode!: boolean;
   @Ref() readonly breadcrumb!: HTMLUListElement;
 
   readonly dragScrollClickFix = new DragScrollClickFix();
@@ -66,7 +71,7 @@ export default class LdBreadcrumb extends Vue {
     this.overflowMask = this.breadcrumb.scrollLeft > 1;
   }
 
-  @Watch("$galleryStore.currentItemPath")
+  @Watch("currentItemPath")
   changedCurrentItemPath() {
     this.$nextTick(() => {
       this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
@@ -75,7 +80,7 @@ export default class LdBreadcrumb extends Vue {
   }
 
   getIcon(item: Gallery.Item) {
-    return Tools.getIcon(item);
+    return Navigation.getIcon(item);
   }
 }
 </script>
-- 
cgit v1.2.3


From aacf4f902370c779cd5e64c217c061d3d044c742 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 23 Feb 2020 18:17:36 +0100
Subject: viewer: breadcrumb search is now a link, allowing the right-click
 copy-link by the user

Code review fix
---
 viewer/src/components/LdBreadcrumb.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'viewer/src/components/LdBreadcrumb.vue')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 643bfb6..2ac1216 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -37,7 +37,10 @@
         </router-link>
       </li>
       <li v-if="searchMode">
-        <fa-icon icon="search" size="lg" class="disabled" />
+        <fa-icon icon="angle-right" class="disabled" />
+        <router-link :to="$route" class="link">
+          <fa-icon icon="search" size="lg" class="disabled" />
+        </router-link>
       </li>
     </ul>
   </div>
-- 
cgit v1.2.3


From 7c2a2ff46469d5e8f44fb3ec7feae5f798e0baf8 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 27 Feb 2020 17:23:32 +0100
Subject: viewer: architectural fixes and improvements

Make use of VueX's strict mode (which is different from vuex-class-component strict mode)
Fixed issues and bad-practices with search filter tags mutations
Correctly implement the new index.json format
---
 viewer/src/components/LdBreadcrumb.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/components/LdBreadcrumb.vue')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 2ac1216..2b45b71 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -53,7 +53,7 @@ import Navigation from "@/services/navigation";
 
 @Component
 export default class LdBreadcrumb extends Vue {
-  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
   @Prop(Boolean) readonly searchMode!: boolean;
   @Ref() readonly breadcrumb!: HTMLUListElement;
 
-- 
cgit v1.2.3


From 525bde063c7c17f292199c75eae398388933f868 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sun, 26 Apr 2020 00:18:57 +0200
Subject: viewer: tell webpack to import scss from module

---
 viewer/src/components/LdBreadcrumb.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/components/LdBreadcrumb.vue')

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 2b45b71..a8d8dcb 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -89,7 +89,7 @@ export default class LdBreadcrumb extends Vue {
 </script>
 
 <style lang="scss">
-@import "@/assets/scss/theme.scss";
+@import "~@/assets/scss/theme.scss";
 
 .ld-breadcrumb-overflow-mask {
   position: absolute;
-- 
cgit v1.2.3