From c4a51940295d514dd52f48b6f18638ac554224f4 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 29 Jan 2020 05:35:35 +0100
Subject: viewer: Tag auto-completion should be more flexible. Resolves #38

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

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index 71131e6..7c9981f 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -42,6 +42,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { Operation } from "@/@types/tag/Operation";
+import Tools from "@/tools";
 
 @Component
 export default class LdTagInput extends Vue {
@@ -92,18 +93,20 @@ export default class LdTagInput extends Vue {
     category: string,
     disambiguation: string
   ): Tag.Search[] {
+    disambiguation = Tools.normalize(disambiguation);
     return Object.values(tags)
       .filter(node => node.tag.includes(category))
       .flatMap(node =>
         Object.values(node.children)
-          .filter(child => child.tag.includes(disambiguation))
+          .filter(child => child.tagfiltered.includes(disambiguation))
           .map(child => ({ ...child, parent: node, operation, display: `${operation}${node.tag}:${child.tag}` }))
       );
   }
 
   searchTagsFromFilter(tags: Tag.Index, operation: Operation, filter: string): Tag.Search[] {
+    filter = Tools.normalize(filter);
     return Object.values(tags)
-      .filter(node => node.tag.includes(filter))
+      .filter(node => node.tagfiltered.includes(filter))
       .map(node => ({ ...node, operation, display: `${operation}${node.tag}` }));
   }
 
-- 
cgit v1.2.3


From e91065602eeeebef236dae29e67d8e3334ab4029 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 29 Jan 2020 07:54:03 +0100
Subject: viewer: improved the picture layout. clicking a picture will switch
 between resized-to-screen and original-size (+fullscreen). drag-n-drop
 scrolls/moves the picture, just like a touch device. Resolves #19

---
 viewer/src/components/LdButtonFullscreen.vue | 44 ----------------------------
 1 file changed, 44 deletions(-)
 delete mode 100644 viewer/src/components/LdButtonFullscreen.vue

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdButtonFullscreen.vue b/viewer/src/components/LdButtonFullscreen.vue
deleted file mode 100644
index 39d59af..0000000
--- a/viewer/src/components/LdButtonFullscreen.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<!-- 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>
-  <fa-icon icon="expand-arrows-alt" class="button-fullscreen" @click="$uiStore.toggleFullscreen()" />
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class LdButtonFullscreen extends Vue {}
-</script>
-
-<style lang="scss">
-.button-fullscreen {
-  position: fixed;
-  top: 0;
-  right: 0;
-  margin: 3px 10px;
-  opacity: 50%;
-  font-size: 1.5em;
-  color: white;
-  mix-blend-mode: difference;
-  cursor: pointer;
-  z-index: 4;
-}
-</style>
-- 
cgit v1.2.3


From 234d0d13c767786393494810526a77d3d89b0e83 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 30 Jan 2020 17:01:56 +0100
Subject: viewer: global keypress componant. ESC gets out of fullscreen.

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

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdKeyPress.vue b/viewer/src/components/LdKeyPress.vue
new file mode 100644
index 0000000..8276607
--- /dev/null
+++ b/viewer/src/components/LdKeyPress.vue
@@ -0,0 +1,49 @@
+<!-- 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/>.
+-->
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from "vue-property-decorator";
+
+@Component
+export default class LdKeyPress extends Vue {
+  @Prop({ type: Number, required: true }) readonly keycode!: number;
+  @Prop({ type: String, default: "keyup" }) readonly event!: "keyup" | "keydown" | "keypress";
+
+  mounted() {
+    window.addEventListener(this.event, this.onEvent);
+  }
+
+  destroyed() {
+    window.removeEventListener(this.event, this.onEvent);
+  }
+
+  render() {
+    return null;
+  }
+
+  private onEvent(e: KeyboardEvent) {
+    if (e.keyCode === this.keycode) this.action(e);
+  }
+
+  @Emit()
+  private action(e: KeyboardEvent) {
+    return e;
+  }
+}
+</script>
\ No newline at end of file
-- 
cgit v1.2.3


From 42105af46681d81959a5d5a9a16ec9e98463a92e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 30 Jan 2020 21:24:15 +0100
Subject: viewer: new breadcrumb. navigation buttons. and styling improvements

---
 viewer/src/components/LdProposition.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 9a32e0a..f653e4d 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,7 +19,7 @@
 
 <template>
   <div>
-    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition link">
       <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" />
       <span
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
@@ -51,13 +51,12 @@ export default class LdTagInput extends Vue {
         .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
     } else {
       // Tags count from the whole gallery
-      Object.entries(this.$galleryStore.tags)
-        .forEach(entry => (propositions[entry[0]] = entry[1].items.length));
+      Object.entries(this.$galleryStore.tags).forEach(entry => (propositions[entry[0]] = entry[1].items.length));
     }
-    
+
     return Object.entries(propositions)
-      .sort((a,b) => b[1] - a[1])
-      .map(entry => ({rawTag: entry[0], count: entry[1]}));
+      .sort((a, b) => b[1] - a[1])
+      .map(entry => ({ rawTag: entry[0], count: entry[1] }));
   }
 
   extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] {
@@ -79,12 +78,13 @@ export default class LdTagInput extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/theme.scss";
+
 .proposition {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 10px;
-  color: lightcyan;
   cursor: pointer;
 }
 .proposition span {
-- 
cgit v1.2.3


From 17b1598c5a5a375e6eaa0763767368c05ba0f56e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 30 Jan 2020 22:58:27 +0100
Subject: viewer: Improved the proposition layout

---
 viewer/src/components/LdProposition.vue | 36 ++++++++++++++++++++++-----------
 viewer/src/components/LdTagInput.vue    |  1 -
 2 files changed, 24 insertions(+), 13 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index f653e4d..02f7fe4 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,12 +19,18 @@
 
 <template>
   <div>
-    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition link">
-      <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" />
-      <span
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
+      <div class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)">
+        <fa-icon icon="minus" />
+      </div>
+      <div class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)">
+        <fa-icon icon="plus" />
+      </div>
+      <div
+        class="operation-tag link"
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
-      >{{proposed.rawTag}}&nbsp;x{{proposed.count}}</span>
-      <fa-icon icon="plus" @click="add(Operation.ADDITION, proposed.rawTag)" />
+      >{{proposed.rawTag}}</div>
+      <div class="disabled">x{{proposed.count}}</div>
     </div>
   </div>
 </template>
