aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2020-01-30 22:58:27 +0100
committerZero~Informatique2020-01-30 22:58:27 +0100
commit17b1598c5a5a375e6eaa0763767368c05ba0f56e (patch)
treea05a973b954e452b1124b2d4b6df7261d5175b57
parent42105af46681d81959a5d5a9a16ec9e98463a92e (diff)
downloadldgallery-17b1598c5a5a375e6eaa0763767368c05ba0f56e.tar.gz
viewer: Improved the proposition layout
-rw-r--r--viewer/src/assets/scss/global.scss5
-rw-r--r--viewer/src/assets/scss/theme.scss2
-rw-r--r--viewer/src/components/LdProposition.vue36
-rw-r--r--viewer/src/components/LdTagInput.vue1
-rw-r--r--viewer/src/plugins/fontawesome.ts4
-rw-r--r--viewer/src/views/PanelLeft.vue2
-rw-r--r--viewer/src/views/PanelTop.vue2
7 files changed, 34 insertions, 18 deletions
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 3cfa1a5..b418911 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -32,6 +32,9 @@
32.nowrap { 32.nowrap {
33 white-space: nowrap; 33 white-space: nowrap;
34} 34}
35.no-scroll-x {
36 overflow-x: hidden;
37}
35 38
36.flex { 39.flex {
37 display: flex; 40 display: flex;
@@ -50,7 +53,7 @@
50 color: $link; 53 color: $link;
51 cursor: pointer; 54 cursor: pointer;
52 text-decoration: none; 55 text-decoration: none;
53 & :hover { 56 &:hover {
54 color: $link-hover; 57 color: $link-hover;
55 } 58 }
56} 59}
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 2314ee8..d3aac99 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -32,3 +32,5 @@ $loader-color: #272727;
32$link: $panel-top-txtcolor; 32$link: $panel-top-txtcolor;
33$link-hover: lightblue; 33$link-hover: lightblue;
34$disabled-color: rgba($link, 0.3); 34$disabled-color: rgba($link, 0.3);
35$control-radius: 0;
36$input-radius: 0;
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"
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index c17d4a1..bf2ff5f 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -30,7 +30,7 @@ import {
30 faImage, 30 faImage,
31 faHome, 31 faHome,
32 faArrowLeft, 32 faArrowLeft,
33 faFilter, 33 faTags,
34 faAngleRight, 34 faAngleRight,
35} from "@fortawesome/free-solid-svg-icons"; 35} from "@fortawesome/free-solid-svg-icons";
36 36
@@ -43,7 +43,7 @@ library.add(
43 faImage, 43 faImage,
44 faHome, 44 faHome,
45 faArrowLeft, 45 faArrowLeft,
46 faFilter, 46 faTags,
47 faAngleRight, 47 faAngleRight,
48); 48);
49 49
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 35c092a..ea35664 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -24,7 +24,7 @@
24 <h1>{{$t('panelLeft.filters')}}</h1> 24 <h1>{{$t('panelLeft.filters')}}</h1>
25 <ld-tag-input /> 25 <ld-tag-input />
26 <h1>{{$t('panelLeft.propositions')}}</h1> 26 <h1>{{$t('panelLeft.propositions')}}</h1>
27 <ld-proposition class="scrollbar" /> 27 <ld-proposition class="scrollbar no-scroll-x" />
28 </div> 28 </div>
29</template> 29</template>
30 30
diff --git a/viewer/src/views/PanelTop.vue b/viewer/src/views/PanelTop.vue
index 7e24699..e7421f0 100644
--- a/viewer/src/views/PanelTop.vue
+++ b/viewer/src/views/PanelTop.vue
@@ -20,7 +20,7 @@
20<template> 20<template>
21 <div class="flex"> 21 <div class="flex">
22 <div class="command-btns"> 22 <div class="command-btns">
23 <fa-icon icon="filter" size="lg" class="disabled" /> 23 <fa-icon icon="tags" size="lg" class="disabled" />
24 <router-link to="/" :class="{disabled: $galleryStore.currentItemPath.length <= 1}"> 24 <router-link to="/" :class="{disabled: $galleryStore.currentItemPath.length <= 1}">
25 <fa-icon icon="home" size="lg" /> 25 <fa-icon icon="home" size="lg" />
26 </router-link> 26 </router-link>