aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdProposition.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components/LdProposition.vue')
-rw-r--r--viewer/src/components/LdProposition.vue36
1 files changed, 24 insertions, 12 deletions
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index f653e4d..02f7fe4 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,12 +19,18 @@
19 19
20<template> 20<template>
21 <div> 21 <div>
22 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition link"> 22 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
23 <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" /> 23 <div class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)">
24 <span 24 <fa-icon icon="minus" />
25 </div>
26 <div class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)">
27 <fa-icon icon="plus" />
28 </div>
29 <div
30 class="operation-tag link"
25 @click="add(Operation.INTERSECTION, proposed.rawTag)" 31 @click="add(Operation.INTERSECTION, proposed.rawTag)"
26 >{{proposed.rawTag}}&nbsp;x{{proposed.count}}</span> 32 >{{proposed.rawTag}}</div>
27 <fa-icon icon="plus" @click="add(Operation.ADDITION, proposed.rawTag)" /> 33 <div class="disabled">x{{proposed.count}}</div>
28 </div> 34 </div>
29 </div> 35 </div>
30</template> 36</template>
@@ -72,7 +78,7 @@ export default class LdTagInput extends Vue {
72 const node = this.$galleryStore.tags[rawTag]; 78 const node = this.$galleryStore.tags[rawTag];
73 const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` }; 79 const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` };
74 this.$uiStore.currentTags.push(search); 80 this.$uiStore.currentTags.push(search);
75 this.$uiStore.mode = "search"; 81 setTimeout(() => this.$uiStore.setModeSearch()); // Give time for the UI to display the Tag change
76 } 82 }
77} 83}
78</script> 84</script>
@@ -82,12 +88,18 @@ export default class LdTagInput extends Vue {
82 88
83.proposition { 89.proposition {
84 display: flex; 90 display: flex;
85 justify-content: space-between;
86 align-items: center; 91 align-items: center;
87 margin: 10px; 92 padding-right: 7px;
88 cursor: pointer; 93 .operation-tag {
89} 94 text-overflow: ellipsis;
90.proposition span { 95 white-space: nowrap;
91 padding: 0 10px; 96 overflow: hidden;
97 flex-grow: 1;
98 cursor: pointer;
99 }
100 .operation-btns {
101 padding: 2px 7px;
102 cursor: pointer;
103 }
92} 104}
93</style> 105</style>