From 234d0d13c767786393494810526a77d3d89b0e83 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 30 Jan 2020 17:01:56 +0100
Subject: viewer: global keypress componant. ESC gets out of fullscreen.

---
 viewer/src/components/LdKeyPress.vue | 49 ++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 viewer/src/components/LdKeyPress.vue

(limited to 'viewer/src/components')

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
-- 
cgit v1.2.3


From 42105af46681d81959a5d5a9a16ec9e98463a92e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 30 Jan 2020 21:24:15 +0100
Subject: viewer: new breadcrumb. navigation buttons. and styling improvements

---
 viewer/src/components/LdProposition.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 9a32e0a..f653e4d 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,7 +19,7 @@
 
 <template>
   <div>
-    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
+    <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition link">
       <fa-icon icon="minus" @click="add(Operation.SUBSTRACTION, proposed.rawTag)" />
       <span
         @click="add(Operation.INTERSECTION, proposed.rawTag)"
@@ -51,13 +51,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[] {
@@ -79,12 +78,13 @@ export default class LdTagInput extends Vue {
 </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 {
-- 
cgit v1.2.3


From 17b1598c5a5a375e6eaa0763767368c05ba0f56e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 30 Jan 2020 22:58:27 +0100
Subject: viewer: Improved the proposition layout

---
 viewer/src/components/LdProposition.vue | 36 ++++++++++++++++++++++-----------
 viewer/src/components/LdTagInput.vue    |  1 -
 2 files changed, 24 insertions(+), 13 deletions(-)

(limited to 'viewer/src/components')

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"
-- 
cgit v1.2.3