aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
Diffstat (limited to 'viewer')
-rw-r--r--viewer/src/assets/scss/scrollbar.scss19
-rw-r--r--viewer/src/assets/scss/transition.scss19
-rw-r--r--viewer/src/components/LdCommandSort.vue6
-rw-r--r--viewer/src/components/LdProposition.vue13
-rw-r--r--viewer/src/locales/en.json4
-rw-r--r--viewer/src/services/itemSortFn.ts2
-rw-r--r--viewer/src/store/uiStore.ts2
-rw-r--r--viewer/src/views/PanelLeft.vue4
8 files changed, 56 insertions, 13 deletions
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 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2020 Pacien TRAN-GIRARD
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
1@import "~@/assets/scss/theme.scss"; 20@import "~@/assets/scss/theme.scss";
2 21
3// === Scrollbar styling 22// === 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 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2020 Pacien TRAN-GIRARD
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
1@import "~@/assets/scss/theme.scss"; 20@import "~@/assets/scss/theme.scss";
2 21
3// === Transitions for Vue 22// === 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 @@
25 </a> 25 </a>
26 <b-dropdown-item v-for="(sort, idx) in SORTS" :key="idx" :value="idx"> 26 <b-dropdown-item v-for="(sort, idx) in SORTS" :key="idx" :value="idx">
27 <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" /> 27 <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" />
28 <span :class="$style.ml1">{{ sort.name }}</span> 28 <span :class="$style.dropdownLabel">{{ sort.name }}</span>
29 </b-dropdown-item> 29 </b-dropdown-item>
30 </b-dropdown> 30 </b-dropdown>
31</template> 31</template>
@@ -38,7 +38,7 @@ import ItemSortFn from "@/services/itemSortFn";
38@Component 38@Component
39export default class LdCommandSort extends Vue { 39export default class LdCommandSort extends Vue {
40 readonly SORTS = [ 40 readonly SORTS = [
41 { name: this.$t("command.sort.byName"), fn: ItemSortFn.sortByName }, 41 { name: this.$t("command.sort.byNameAsc"), fn: ItemSortFn.sortByNameAsc },
42 { name: this.$t("command.sort.byDateDesc"), fn: ItemSortFn.sortByDateDesc }, 42 { name: this.$t("command.sort.byDateDesc"), fn: ItemSortFn.sortByDateDesc },
43 ]; 43 ];
44 44
@@ -51,7 +51,7 @@ export default class LdCommandSort extends Vue {
51</script> 51</script>
52 52
53<style lang="scss" module> 53<style lang="scss" module>
54.ml1 { 54.dropdownLabel {
55 margin-left: 0.5em; 55 margin-left: 0.5em;
56} 56}
57</style> 57</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 @@
47 47
48 <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div> 48 <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div>
49 </div> 49 </div>
50 <div v-if="showMore > 0" class="showmore" @click="limit += showMore"> 50 <div v-if="showMoreCount > 0" class="showmore" @click="limit += showMoreCount">
51 {{ $t("tag-propositions.showmore", [showMore]) }}<fa-icon icon="angle-double-down" /> 51 {{ $t("tag-propositions.showmore", [showMoreCount]) }}<fa-icon icon="angle-double-down" />
52 </div> 52 </div>
53 </div> 53 </div>
54</template> 54</template>
@@ -65,10 +65,15 @@ export default class LdProposition extends Vue {
65 @Prop({ required: true }) readonly tagsIndex!: Tag.Index; 65 @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
66 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[]; 66 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
67 67
68 readonly INITIAL_TAG_DISPLAY_LIMIT = this.$galleryStore.config?.initialTagDisplayLimit ?? 10; 68 readonly INITIAL_TAG_DISPLAY_LIMIT = this.getInitialTagDisplayLimit();
69 69
70 limit: number = this.INITIAL_TAG_DISPLAY_LIMIT; 70 limit: number = this.INITIAL_TAG_DISPLAY_LIMIT;
71 71
72 getInitialTagDisplayLimit() {
73 const limit = this.$galleryStore.config?.initialTagDisplayLimit ?? 10;
74 return limit > 0 ? limit : 1000;
75 }
76
72 @Watch("$route") 77 @Watch("$route")
73 onRouteChange() { 78 onRouteChange() {
74 this.limit = this.INITIAL_TAG_DISPLAY_LIMIT; 79 this.limit = this.INITIAL_TAG_DISPLAY_LIMIT;
@@ -105,7 +110,7 @@ export default class LdProposition extends Vue {
105 .map(entry => ({ rawTag: entry[0], count: entry[1] })); 110 .map(entry => ({ rawTag: entry[0], count: entry[1] }));
106 } 111 }
107 112
108 get showMore(): number { 113 get showMoreCount(): number {
109 return Object.keys(this.propositions).length - Object.keys(this.proposedTags).length; 114 return Object.keys(this.propositions).length - Object.keys(this.proposedTags).length;
110 } 115 }
111 116
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 @@
4 "command.search": "Open/close search panel", 4 "command.search": "Open/close search panel",
5 "command.search.clear": "Clear", 5 "command.search.clear": "Clear",
6 "command.search.search": "Search", 6 "command.search.search": "Search",
7 "command.sort.byDateDesc": "By most recent", 7 "command.sort.byDateDesc": "By date (most recent first)",
8 "command.sort.byName": "By name", 8 "command.sort.byNameAsc": "By name (A to Z)",
9 "directory.no-results": "Empty directory", 9 "directory.no-results": "Empty directory",
10 "download.download-file-fmt": "Download {0}", 10 "download.download-file-fmt": "Download {0}",
11 "gallery.unknown-resource": "Resource not found", 11 "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 @@
18*/ 18*/
19 19
20export default class ItemSortFn { 20export default class ItemSortFn {
21 static sortByName(left: Gallery.Item, right: Gallery.Item): number { 21 static sortByNameAsc(left: Gallery.Item, right: Gallery.Item): number {
22 return left.title.localeCompare(right.title); 22 return left.title.localeCompare(right.title);
23 } 23 }
24 24
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 {
31 fullscreen: boolean = false; 31 fullscreen: boolean = false;
32 fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT); 32 fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
33 searchMode: boolean = false; 33 searchMode: boolean = false;
34 sortFn: TItemSortFn = ItemSortFn.sortByName; 34 sortFn: TItemSortFn = ItemSortFn.sortByNameAsc;
35 35
36 // --- 36 // ---
37 37
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 @@
26 /> 26 />
27 <ld-command-search @clear="clear" @search="search" /> 27 <ld-command-search @clear="clear" @search="search" />
28 <h1 class="title">{{ $t("panelLeft.propositions") }}</h1> 28 <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
29 <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrink1000"> 29 <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrinkFully">
30 <ld-proposition 30 <ld-proposition
31 v-for="category in $galleryStore.tagsCategories" 31 v-for="category in $galleryStore.tagsCategories"
32 :key="category.tag" 32 :key="category.tag"
@@ -110,7 +110,7 @@ export default class PanelLeft extends Vue {
110 } 110 }
111} 111}
112 112
113.flexShrink1000 { 113.flexShrinkFully {
114 flex-shrink: 1000; 114 flex-shrink: 1000;
115} 115}
116</style> 116</style>