From b8160585c4ea0037772c6a35c45b58d48621cd4d Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:09:36 +0100
Subject: viewer: ldcommand: fix keyboard navigation

By using proper semantics, using 'a' instead of 'div' to allow keyboard selection
---
 viewer/src/components/LdCommand.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8c6ccfc..841d773 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -19,15 +19,15 @@
 
 <template>
   <div class="flex command-btns">
-    <div class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
+    <a class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandTagsIcon()" size="lg" />
-    </div>
+    </a>
     <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')">
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <div class="link" :title="$t('title.back')" @click="$router.go(-1)">
+    <a class="link" :title="$t('title.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
-    </div>
+    </a>
     <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
       <fa-icon icon="folder" size="xs" />
       <fa-icon icon="level-up-alt" size="lg" />
-- 
cgit v1.2.3


From 77fed5958776dd9d6f7eaa371e904aeb4fd810d5 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:12:18 +0100
Subject: viewer: global css: fix cursor on disabled links

---
 viewer/src/assets/scss/global.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 4acaf13..dda722b 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -60,6 +60,7 @@
 
 .disabled {
   color: $disabled-color !important;
+  cursor: initial;
 }
 
 // === Scrollbar styling
-- 
cgit v1.2.3


From 4cae756b5c2a3544675eb5eb011b9a90e003ae6b Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:13:22 +0100
Subject: viewer: ldcommand: fix command buttons active boxes

Properly centering icons in their boxes instead of having them sitting in a corner.
---
 viewer/src/components/LdCommand.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 841d773..8257c1f 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -2,6 +2,7 @@
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
+--               2020       Pacien TRAN-GIRARD
 --
 -- This program is free software: you can redistribute it and/or modify
 -- it under the terms of the GNU Affero General Public License as
@@ -63,12 +64,14 @@ export default class LdCommand extends Vue {
   justify-content: space-around;
   vertical-align: middle;
   align-items: center;
-  width: $layout-left;
+  flex: 0 0 $layout-left;
+
   > * {
-    // Unify the minor size differences between icons
-    width: 26px;
-    height: 26px;
-    margin-top: 2px;
+    // normalise icon active boxes
+    width: $layout-top;
+    line-height: $layout-top;
+    text-align: center;
+    vertical-align: middle;
   }
 }
 </style>
-- 
cgit v1.2.3


From a286e822c37a17efc80e99b13d5cc02fef4ee138 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:15:50 +0100
Subject: viewer: ldcommand: reduce command bar on mobile

Hiding secondary buttons and allowing the bar to collapse.

GitHub: closes #100
---
 viewer/src/components/LdCommand.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8257c1f..eeab89f 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,10 +23,10 @@
     <a class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandTagsIcon()" size="lg" />
     </a>
-    <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')">
+    <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('title.home')">
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <a class="link" :title="$t('title.back')" @click="$router.go(-1)">
+    <a class="link command-secondary" :title="$t('title.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
     </a>
     <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
@@ -58,6 +58,7 @@ export default class LdCommand extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/_buefy_variables.scss";
 @import "@/assets/scss/theme.scss";
 
 .command-btns {
@@ -73,5 +74,13 @@ export default class LdCommand extends Vue {
     text-align: center;
     vertical-align: middle;
   }
+
+  @media only screen and (max-width: $tablet) {
+    flex: 0 1;
+
+    > .command-secondary {
+      display: none;
+    }
+  }
 }
 </style>
-- 
cgit v1.2.3


From 1942eb9e6d323aca512e53732179c823139dd9a1 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sat, 8 Feb 2020 18:20:50 +0100
Subject: viewer: ldcommand: clarify command button actions

By using more explicit icons and tooltip.
---
 viewer/src/components/LdCommand.vue | 14 +++++++-------
 viewer/src/locales/en.json          | 10 +++++-----
 viewer/src/plugins/fontawesome.ts   |  6 ++----
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index eeab89f..5953eac 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -20,16 +20,16 @@
 
 <template>
   <div class="flex command-btns">
-    <a class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()">
-      <fa-icon :icon="commandTagsIcon()" size="lg" />
+    <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
+      <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
     </a>
-    <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('title.home')">
+    <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('command.home')">
       <fa-icon icon="home" size="lg" />
     </router-link>
-    <a class="link command-secondary" :title="$t('title.back')" @click="$router.go(-1)">
+    <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
       <fa-icon icon="arrow-left" size="lg" />
     </a>
-    <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()">
+    <router-link :class="{'disabled': isRoot()}" :title="$t('command.parent')" :to="parent()">
       <fa-icon icon="folder" size="xs" />
       <fa-icon icon="level-up-alt" size="lg" />
     </router-link>
@@ -42,8 +42,8 @@ import { RawLocation } from "vue-router";
 
 @Component
 export default class LdCommand extends Vue {
-  commandTagsIcon(): string {
-    return this.$uiStore.fullWidth ? "tags" : "window-close";
+  commandToggleSearchPanelIcon(): string {
+    return this.$uiStore.fullWidth ? "search" : "angle-double-left";
   }
 
   isRoot(): boolean {
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 987d4d1..966bc86 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -8,8 +8,8 @@
   "search.no-results": "No results",
   "panelLeft.propositions": "Proposed tags",
   "gallery.unknowntype": "Unknown item type",
-  "title.tags": "Tags",
-  "title.home": "Home",
-  "title.back": "Back",
-  "title.parent": "Parent"
-}
\ No newline at end of file
+  "command.search": "Open search panel",
+  "command.home": "Go to gallery home",
+  "command.back": "Go back",
+  "command.parent": "Go to parent directory"
+}
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index d70746d..e8848f9 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -30,9 +30,8 @@ import {
     faHome,
     faArrowLeft,
     faLevelUpAlt,
-    faTags,
     faAngleRight,
-    faWindowClose,
+    faAngleDoubleLeft,
     faFile,
 } from "@fortawesome/free-solid-svg-icons";
 
@@ -45,9 +44,8 @@ library.add(
     faHome,
     faArrowLeft,
     faLevelUpAlt,
-    faTags,
     faAngleRight,
-    faWindowClose,
+    faAngleDoubleLeft,
     faFile,
 );
 
-- 
cgit v1.2.3


From c158f21dfc2411cd8d6cbd36a9b0e90ff5265597 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Mon, 10 Feb 2020 14:39:19 +0100
Subject: viewer: formatting and > a instead of > * in the CSS (the star
 selector is to be avoided if possible, it's slow and dangerous)

---
 viewer/src/components/LdCommand.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 5953eac..5b9bbff 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -23,7 +23,12 @@
     <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
     </a>
-    <router-link to="/" class="command-secondary" :class="{'disabled': isRoot()}" :title="$t('command.home')">
+    <router-link
+      to="/"
+      class="command-secondary"
+      :class="{'disabled': isRoot()}"
+      :title="$t('command.home')"
+    >
       <fa-icon icon="home" size="lg" />
     </router-link>
     <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
@@ -67,7 +72,7 @@ export default class LdCommand extends Vue {
   align-items: center;
   flex: 0 0 $layout-left;
 
-  > * {
+  > a {
     // normalise icon active boxes
     width: $layout-top;
     line-height: $layout-top;
-- 
cgit v1.2.3