aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
authorZero~Informatique2020-01-30 22:58:27 +0100
committerZero~Informatique2020-01-30 22:58:27 +0100
commit17b1598c5a5a375e6eaa0763767368c05ba0f56e (patch)
treea05a973b954e452b1124b2d4b6df7261d5175b57 /viewer/src/components
parent42105af46681d81959a5d5a9a16ec9e98463a92e (diff)
downloadldgallery-17b1598c5a5a375e6eaa0763767368c05ba0f56e.tar.gz
viewer: Improved the proposition layout
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdProposition.vue36
-rw-r--r--viewer/src/components/LdTagInput.vue1
2 files changed, 24 insertions, 13 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>
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index 7c9981f..ff354c6 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -27,7 +27,6 @@
27 :data="filteredTags" 27 :data="filteredTags"
28 field="display" 28 field="display"
29 type="is-black" 29 type="is-black"
30 icon="tag"
31 size="is-medium" 30 size="is-medium"
32 class="panelTagInput" 31 class="panelTagInput"
33 @typing="searchTags" 32 @typing="searchTags"