diff options
-rw-r--r-- | example/config.json | 2 | ||||
-rw-r--r-- | viewer/src/assets/scss/scrollbar.scss | 19 | ||||
-rw-r--r-- | viewer/src/assets/scss/transition.scss | 19 | ||||
-rw-r--r-- | viewer/src/components/LdCommandSort.vue | 6 | ||||
-rw-r--r-- | viewer/src/components/LdProposition.vue | 13 | ||||
-rw-r--r-- | viewer/src/locales/en.json | 4 | ||||
-rw-r--r-- | viewer/src/services/itemSortFn.ts | 2 | ||||
-rw-r--r-- | viewer/src/store/uiStore.ts | 2 | ||||
-rw-r--r-- | viewer/src/views/PanelLeft.vue | 4 |
9 files changed, 57 insertions, 14 deletions
diff --git a/example/config.json b/example/config.json index cec359c..5827d25 100644 --- a/example/config.json +++ b/example/config.json | |||
@@ -1,4 +1,4 @@ | |||
1 | { | 1 | { |
2 | "galleryRoot": "out/", | 2 | "galleryRoot": "out/", |
3 | "initialTagDisplayLimit": 10, | 3 | "initialTagDisplayLimit": 10 |
4 | } | 4 | } |
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 |
39 | export default class LdCommandSort extends Vue { | 39 | export 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 | ||
20 | export default class ItemSortFn { | 20 | export 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> |