From f89ed0bd94ea570d9e6533301783d13b13033db0 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 11 Sep 2020 20:10:56 +0200
Subject: viewer: PR #238 code review changes

---
 viewer/src/assets/scss/scrollbar.scss   | 19 +++++++++++++++++++
 viewer/src/assets/scss/transition.scss  | 19 +++++++++++++++++++
 viewer/src/components/LdCommandSort.vue |  6 +++---
 viewer/src/components/LdProposition.vue | 13 +++++++++----
 viewer/src/locales/en.json              |  4 ++--
 viewer/src/services/itemSortFn.ts       |  2 +-
 viewer/src/store/uiStore.ts             |  2 +-
 viewer/src/views/PanelLeft.vue          |  4 ++--
 8 files changed, 56 insertions(+), 13 deletions(-)

(limited to 'viewer/src')

diff --git a/viewer/src/assets/scss/scrollbar.scss b/viewer/src/assets/scss/scrollbar.scss
index cfca929..eb34d1e 100644
--- a/viewer/src/assets/scss/scrollbar.scss
+++ b/viewer/src/assets/scss/scrollbar.scss
@@ -1,3 +1,22 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 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
+-- 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/>.
+*/
+
 @import "~@/assets/scss/theme.scss";
 
 // === Scrollbar styling
diff --git a/viewer/src/assets/scss/transition.scss b/viewer/src/assets/scss/transition.scss
index 160f625..bb41f0d 100644
--- a/viewer/src/assets/scss/transition.scss
+++ b/viewer/src/assets/scss/transition.scss
@@ -1,3 +1,22 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 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
+-- 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/>.
+*/
+
 @import "~@/assets/scss/theme.scss";
 
 // === Transitions for Vue
diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue
index 1d2eac3..1eef5d3 100644
--- a/viewer/src/components/LdCommandSort.vue
+++ b/viewer/src/components/LdCommandSort.vue
@@ -25,7 +25,7 @@
     </a>
     <b-dropdown-item v-for="(sort, idx) in SORTS" :key="idx" :value="idx">
       <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" />
-      <span :class="$style.ml1">{{ sort.name }}</span>
+      <span :class="$style.dropdownLabel">{{ sort.name }}</span>
     </b-dropdown-item>
   </b-dropdown>
 </template>
@@ -38,7 +38,7 @@ import ItemSortFn from "@/services/itemSortFn";
 @Component
 export default class LdCommandSort extends Vue {
   readonly SORTS = [
-    { name: this.$t("command.sort.byName"), fn: ItemSortFn.sortByName },
+    { name: this.$t("command.sort.byNameAsc"), fn: ItemSortFn.sortByNameAsc },
     { name: this.$t("command.sort.byDateDesc"), fn: ItemSortFn.sortByDateDesc },
   ];
 
@@ -51,7 +51,7 @@ export default class LdCommandSort extends Vue {
 </script>
 
 <style lang="scss" module>
-.ml1 {
+.dropdownLabel {
   margin-left: 0.5em;
 }
 </style>
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index e19e01a..34ddf51 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -47,8 +47,8 @@
 
       <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div>
     </div>
-    <div v-if="showMore > 0" class="showmore" @click="limit += showMore">
-      {{ $t("tag-propositions.showmore", [showMore]) }}<fa-icon icon="angle-double-down" />
+    <div v-if="showMoreCount > 0" class="showmore" @click="limit += showMoreCount">
+      {{ $t("tag-propositions.showmore", [showMoreCount]) }}<fa-icon icon="angle-double-down" />
     </div>
   </div>
 </template>
@@ -65,10 +65,15 @@ export default class LdProposition extends Vue {
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
   @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
 
-  readonly INITIAL_TAG_DISPLAY_LIMIT = this.$galleryStore.config?.initialTagDisplayLimit ?? 10;
+  readonly INITIAL_TAG_DISPLAY_LIMIT = this.getInitialTagDisplayLimit();
 
   limit: number = this.INITIAL_TAG_DISPLAY_LIMIT;
 
+  getInitialTagDisplayLimit() {
+    const limit = this.$galleryStore.config?.initialTagDisplayLimit ?? 10;
+    return limit > 0 ? limit : 1000;
+  }
+
   @Watch("$route")
   onRouteChange() {
     this.limit = this.INITIAL_TAG_DISPLAY_LIMIT;
@@ -105,7 +110,7 @@ export default class LdProposition extends Vue {
       .map(entry => ({ rawTag: entry[0], count: entry[1] }));
   }
 
-  get showMore(): number {
+  get showMoreCount(): number {
     return Object.keys(this.propositions).length - Object.keys(this.proposedTags).length;
   }
 
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index f387a89..ce5b8b2 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -4,8 +4,8 @@
   "command.search": "Open/close search panel",
   "command.search.clear": "Clear",
   "command.search.search": "Search",
-  "command.sort.byDateDesc": "By most recent",
-  "command.sort.byName": "By name",
+  "command.sort.byDateDesc": "By date (most recent first)",
+  "command.sort.byNameAsc": "By name (A to Z)",
   "directory.no-results": "Empty directory",
   "download.download-file-fmt": "Download {0}",
   "gallery.unknown-resource": "Resource not found",
diff --git a/viewer/src/services/itemSortFn.ts b/viewer/src/services/itemSortFn.ts
index ec9942c..a7e0883 100644
--- a/viewer/src/services/itemSortFn.ts
+++ b/viewer/src/services/itemSortFn.ts
@@ -18,7 +18,7 @@
 */
 
 export default class ItemSortFn {
-  static sortByName(left: Gallery.Item, right: Gallery.Item): number {
+  static sortByNameAsc(left: Gallery.Item, right: Gallery.Item): number {
     return left.title.localeCompare(right.title);
   }
 
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index 1fe9f49..2d583fc 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -31,7 +31,7 @@ export default class UIStore extends VuexModule {
   fullscreen: boolean = false;
   fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
   searchMode: boolean = false;
-  sortFn: TItemSortFn = ItemSortFn.sortByName;
+  sortFn: TItemSortFn = ItemSortFn.sortByNameAsc;
 
   // ---
 
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 12c95d1..0ab3aa8 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -26,7 +26,7 @@
     />
     <ld-command-search @clear="clear" @search="search" />
     <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
-    <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrink1000">
+    <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrinkFully">
       <ld-proposition
         v-for="category in $galleryStore.tagsCategories"
         :key="category.tag"
@@ -110,7 +110,7 @@ export default class PanelLeft extends Vue {
   }
 }
 
-.flexShrink1000 {
+.flexShrinkFully {
   flex-shrink: 1000;
 }
 </style>
-- 
cgit v1.2.3