Merge pull request #65 from pacien/oz-viewer

viewer improvements

3 files changed, 78 insertions, 18 deletions

diff --git a/viewer/src/components/LdKeyPress.vue b/viewer/src/components/LdKeyPress.vue
new file mode 100644
index 0000000..8276607
--- /dev/null
+++ b/viewer/src/components/LdKeyPress.vue
@@ -0,0 +1,49 @@
+<!-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from "vue-property-decorator";
+
+@Component
+export default class LdKeyPress extends Vue {
+  @Prop({ type: Number, required: true }) readonly keycode!: number;
+  @Prop({ type: String, default: "keyup" }) readonly event!: "keyup" | "keydown" | "keypress";
+
+  mounted() {
+    window.addEventListener(this.event, this.onEvent);
+  }
+
+  destroyed() {
+    window.removeEventListener(this.event, this.onEvent);
+  }
+
+  render() {
+    return null;
+  }
+
+  private onEvent(e: KeyboardEvent) {
+    if (e.keyCode === this.keycode) this.action(e);
+  }
+
+  @Emit()
+  private action(e: KeyboardEvent) {
+    return e;
+  }
+}
+</script>
\ No newline at end of file
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 9a32e0a..02f7fe4 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -20,11 +20,17 @@
 <template>
   <div>
     <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
-      <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" />
-      <span
+      <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>
@@ -51,13 +57,12 @@ export default class LdTagInput extends Vue {
         .forEach(rawTag => (propositions[rawTag] = (propositions[rawTag] ?? 0) + 1));
     } else {
       // Tags count from the whole gallery
-      Object.entries(this.$galleryStore.tags)
-        .forEach(entry => (propositions[entry[0]] = entry[1].items.length));
+      Object.entries(this.$galleryStore.tags).forEach(entry => (propositions[entry[0]] = entry[1].items.length));
     }
-    
+
     return Object.entries(propositions)
-      .sort((a,b) => b[1] - a[1])
-      .map(entry => ({rawTag: entry[0], count: entry[1]}));
+      .sort((a, b) => b[1] - a[1])
+      .map(entry => ({ rawTag: entry[0], count: entry[1] }));
   }
 
   extractDistinctItems(currentTags: Tag.Search[]): Gallery.Item[] {
@@ -73,21 +78,28 @@ 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>
 
 <style lang="scss">
+@import "@/assets/scss/theme.scss";
+
 .proposition {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin: 10px;
-  color: lightcyan;
-  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"