aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
authorZero~Informatique2020-04-03 03:42:35 +0200
committerZero~Informatique2020-04-03 03:42:35 +0200
commit577f49ab6e1fd9cd8007804a13dea1471ee2fb1f (patch)
treee9a911b580b839474cc1697fa4b9c83fe20788a3 /viewer/src/components
parent54790c6c73d7c51ff22cf5e9722b141cdc0249df (diff)
downloadldgallery-577f49ab6e1fd9cd8007804a13dea1471ee2fb1f.tar.gz
viewer: tag categories implementation
GitHub: Resolves #29
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdProposition.vue47
1 files changed, 32 insertions, 15 deletions
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 3357777..1a1d387 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,8 +19,12 @@
19--> 19-->
20 20
21<template> 21<template>
22 <div> 22 <div class="proposition">
23 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition"> 23 <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 <a 28 <a
25 class="operation-btns link" 29 class="operation-btns link"
26 :title="$t('tag-propositions.substraction')" 30 :title="$t('tag-propositions.substraction')"
@@ -54,6 +58,8 @@ import { Operation } from "@/@types/Operation";
54 58
55@Component 59@Component
56export default class LdProposition extends Vue { 60export default class LdProposition extends Vue {
61 @Prop({ type: String, required: true }) readonly title!: string;
62 @Prop({ type: Boolean, required: true }) readonly showTitle!: boolean;
57 @Prop({ type: Array, required: true }) readonly currentTags!: string[]; 63 @Prop({ type: Array, required: true }) readonly currentTags!: string[];
58 @Prop({ required: true }) readonly tagsIndex!: Tag.Index; 64 @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
59 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[]; 65 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
@@ -69,13 +75,14 @@ export default class LdProposition extends Vue {
69 this.extractDistinctItems(this.model) 75 this.extractDistinctItems(this.model)
70 .flatMap(item => item.tags) 76 .flatMap(item => item.tags)
71 .map(this.rightmost) 77 .map(this.rightmost)
72 .filter(rawTag => !this.model.find(search => search.tag === rawTag)) 78 .filter(rawTag => this.tagsIndex[rawTag] && !this.model.find(search => search.tag === rawTag))
73 .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1)); 79 .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
74 } else { 80 } else {
75 // Tags count from the current directory 81 // Tags count from the current directory
76 this.currentTags 82 this.currentTags
77 .flatMap(tag => tag.split(":")) 83 .flatMap(tag => tag.split(":"))
78 .map(tag => this.tagsIndex[tag]) 84 .map(tag => this.tagsIndex[tag])
85 .filter(Boolean)
79 .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length)); 86 .forEach(tagindex => (propositions[tagindex.tag] = tagindex.items.length));
80 } 87 }
81 88
@@ -105,19 +112,29 @@ export default class LdProposition extends Vue {
105@import "@/assets/scss/theme.scss"; 112@import "@/assets/scss/theme.scss";
106 113
107.proposition { 114.proposition {
108 display: flex; 115 .subtitle {
109 align-items: center; 116 background-color: $proposed-category-bgcolor;
110 padding-right: 7px; 117 width: 100%;
111 .operation-tag { 118 padding: 0 0 6px 0;
112 text-overflow: ellipsis; 119 margin: 0;
113 white-space: nowrap; 120 text-align: center;
114 overflow: hidden; 121 font-variant: small-caps;
115 flex-grow: 1;
116 cursor: pointer;
117 } 122 }
118 .operation-btns { 123 > div {
119 padding: 2px 7px; 124 display: flex;
120 cursor: pointer; 125 align-items: center;
126 padding-right: 7px;
127 .operation-tag {
128 text-overflow: ellipsis;
129 white-space: nowrap;
130 overflow: hidden;
131 flex-grow: 1;
132 cursor: pointer;
133 }
134 .operation-btns {
135 padding: 2px 7px;
136 cursor: pointer;
137 }
121 } 138 }
122} 139}
123</style> 140</style>