diff options
-rw-r--r-- | viewer/src/assets/scss/global.scss | 4 | ||||
-rw-r--r-- | viewer/src/assets/scss/theme.scss | 2 | ||||
-rw-r--r-- | viewer/src/components/LdProposition.vue | 17 | ||||
-rw-r--r-- | viewer/src/components/LdTagInput.vue | 9 | ||||
-rw-r--r-- | viewer/src/views/PanelLeft.vue | 4 |
5 files changed, 22 insertions, 14 deletions
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index a8a42a1..9e61b8b 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss | |||
@@ -85,8 +85,8 @@ button svg + span { | |||
85 | overflow: auto; | 85 | overflow: auto; |
86 | } | 86 | } |
87 | .scrollbar::-webkit-scrollbar { | 87 | .scrollbar::-webkit-scrollbar { |
88 | width: $scrollbar_width; | 88 | width: $scrollbar-width; |
89 | height: $scrollbar_width; | 89 | height: $scrollbar-width; |
90 | } | 90 | } |
91 | .scrollbar::-webkit-scrollbar-corner { | 91 | .scrollbar::-webkit-scrollbar-corner { |
92 | background-color: transparent; | 92 | background-color: transparent; |
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss index 35983a7..feb8543 100644 --- a/viewer/src/assets/scss/theme.scss +++ b/viewer/src/assets/scss/theme.scss | |||
@@ -63,7 +63,7 @@ $panel-left-txtcolor: $primary; | |||
63 | $command-buttons-bgcolor: $palette-700; | 63 | $command-buttons-bgcolor: $palette-700; |
64 | $content-bgcolor: $palette-900; | 64 | $content-bgcolor: $palette-900; |
65 | $scrollbar-color: $palette-300; | 65 | $scrollbar-color: $palette-300; |
66 | $scrollbar_width: 10px; | 66 | $scrollbar-width: 10px; |
67 | $loader-color: $palette-800; | 67 | $loader-color: $palette-800; |
68 | $input-tag-delete-background-color: $palette-700; | 68 | $input-tag-delete-background-color: $palette-700; |
69 | $breadcrumb-margins: 12px; | 69 | $breadcrumb-margins: 12px; |
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue index 1a1d387..c69a7c3 100644 --- a/viewer/src/components/LdProposition.vue +++ b/viewer/src/components/LdProposition.vue | |||
@@ -20,10 +20,7 @@ | |||
20 | 20 | ||
21 | <template> | 21 | <template> |
22 | <div class="proposition"> | 22 | <div class="proposition"> |
23 | <h2 | 23 | <h2 v-if="showCategory && proposedTags.length" class="subtitle category">{{title}}</h2> |
24 | v-if="showTitle && proposedTags.length" | ||
25 | class="subtitle category" | ||
26 | >{{title || $t('panelLeft.propositions.other')}}</h2> | ||
27 | <div v-for="proposed in proposedTags" :key="proposed.rawTag"> | 24 | <div v-for="proposed in proposedTags" :key="proposed.rawTag"> |
28 | <a | 25 | <a |
29 | class="operation-btns link" | 26 | class="operation-btns link" |
@@ -58,8 +55,8 @@ import { Operation } from "@/@types/Operation"; | |||
58 | 55 | ||
59 | @Component | 56 | @Component |
60 | export default class LdProposition extends Vue { | 57 | export default class LdProposition extends Vue { |
61 | @Prop({ type: String, required: true }) readonly title!: string; | 58 | @Prop() readonly category?: Tag.Node; |
62 | @Prop({ type: Boolean, required: true }) readonly showTitle!: boolean; | 59 | @Prop({ type: Boolean, required: true }) readonly showCategory!: boolean; |
63 | @Prop({ type: Array, required: true }) readonly currentTags!: string[]; | 60 | @Prop({ type: Array, required: true }) readonly currentTags!: string[]; |
64 | @Prop({ required: true }) readonly tagsIndex!: Tag.Index; | 61 | @Prop({ required: true }) readonly tagsIndex!: Tag.Index; |
65 | @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[]; | 62 | @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[]; |
@@ -91,6 +88,10 @@ export default class LdProposition extends Vue { | |||
91 | .map(entry => ({ rawTag: entry[0], count: entry[1] })); | 88 | .map(entry => ({ rawTag: entry[0], count: entry[1] })); |
92 | } | 89 | } |
93 | 90 | ||
91 | get title() { | ||
92 | return this.category?.tag ?? this.$t("panelLeft.propositions.other"); | ||
93 | } | ||
94 | |||
94 | extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] { | 95 | extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] { |
95 | return [...new Set(currentTags.flatMap(tag => tag.items))]; | 96 | return [...new Set(currentTags.flatMap(tag => tag.items))]; |
96 | } | 97 | } |
@@ -102,8 +103,8 @@ export default class LdProposition extends Vue { | |||
102 | 103 | ||
103 | add(operation: Operation, rawTag: Gallery.RawTag) { | 104 | add(operation: Operation, rawTag: Gallery.RawTag) { |
104 | const node = this.tagsIndex[rawTag]; | 105 | const node = this.tagsIndex[rawTag]; |
105 | const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` }; | 106 | const display = this.category ? `${operation}${this.category.tag}:${node.tag}` : `${operation}${node.tag}`; |
106 | this.model.push(search); | 107 | this.model.push({ ...node, parent: this.category, operation, display }); |
107 | } | 108 | } |
108 | } | 109 | } |
109 | </script> | 110 | </script> |
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue index bdb07bc..865db96 100644 --- a/viewer/src/components/LdTagInput.vue +++ b/viewer/src/components/LdTagInput.vue | |||
@@ -54,9 +54,16 @@ export default class LdTagInput extends Vue { | |||
54 | return `${option.display} (${option.items.length})`; | 54 | return `${option.display} (${option.items.length})`; |
55 | } | 55 | } |
56 | 56 | ||
57 | filterAlreadyPresent(newSearch: Tag.Search) { | ||
58 | return !this.model.find( | ||
59 | currentSearch => | ||
60 | currentSearch.tag === newSearch.tag && (!currentSearch.parent || currentSearch.parent === newSearch.parent) | ||
61 | ); | ||
62 | } | ||
63 | |||
57 | searchTags(filter: string) { | 64 | searchTags(filter: string) { |
58 | this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false) | 65 | this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false) |
59 | .filter(newSearch => !this.model.find(currentSearch => currentSearch.tag === newSearch.tag)) | 66 | .filter(this.filterAlreadyPresent) |
60 | .sort((a, b) => b.items.length - a.items.length); | 67 | .sort((a, b) => b.items.length - a.items.length); |
61 | } | 68 | } |
62 | 69 | ||
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue index 824d1ae..3fc62be 100644 --- a/viewer/src/views/PanelLeft.vue +++ b/viewer/src/views/PanelLeft.vue | |||
@@ -26,8 +26,8 @@ | |||
26 | <ld-proposition | 26 | <ld-proposition |
27 | v-for="(category) in $galleryStore.tagsCategories" | 27 | v-for="(category) in $galleryStore.tagsCategories" |
28 | :key="category.tag" | 28 | :key="category.tag" |
29 | :title="category.tag" | 29 | :category="$galleryStore.tagsIndex[category.tag]" |
30 | :show-title="$galleryStore.tagsCategories.length > 1" | 30 | :show-category="$galleryStore.tagsCategories.length > 1" |
31 | :search-filters.sync="searchFilters" | 31 | :search-filters.sync="searchFilters" |
32 | :tags-index="category.index" | 32 | :tags-index="category.index" |
33 | :current-tags="currentTags()" | 33 | :current-tags="currentTags()" |