aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorOzoneGrif2020-02-10 14:48:28 +0100
committerGitHub2020-02-10 14:48:28 +0100
commite561958ba30d88cb5a3413f3076e12a05d41a006 (patch)
tree38e9e506487b0cae5d94a2f961fb4d1c6a637405
parenta52b1b59b82c7f77e4bbb28cf64fe82ab2fd4e17 (diff)
parent9545573e5e7c01a85e9b4040d94b1fb745d09e52 (diff)
downloadldgallery-e561958ba30d88cb5a3413f3076e12a05d41a006.tar.gz
Merge pull request #109 from pacien/feature-secondary-command-buttons
viewer: secondary command buttons
-rw-r--r--viewer/src/assets/scss/global.scss1
-rw-r--r--viewer/src/components/LdCommand.vue47
-rw-r--r--viewer/src/locales/en.json8
-rw-r--r--viewer/src/plugins/fontawesome.ts6
4 files changed, 39 insertions, 23 deletions
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 @@
60 60
61.disabled { 61.disabled {
62 color: $disabled-color !important; 62 color: $disabled-color !important;
63 cursor: initial;
63} 64}
64 65
65// === Scrollbar styling 66// === Scrollbar styling
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 54b602c..7590ea7 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -2,6 +2,7 @@
2-- pictures into a searchable web gallery. 2-- pictures into a searchable web gallery.
3-- 3--
4-- Copyright (C) 2019-2020 Guillaume FOUET 4-- Copyright (C) 2019-2020 Guillaume FOUET
5-- 2020 Pacien TRAN-GIRARD
5-- 6--
6-- This program is free software: you can redistribute it and/or modify 7-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as 8-- it under the terms of the GNU Affero General Public License as
@@ -19,16 +20,21 @@
19 20
20<template> 21<template>
21 <div class="flex command-btns"> 22 <div class="flex command-btns">
22 <div class="link" :title="$t('title.tags')" @click="$uiStore.toggleFullWidth()"> 23 <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
23 <fa-icon :icon="commandTagsIcon()" size="lg" /> 24 <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" />
24 </div> 25 </a>
25 <router-link to="/" :class="{'disabled': isRoot()}" :title="$t('title.home')"> 26 <router-link
27 to="/"
28 class="command-secondary"
29 :class="{'disabled': isRoot()}"
30 :title="$t('command.home')"
31 >
26 <fa-icon icon="home" size="lg" /> 32 <fa-icon icon="home" size="lg" />
27 </router-link> 33 </router-link>
28 <div class="link" :title="$t('title.back')" @click="$router.go(-1)"> 34 <a class="link command-secondary" :title="$t('command.back')" @click="$router.go(-1)">
29 <fa-icon icon="arrow-left" size="lg" /> 35 <fa-icon icon="arrow-left" size="lg" />
30 </div> 36 </a>
31 <router-link :class="{'disabled': isRoot()}" :title="$t('title.parent')" :to="parent()"> 37 <router-link :class="{'disabled': isRoot()}" :title="$t('command.parent')" :to="parent()">
32 <fa-icon icon="folder" size="xs" /> 38 <fa-icon icon="folder" size="xs" />
33 <fa-icon icon="level-up-alt" size="lg" /> 39 <fa-icon icon="level-up-alt" size="lg" />
34 </router-link> 40 </router-link>
@@ -41,8 +47,8 @@ import { RawLocation } from "vue-router";
41 47
42@Component 48@Component
43export default class LdCommand extends Vue { 49export default class LdCommand extends Vue {
44 commandTagsIcon(): string { 50 commandToggleSearchPanelIcon(): string {
45 return this.$uiStore.fullWidth ? "tags" : "window-close"; 51 return this.$uiStore.fullWidth ? "search" : "angle-double-left";
46 } 52 }
47 53
48 isRoot(): boolean { 54 isRoot(): boolean {
@@ -57,6 +63,7 @@ export default class LdCommand extends Vue {
57</script> 63</script>
58 64
59<style lang="scss"> 65<style lang="scss">
66@import "@/assets/scss/_buefy_variables.scss";
60@import "@/assets/scss/theme.scss"; 67@import "@/assets/scss/theme.scss";
61 68
62.command-btns { 69.command-btns {
@@ -64,12 +71,22 @@ export default class LdCommand extends Vue {
64 justify-content: space-around; 71 justify-content: space-around;
65 vertical-align: middle; 72 vertical-align: middle;
66 align-items: center; 73 align-items: center;
67 width: $layout-left; 74 flex: 0 0 $layout-left;
68 > * { 75
69 // Unify the minor size differences between icons 76 > a {
70 width: 26px; 77 // normalise icon active boxes
71 height: 26px; 78 width: $layout-top;
72 margin-top: 2px; 79 line-height: $layout-top;
80 text-align: center;
81 vertical-align: middle;
82 }
83
84 @media only screen and (max-width: $tablet) {
85 flex: 0 1;
86
87 > .command-secondary {
88 display: none;
89 }
73 } 90 }
74} 91}
75</style> 92</style>
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 453fc5f..dcdf5c5 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -12,8 +12,8 @@
12 "tag-propositions.intersection": "Search for this tag", 12 "tag-propositions.intersection": "Search for this tag",
13 "tag-propositions.item-count": "Item count", 13 "tag-propositions.item-count": "Item count",
14 "gallery.unknowntype": "Unknown item type", 14 "gallery.unknowntype": "Unknown item type",
15 "title.tags": "Tags", 15 "command.search": "Open search panel",
16 "title.home": "Home", 16 "command.home": "Go to gallery home",
17 "title.back": "Back", 17 "command.back": "Go back",
18 "title.parent": "Parent" 18 "command.parent": "Go to parent directory"
19} 19}
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 {
30 faHome, 30 faHome,
31 faArrowLeft, 31 faArrowLeft,
32 faLevelUpAlt, 32 faLevelUpAlt,
33 faTags,
34 faAngleRight, 33 faAngleRight,
35 faWindowClose, 34 faAngleDoubleLeft,
36 faFile, 35 faFile,
37} from "@fortawesome/free-solid-svg-icons"; 36} from "@fortawesome/free-solid-svg-icons";
38 37
@@ -45,9 +44,8 @@ library.add(
45 faHome, 44 faHome,
46 faArrowLeft, 45 faArrowLeft,
47 faLevelUpAlt, 46 faLevelUpAlt,
48 faTags,
49 faAngleRight, 47 faAngleRight,
50 faWindowClose, 48 faAngleDoubleLeft,
51 faFile, 49 faFile,
52); 50);
53 51