viewer: Improved the proposition layout

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 @@
 .nowrap {
   white-space: nowrap;
 }
+.no-scroll-x {
+  overflow-x: hidden;
+}
 
 .flex {
   display: flex;
@@ -50,7 +53,7 @@
   color: $link;
   cursor: pointer;
   text-decoration: none;
-  & :hover {
+  &:hover {
     color: $link-hover;
   }
 }
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;
 $link: $panel-top-txtcolor;
 $link-hover: lightblue;
 $disabled-color: rgba($link, 0.3);
+$control-radius: 0;
+$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 @@
 
 <template>
   <div>
-    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition link">
-      <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" />
-      <span
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
+      <div class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)">
+        <fa-icon icon="minus" />
+      </div>
+      <div class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)">
+        <fa-icon icon="plus" />
+      </div>
+      <div
+        class="operation-tag link"
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
-      >{{proposed.rawTag}}&nbsp;x{{proposed.count}}</span>
-      <fa-icon icon="plus" @click="add(Operation.ADDITION, proposed.rawTag)" />
+      >{{proposed.rawTag}}</div>
+      <div class="disabled">x{{proposed.count}}</div>
     </div>
   </div>
 </template>
@@ -72,7 +78,7 @@ export default class LdTagInput extends Vue {
     const node = this.$galleryStore.tags[rawTag];
     const search: Tag.Search = { ...node, operation, display: `${operation}${node.tag}` };
     this.$uiStore.currentTags.push(search);
-    this.$uiStore.mode = "search";
+    setTimeout(() => this.$uiStore.setModeSearch()); // Give time for the UI to display the Tag change
   }
 }
 </script>
@@ -82,12 +88,18 @@ export default class LdTagInput extends Vue {
 
 .proposition {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin: 10px;
-  cursor: pointer;
-}
-.proposition span {
-  padding: 0 10px;
+  padding-right: 7px;
+  .operation-tag {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex-grow: 1;
+    cursor: pointer;
+  }
+  .operation-btns {
+    padding: 2px 7px;
+    cursor: pointer;
+  }
 }
 </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 @@
     :data="filteredTags"
     field="display"
     type="is-black"
-    icon="tag"
     size="is-medium"
     class="panelTagInput"
     @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 {
     faImage,
     faHome,
     faArrowLeft,
-    faFilter,
+    faTags,
     faAngleRight,
 } from "@fortawesome/free-solid-svg-icons";
 
@@ -43,7 +43,7 @@ library.add(
     faImage,
     faHome,
     faArrowLeft,
-    faFilter,
+    faTags,
     faAngleRight,
 );
 
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 @@
     <h1>{{$t('panelLeft.filters')}}</h1>
     <ld-tag-input />
     <h1>{{$t('panelLeft.propositions')}}</h1>
-    <ld-proposition class="scrollbar" />
+    <ld-proposition class="scrollbar no-scroll-x" />
   </div>
 </template>
 
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 @@
 <template>
   <div class="flex">
     <div class="command-btns">
-      <fa-icon icon="filter" size="lg" class="disabled" />
+      <fa-icon icon="tags" size="lg" class="disabled" />
       <router-link to="/" :class="{disabled: $galleryStore.currentItemPath.length <= 1}">
         <fa-icon icon="home" size="lg" />
       </router-link>