@@ -72,7 +78,7 @@ export default class LdTagInput extends Vue {
     const node = this.$galleryStore.tags[rawTag];
     const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` };
     this.$uiStore.currentTags.push(search);
-    this.$uiStore.mode = "search";
+    setTimeout(() => this.$uiStore.setModeSearch()); // Give time for the UI to display the Tag change
   }
 }
 </script>
@@ -82,12 +88,18 @@ export default class LdTagInput extends Vue {
 
 .proposition {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin: 10px;
-  cursor: pointer;
-}
-.proposition span {
-  padding: 0 10px;
+  padding-right: 7px;
+  .operation-tag {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex-grow: 1;
+    cursor: pointer;
+  }
+  .operation-btns {
+    padding: 2px 7px;
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index 7c9981f..ff354c6 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -27,7 +27,6 @@
     :data="filteredTags"
     field="display"
     type="is-black"
-    icon="tag"
     size="is-medium"
     class="panelTagInput"
     @typing="searchTags"
-- 
cgit v1.2.3


From 914aa63cb65f869be9b1707c160847be16f79a68 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 31 Jan 2020 06:55:37 +0100
Subject: viewer: unified CSS classes to kebab case

---
 viewer/src/components/LdTagInput.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index ff354c6..7bbecec 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -28,7 +28,7 @@
     field="display"
     type="is-black"
     size="is-medium"
-    class="panelTagInput"
+    class="paneltag-input"
     @typing="searchTags"
     @add="onAdd"
     @remove="onRemove"
@@ -119,7 +119,7 @@ export default class LdTagInput extends Vue {
 </script>
 
 <style lang="scss">
-.panelTagInput .autocomplete .dropdown-content {
+.paneltag-input .autocomplete .dropdown-content {
   max-height: 300px;
 }
 </style>
-- 
cgit v1.2.3


From a7d459a2620fa9523dd7ce8c9de519133ad5b1b7 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 31 Jan 2020 08:01:23 +0100
Subject: viewer: tag propositions depend on current's directory. resolves #22

---
 viewer/src/components/LdProposition.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 02f7fe4..a380021 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -56,8 +56,10 @@ export default class LdTagInput extends Vue {
         .filter(rawTag => !currentTags.find(currentTag => currentTag.tag === rawTag))
         .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
     } else {
-      // Tags count from the whole gallery
-      Object.entries(this.$galleryStore.tags).forEach(entry => (propositions[entry[0]] = entry[1].items.length));
+      // Tags count from the current directory
+      this.$galleryStore.currentItem?.tags
+        .map(tag => this.$galleryStore.tags[tag]) // FIXME: Folders with the same name are merged in the index
+        .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
     }
 
     return Object.entries(propositions)
-- 
cgit v1.2.3


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 +++++++++++++++++++++++
 viewer/src/components/LdCommand.vue     | 68 +++++++++++++++++++++++++++
 viewer/src/components/LdPicture.vue     | 74 ++++++++++++++++++++++++++++++
 viewer/src/components/LdProposition.vue |  4 +-
 viewer/src/components/LdTagInput.vue    |  2 +-
 viewer/src/components/LdThumbnail.vue   | 81 +++++++++++++++++++++++++++++++++
 6 files changed, 284 insertions(+), 3 deletions(-)
 create mode 100644 viewer/src/components/LdBreadcrumb.vue
 create mode 100644 viewer/src/components/LdCommand.vue
 create mode 100644 viewer/src/components/LdPicture.vue
 create mode 100644 viewer/src/components/LdThumbnail.vue

(limited to 'viewer/src/components')

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>
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
new file mode 100644
index 0000000..484e56a
--- /dev/null
+++ b/viewer/src/components/LdCommand.vue
@@ -0,0 +1,68 @@
+<!-- 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>
+  <div class="flex command-btns">
+    <div class="link" title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
+      <fa-icon :icon="commandTagsIcon()" size="lg" />
+    </div>
+    <router-link to="/" :class="{'disabled': isRoot()}" title="$t('title.home')">
+      <fa-icon icon="home" size="lg" />
+    </router-link>
+    <div class="link" title="$t('title.back')" @click="$router.go(-1)">
+      <fa-icon icon="arrow-left" size="lg" />
+    </div>
+    <router-link :class="{'disabled': isRoot()}" title="$t('title.parent')" :to="parent()">
+      <fa-icon icon="folder" size="xs" />
+      <fa-icon icon="level-up-alt" size="lg" />
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { RawLocation } from "vue-router";
+
+@Component
+export default class LdCommand extends Vue {
+  commandTagsIcon(): string {
+    return this.$uiStore.fullWidth ? "tags" : "window-close";
+  }
+
+  isRoot(): boolean {
+    return this.$galleryStore.currentItemPath.length <= 1;
+  }
+
+  parent(): RawLocation {
+    if (!this.isRoot()) return this.$galleryStore.currentItemPath[this.$galleryStore.currentItemPath.length - 2];
+    return "";
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/theme.scss";
+
+.command-btns {
+  justify-content: space-around;
+  vertical-align: middle;
+  align-items: center;
+  width: $layout-left;
+}
+</style>
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
new file mode 100644
index 0000000..b6a719f
--- /dev/null
+++ b/viewer/src/components/LdPicture.vue
@@ -0,0 +1,74 @@
+<!-- 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>
+  <div
+    v-dragscroll
+    class="scrollbar"
+    :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}"
+    @click="onClick"
+    @dragscrollstart="dragging=true"
+  >
+    <v-lazy-image :src="pictureSrc" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class LdPicture extends Vue {
+  @Prop({ required: true }) readonly picture!: Gallery.Picture;
+
+  dragging: boolean = false;
+
+  get pictureSrc() {
+    return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
+  }
+
+  onClick() {
+    if (!this.dragging) this.$uiStore.toggleFullscreen();
+    this.dragging = false;
+  }
+}
+</script>
+
+<style lang="scss">
+.fit-to-screen {
+  display: flex;
+  justify-content: space-around;
+  height: 100%;
+  & > img {
+    object-fit: contain;
+    cursor: zoom-in;
+  }
+}
+.original-size {
+  display: block;
+  text-align: center;
+  cursor: grab;
+  height: 100%;
+  & > img {
+    max-width: unset;
+    max-height: unset;
+    object-fit: none;
+    cursor: zoom-out;
+  }
+}
+</style>
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index a380021..6be0aee 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -37,10 +37,10 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { Operation } from "@/@types/tag/Operation";
+import { Operation } from "@/@types/Operation";
 
 @Component
-export default class LdTagInput extends Vue {
+export default class LdProposition extends Vue {
   get Operation() {
     return Operation;
   }
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index 7bbecec..eff02e6 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -40,7 +40,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { Operation } from "@/@types/tag/Operation";
+import { Operation } from "@/@types/Operation";
 import Tools from "@/tools";
 
 @Component
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
new file mode 100644
index 0000000..44a4c00
--- /dev/null
+++ b/viewer/src/components/LdThumbnail.vue
@@ -0,0 +1,81 @@
+<!-- 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>
+  <div class="forcedsize" :class="{'preload': loading}">
+    <v-lazy-image
+      v-if="item.thumbnail"
+      class="thumbnail"
+      :src="pictureSrc()"
+      :title="item.path"
+      @intersect="loading=true"
+      @load="loading=false"
+    />
+    <div v-else class="flex-column flex-center">
+      <fa-icon :icon="getIcon()" size="4x" />
+      {{item.title}}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import Tools from "@/tools";
+
+@Component
+export default class LdThumbnail extends Vue {
+  @Prop({ required: true }) readonly item!: Gallery.Item;
+
+  loading: boolean = false;
+
+  pictureSrc() {
+    return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
+  }
+
+  getIcon() {
+    return Tools.getIcon(this.item);
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/theme.scss";
+
+.thumbnail {
+  max-width: 250px;
+  max-height: 250px;
+}
+.preload {
+  animation: preloadAnimation 1s infinite ease-in-out alternate;
+}
+@keyframes preloadAnimation {
+  from {
+    background-color: $content-bgcolor;
+  }
+  to {
+    background-color: $loader-color;
+  }
+}
+// Temporary size until we get the true thumbnail size
+.forcedsize {
+  width: 250px;
+  height: 250px;
+  text-align: center;
+}
+</style>
-- 
cgit v1.2.3


From 2d48a8f15970d7af8092e9450057a05b4d3f9333 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 31 Jan 2020 13:22:52 +0100
Subject: viewer: when loading a picture, displays a preview based on the
 thumbnail on slow connections This works on Chrome, but FireFox presents some
 issues: - the picture background is sometimes white instead of transparent,
 hidding the background - image-orientation doesn't work for background
 pictures or for negative values

---
 viewer/src/components/LdPicture.vue | 49 +++++++++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index b6a719f..5425a00 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -25,7 +25,13 @@
     @click="onClick"
     @dragscrollstart="dragging=true"
   >
-    <v-lazy-image :src="pictureSrc" />
+    <v-lazy-image
+      :src="pictureSrc()"
+      :class="{'slow-loading': Boolean(slowLoadingStyle)}"
+      :style="slowLoadingStyle"
+      @load="clearTimer"
+    />
+    <b-loading :active="Boolean(slowLoadingStyle)" :is-full-page="false" class="ld-picture-loader" />
   </div>
 </template>
 
@@ -36,12 +42,35 @@ import { Component, Vue, Prop } from "vue-property-decorator";
 export default class LdPicture extends Vue {
   @Prop({ required: true }) readonly picture!: Gallery.Picture;
 
+  readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
+
   dragging: boolean = false;
+  slowLoadingStyle: string | null = null;
+  timer: NodeJS.Timeout | null = null;
+
+  mounted() {
+    if (this.picture.thumbnail) this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
+  }
+
+  destroyed() {
+    this.clearTimer();
+  }
+
+  clearTimer() {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+    this.slowLoadingStyle = null;
+  }
 
-  get pictureSrc() {
+  pictureSrc() {
     return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
   }
 
+  generateSlowLoadingStyle() {
+    this.clearTimer();
+    this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail}');`;
+  }
+
   onClick() {
     if (!this.dragging) this.$uiStore.toggleFullscreen();
     this.dragging = false;
@@ -50,6 +79,22 @@ export default class LdPicture extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/theme.scss";
+
+.ld-picture-loader {
+  position: relative;
+  & .loading-background {
+    background: none !important;
+  }
+}
+img.slow-loading {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-color: $content-bgcolor;
+  background-blend-mode: soft-light;
+  opacity: 1 !important;
+}
 .fit-to-screen {
   display: flex;
   justify-content: space-around;
-- 
cgit v1.2.3


From 4cf2727131829bd48c062896fdf237cf68a0b472 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 31 Jan 2020 14:05:09 +0100
Subject: viewer: Unify the minor size differences between command icons

---
 viewer/src/components/LdCommand.vue | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 484e56a..07cb354 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -64,5 +64,11 @@ export default class LdCommand extends Vue {
   vertical-align: middle;
   align-items: center;
   width: $layout-left;
+  > * {
+    // Unify the minor size differences between icons
+    width: 26px;
+    height: 26px;
+    margin-top: 2px;
+  }
 }
 </style>
-- 
cgit v1.2.3


From a7b235d8874fe4ad1d7e7a5ce59510d9f55b857d Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 2 Feb 2020 03:11:30 +0100
Subject: viewer: fixed the command button's titles (somehow the `:` were
 removed before the commit)

---
 viewer/src/components/LdCommand.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 07cb354..8c6ccfc 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -19,16 +19,16 @@
 
 <template>
   <div class="flex command-btns">
-    <div class="link" title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
+    <div class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandTagsIcon()" size="lg" />
     </div>
-    <router-link to="/" :class="{'disabled': isRoot()}" title="$t('title.home')">
+    <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')">
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <div class="link" title="$t('title.back')" @click="$router.go(-1)">
+    <div class="link" :title="$t('title.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
     </div>
-    <router-link :class="{'disabled': isRoot()}" title="$t('title.parent')" :to="parent()">
+    <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
       <fa-icon icon="folder" size="xs" />
       <fa-icon icon="level-up-alt" size="lg" />
     </router-link>
-- 
cgit v1.2.3


From 0697693934c700f50bcc45ad58ab0b8f0370561c Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 2 Feb 2020 05:01:17 +0100
Subject: viewer: adaptation to the thumbnail's new structure

---
 viewer/src/components/LdPicture.vue   | 18 +++++++++++-------
 viewer/src/components/LdThumbnail.vue |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 5425a00..154c4bd 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -29,9 +29,9 @@
       :src="pictureSrc()"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
-      @load="clearTimer"
+      @load="clearSlowLoading"
     />
-    <b-loading :active="Boolean(slowLoadingStyle)" :is-full-page="false" class="ld-picture-loader" />
+    <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
   </div>
 </template>
 
@@ -46,20 +46,22 @@ export default class LdPicture extends Vue {
 
   dragging: boolean = false;
   slowLoadingStyle: string | null = null;
+  loader: boolean = false;
   timer: NodeJS.Timeout | null = null;
 
   mounted() {
-    if (this.picture.thumbnail) this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
+    this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
   }
 
   destroyed() {
-    this.clearTimer();
+    this.clearSlowLoading();
   }
 
-  clearTimer() {
+  clearSlowLoading() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
     this.slowLoadingStyle = null;
+    this.loader = false;
   }
 
   pictureSrc() {
@@ -67,8 +69,10 @@ export default class LdPicture extends Vue {
   }
 
   generateSlowLoadingStyle() {
-    this.clearTimer();
-    this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail}');`;
+    this.clearSlowLoading();
+    this.loader = true;
+    if (this.picture.thumbnail)
+      this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
   }
 
   onClick() {
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 44a4c00..d9343dd 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -45,7 +45,7 @@ export default class LdThumbnail extends Vue {
   loading: boolean = false;
 
   pictureSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
+    if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`;
   }
 
   getIcon() {
-- 
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')

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 73e2dc5b39a5cd12c52b99ee076c1a1ad86a2ace Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 2 Feb 2020 19:29:12 +0100
Subject: viewer: implemented thumbnail size usage

---
 viewer/src/components/LdThumbnail.vue | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index d9343dd..d5c0b3c 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -18,12 +18,12 @@
 -->
 
 <template>
-  <div class="forcedsize" :class="{'preload': loading}">
+  <div :class="{'preload': loading}">
     <v-lazy-image
       v-if="item.thumbnail"
-      class="thumbnail"
       :src="pictureSrc()"
-      :title="item.path"
+      :style="pictureStyle()"
+      :title="item.title"
       @intersect="loading=true"
       @load="loading=false"
     />
@@ -45,7 +45,13 @@ export default class LdThumbnail extends Vue {
   loading: boolean = false;
 
   pictureSrc() {
-    if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`;
+    const resource = this.item.thumbnail!.resource;
+    return `${process.env.VUE_APP_DATA_URL}${resource}`;
+  }
+
+  pictureStyle() {
+    const resolution = this.item.thumbnail!.resolution;
+    return { width: `${resolution.width}px`, height: `${resolution.height}px` };
   }
 
   getIcon() {
@@ -57,10 +63,6 @@ export default class LdThumbnail extends Vue {
 <style lang="scss">
 @import "@/assets/scss/theme.scss";
 
-.thumbnail {
-  max-width: 250px;
-  max-height: 250px;
-}
 .preload {
   animation: preloadAnimation 1s infinite ease-in-out alternate;
 }
@@ -72,10 +74,4 @@ export default class LdThumbnail extends Vue {
     background-color: $loader-color;
   }
 }
-// Temporary size until we get the true thumbnail size
-.forcedsize {
-  width: 250px;
-  height: 250px;
-  text-align: center;
-}
 </style>
-- 
cgit v1.2.3


From 31d16f6fb20eb4935fc75e83bc565070ba7e5656 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 2 Feb 2020 19:59:29 +0100
Subject: viewer: crash fix for proposed tags when using discriminant format

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

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 6be0aee..0a293a9 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -58,6 +58,7 @@ export default class LdProposition extends Vue {
     } else {
       // Tags count from the current directory
       this.$galleryStore.currentItem?.tags
+        .flatMap(tag => tag.split("."))
         .map(tag => this.$galleryStore.tags[tag]) // FIXME: Folders with the same name are merged in the index
         .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
     }
-- 
cgit v1.2.3


From b8160585c4ea0037772c6a35c45b58d48621cd4d Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:09:36 +0100
Subject: viewer: ldcommand: fix keyboard navigation

By using proper semantics, using 'a' instead of 'div' to allow keyboard selection
---
 viewer/src/components/LdCommand.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8c6ccfc..841d773 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -19,15 +19,15 @@
 
 <template>
   <div class="flex command-btns">
-    <div class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
+    <a class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandTagsIcon()" size="lg" />
-    </div>
+    </a>
     <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')">
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <div class="link" :title="$t('title.back')" @click="$router.go(-1)">
+    <a class="link" :title="$t('title.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
-    </div>
+    </a>
     <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
       <fa-icon icon="folder" size="xs" />
       <fa-icon icon="level-up-alt" size="lg" />
-- 
cgit v1.2.3


From 4cae756b5c2a3544675eb5eb011b9a90e003ae6b Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:13:22 +0100
Subject: viewer: ldcommand: fix command buttons active boxes

Properly centering icons in their boxes instead of having them sitting in a corner.
---
 viewer/src/components/LdCommand.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 841d773..8257c1f 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -2,6 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -63,12 +64,14 @@ export default class LdCommand extends Vue {
   justify-content: space-around;
   vertical-align: middle;
   align-items: center;
-  width: $layout-left;
+  flex: 0 0 $layout-left;
+
   > * {
-    // Unify the minor size differences between icons
-    width: 26px;
-    height: 26px;
-    margin-top: 2px;
+    // normalise icon active boxes
+    width: $layout-top;
+    line-height: $layout-top;
+    text-align: center;
+    vertical-align: middle;
   }
 }
 </style>
-- 
cgit v1.2.3


From a286e822c37a17efc80e99b13d5cc02fef4ee138 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:15:50 +0100
Subject: viewer: ldcommand: reduce command bar on mobile

Hiding secondary buttons and allowing the bar to collapse.

GitHub: closes #100
---
 viewer/src/components/LdCommand.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8257c1f..eeab89f 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,10 +23,10 @@
     <a class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandTagsIcon()" size="lg" />
     </a>
-    <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')">
+    <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('title.home')">
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <a class="link" :title="$t('title.back')" @click="$router.go(-1)">
+    <a class="link command-secondary" :title="$t('title.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
     </a>
     <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
@@ -58,6 +58,7 @@ export default class LdCommand extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/_buefy_variables.scss";
 @import "@/assets/scss/theme.scss";
 
 .command-btns {
@@ -73,5 +74,13 @@ export default class LdCommand extends Vue {
     text-align: center;
     vertical-align: middle;
   }
+
+  @media only screen and (max-width: $tablet) {
+    flex: 0 1;
+
+    > .command-secondary {
+      display: none;
+    }
+  }
 }
 </style>
-- 
cgit v1.2.3


From 1942eb9e6d323aca512e53732179c823139dd9a1 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:20:50 +0100
Subject: viewer: ldcommand: clarify command button actions

By using more explicit icons and tooltip.
---
 viewer/src/components/LdCommand.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index eeab89f..5953eac 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -20,16 +20,16 @@
 
 <template>
   <div class="flex command-btns">
-    <a class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
-      <fa-icon :icon="commandTagsIcon()" size="lg" />
+    <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
+      <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
     </a>
-    <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('title.home')">
+    <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('command.home')">
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <a class="link command-secondary" :title="$t('title.back')" @click="$router.go(-1)">
+    <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
     </a>
-    <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
+    <router-link :class="{'disabled': isRoot()}" :title="$t('command.parent')" :to="parent()">
       <fa-icon icon="folder" size="xs" />
       <fa-icon icon="level-up-alt" size="lg" />
     </router-link>
@@ -42,8 +42,8 @@ import { RawLocation } from "vue-router";
 
 @Component
 export default class LdCommand extends Vue {
-  commandTagsIcon(): string {
-    return this.$uiStore.fullWidth ? "tags" : "window-close";
+  commandToggleSearchPanelIcon(): string {
+    return this.$uiStore.fullWidth ? "search" : "angle-double-left";
   }
 
   isRoot(): boolean {
-- 
cgit v1.2.3


From e606751ffeb4557cf69f7e24322d3dcc7336fc06 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:54:56 +0100
Subject: viewer: ldproposition: fix keyboard navigation

By using proper semantics, using 'a' instead of 'div' to allow keyboard selection.
---
 viewer/src/components/LdProposition.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 0a293a9..0da24ad 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -2,6 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -20,16 +21,16 @@
 <template>
   <div>
     <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
-      <div class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)">
+      <a class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)">
         <fa-icon icon="minus" />
-      </div>
-      <div class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)">
+      </a>
+      <a class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)">
         <fa-icon icon="plus" />
-      </div>
-      <div
+      </a>
+      <a
         class="operation-tag link"
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
-      >{{proposed.rawTag}}</div>
+      >{{proposed.rawTag}}</a>
       <div class="disabled">x{{proposed.count}}</div>
     </div>
   </div>
-- 
cgit v1.2.3


From 6d2cc07e543ae86facc4194108038a3310bc1e7a Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 19:04:34 +0100
Subject: viewer: ldproposition: add tooltips for actions on suggestions

GitHub: closes #23
---
 viewer/src/components/LdProposition.vue | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 0da24ad..395611f 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -21,17 +21,28 @@
 <template>
   <div>
     <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
-      <a class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)">
-        <fa-icon icon="minus" />
-      </a>
-      <a class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)">
-        <fa-icon icon="plus" />
-      </a>
+      <a
+        class="operation-btns link"
+        :title="$t('tag-propositions.substraction')"
+        @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
+      ><fa-icon icon="minus" alt="[-]" /></a>
+
+      <a
+        class="operation-btns link"
+        :title="$t('tag-propositions.addition')"
+        @click="add(Operation.ADDITION, proposed.rawTag)"
+      ><fa-icon icon="plus" alt="[+]" /></a>
+
       <a
         class="operation-tag link"
+        :title="$t('tag-propositions.intersection')"
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
       >{{proposed.rawTag}}</a>
-      <div class="disabled">x{{proposed.count}}</div>
+
+      <div
+        class="disabled"
+        :title="$t('tag-propositions.item-count')"
+      >{{proposed.count}}</div>
     </div>
   </div>
 </template>
-- 
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 -
 viewer/src/components/LdCommand.vue    | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/components')

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;
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8c6ccfc..54b602c 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -60,6 +60,7 @@ export default class LdCommand extends Vue {
 @import "@/assets/scss/theme.scss";
 
 .command-btns {
+  background-color: $command-buttons-bgcolor;
   justify-content: space-around;
   vertical-align: middle;
   align-items: center;
-- 
cgit v1.2.3


From c158f21dfc2411cd8d6cbd36a9b0e90ff5265597 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Mon, 10 Feb 2020 14:39:19 +0100
Subject: viewer: formatting and > a instead of > * in the CSS (the star
 selector is to be avoided if possible, it's slow and dangerous)

---
 viewer/src/components/LdCommand.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 5953eac..5b9bbff 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,7 +23,12 @@
     <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
     </a>
-    <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('command.home')">
+    <router-link
+      to="/"
+      class="command-secondary"
+      :class="{'disabled': isRoot()}"
+      :title="$t('command.home')"
+    >
       <fa-icon icon="home" size="lg" />
     </router-link>
     <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
@@ -67,7 +72,7 @@ export default class LdCommand extends Vue {
   align-items: center;
   flex: 0 0 $layout-left;
 
-  > * {
+  > a {
     // normalise icon active boxes
     width: $layout-top;
     line-height: $layout-top;
-- 
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 +++++++++++++++++++++++++++-------
 viewer/src/components/LdPicture.vue    | 14 +++--
 2 files changed, 82 insertions(+), 25 deletions(-)

(limited to 'viewer/src/components')

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>
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 154c4bd..8a9a08e 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -22,8 +22,10 @@
     v-dragscroll
     class="scrollbar"
     :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}"
-    @click="onClick"
-    @dragscrollstart="dragging=true"
+    @click.capture="e => dragScrollClickFix.onClickCapture(e)"
+    @click="$uiStore.toggleFullscreen()"
+    @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
+    @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
   >
     <v-lazy-image
       :src="pictureSrc()"
@@ -37,14 +39,15 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import DragScrollClickFix from "@/dragscrollclickfix";
 
 @Component
 export default class LdPicture extends Vue {
   @Prop({ required: true }) readonly picture!: Gallery.Picture;
 
   readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
+  readonly dragScrollClickFix = new DragScrollClickFix();
 
-  dragging: boolean = false;
   slowLoadingStyle: string | null = null;
   loader: boolean = false;
   timer: NodeJS.Timeout | null = null;
@@ -74,11 +77,6 @@ export default class LdPicture extends Vue {
     if (this.picture.thumbnail)
       this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
   }
-
-  onClick() {
-    if (!this.dragging) this.$uiStore.toggleFullscreen();
-    this.dragging = false;
-  }
 }
 </script>
 
-- 
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')

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 abcd10f8ac944f29a77d756558b1773551ee0877 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 11 Feb 2020 02:06:49 +0100
Subject: viewer: thumbnail others fixed sizes for better layout

---
 viewer/src/components/LdThumbnail.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index d5c0b3c..17c7659 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -27,7 +27,7 @@
       @intersect="loading=true"
       @load="loading=false"
     />
-    <div v-else class="flex-column flex-center">
+    <div v-else class="thumbnail-other flex-column flex-center">
       <fa-icon :icon="getIcon()" size="4x" />
       {{item.title}}
     </div>
@@ -63,6 +63,12 @@ export default class LdThumbnail extends Vue {
 <style lang="scss">
 @import "@/assets/scss/theme.scss";
 
+.thumbnail-other {
+  width: $thumbnail-other-size;
+  height: $thumbnail-other-size;
+  text-align: center;
+}
+
 .preload {
   animation: preloadAnimation 1s infinite ease-in-out alternate;
 }
-- 
cgit v1.2.3


From 19d40a5ee98fb1f244612155acc559ff2f21bf6b Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 12 Feb 2020 00:09:34 +0100
Subject: viewer: implemented config.json

Note: The DevServer needs to know when the file is from the App, or from the FileSystem.
We use a tilde to make this separation. The tilde URL is declared in '.env.development'
GitHub: Resolves #32
---
 viewer/src/components/LdPicture.vue   | 12 +++++++-----
 viewer/src/components/LdThumbnail.vue |  7 +++----
 2 files changed, 10 insertions(+), 9 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 8a9a08e..a5faeb3 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -28,7 +28,7 @@
     @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
   >
     <v-lazy-image
-      :src="pictureSrc()"
+      :src="pictureSrc(picture.properties.resource)"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
       @load="clearSlowLoading"
@@ -67,15 +67,17 @@ export default class LdPicture extends Vue {
     this.loader = false;
   }
 
-  pictureSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
+  pictureSrc(resource: string) {
+    return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`;
   }
 
   generateSlowLoadingStyle() {
     this.clearSlowLoading();
     this.loader = true;
-    if (this.picture.thumbnail)
-      this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
+    if (this.picture.thumbnail) {
+      const url = this.pictureSrc(this.picture.thumbnail.resource);
+      this.slowLoadingStyle = `background-image: url('${url}');`;
+    }
   }
 }
 </script>
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 17c7659..13468e1 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -21,7 +21,7 @@
   <div :class="{'preload': loading}">
     <v-lazy-image
       v-if="item.thumbnail"
-      :src="pictureSrc()"
+      :src="pictureSrc(item.thumbnail.resource)"
       :style="pictureStyle()"
       :title="item.title"
       @intersect="loading=true"
@@ -44,9 +44,8 @@ export default class LdThumbnail extends Vue {
 
   loading: boolean = false;
 
-  pictureSrc() {
-    const resource = this.item.thumbnail!.resource;
-    return `${process.env.VUE_APP_DATA_URL}${resource}`;
+  pictureSrc(resource: string) {
+    return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`;
   }
 
   pictureStyle() {
-- 
cgit v1.2.3


From af4660b4c4fea455dfffbf2d966bae425ed6effb Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 12 Feb 2020 21:25:07 +0100
Subject: viewer: project configuration - eof-last enforced

---
 viewer/src/components/LdKeyPress.vue | 2 +-
 viewer/src/components/index.ts       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdKeyPress.vue b/viewer/src/components/LdKeyPress.vue
index 8276607..c507b33 100644
--- a/viewer/src/components/LdKeyPress.vue
+++ b/viewer/src/components/LdKeyPress.vue
@@ -46,4 +46,4 @@ export default class LdKeyPress extends Vue {
     return e;
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/viewer/src/components/index.ts b/viewer/src/components/index.ts
index 8e73274..ef55489 100644
--- a/viewer/src/components/index.ts
+++ b/viewer/src/components/index.ts
@@ -38,4 +38,4 @@ requireComponent.keys().forEach(fileName => {
         // otherwise fall back to module's root.
         componentConfig.default ?? componentConfig
     )
-})
\ No newline at end of file
+})
-- 
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 ++++---
 viewer/src/components/LdCommand.vue       | 16 +++----
 viewer/src/components/LdCommandSearch.vue | 55 +++++++++++++++++++++++
 viewer/src/components/LdGallery.vue       | 47 +++++++++++++++++++
 viewer/src/components/LdModeRadio.vue     | 41 -----------------
 viewer/src/components/LdPicture.vue       |  2 +-
 viewer/src/components/LdProposition.vue   | 35 ++++++++-------
 viewer/src/components/LdTagInput.vue      | 75 ++++---------------------------
 viewer/src/components/LdThumbnail.vue     |  4 +-
 9 files changed, 149 insertions(+), 143 deletions(-)
 create mode 100644 viewer/src/components/LdCommandSearch.vue
 create mode 100644 viewer/src/components/LdGallery.vue
 delete mode 100644 viewer/src/components/LdModeRadio.vue

(limited to 'viewer/src/components')

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>
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 7590ea7..468c241 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,14 +23,6 @@
     <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()