aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdBreadcrumb.vue1
-rw-r--r--viewer/src/components/LdCommand.vue48
-rw-r--r--viewer/src/components/LdProposition.vue30
3 files changed, 54 insertions, 25 deletions
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 171e96a..ebefc50 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -45,7 +45,6 @@ export default class LdBreadcrumb extends Vue {
45@import "@/assets/scss/theme.scss"; 45@import "@/assets/scss/theme.scss";
46 46
47.ld-breadcrumb { 47.ld-breadcrumb {
48 border-left: 1px solid $disabled-color;
49 padding-left: 15px; 48 padding-left: 15px;
50 display: flex; 49 display: flex;
51 list-style: none; 50 list-style: none;
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 8c6ccfc..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,18 +63,30 @@ 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 {
70 background-color: $command-buttons-bgcolor;
63 justify-content: space-around; 71 justify-content: space-around;
64 vertical-align: middle; 72 vertical-align: middle;
65 align-items: center; 73 align-items: center;
66 width: $layout-left; 74 flex: 0 0 $layout-left;
67 > * { 75
68 // Unify the minor size differences between icons 76 > a {
69 width: 26px; 77 // normalise icon active boxes
70 height: 26px; 78 width: $layout-top;
71 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 }
72 } 90 }
73} 91}
74</style> 92</style>
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 0a293a9..395611f 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.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
@@ -20,17 +21,28 @@
20<template> 21<template>
21 <div> 22 <div>
22 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition"> 23 <div v-for="proposed in proposedTags" :key="proposed.rawTag" class="proposition">
23 <div class="operation-btns link" @click="add(Operation.SUBSTRACTION, proposed.rawTag)"> 24 <a
24 <fa-icon icon="minus" /> 25 class="operation-btns link"
25 </div> 26 :title="$t('tag-propositions.substraction')"
26 <div class="operation-btns link" @click="add(Operation.ADDITION, proposed.rawTag)"> 27 @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
27 <fa-icon icon="plus" /> 28 ><fa-icon icon="minus" alt="[-]" /></a>
28 </div> 29
29 <div 30 <a
31 class="operation-btns link"
32 :title="$t('tag-propositions.addition')"
33 @click="add(Operation.ADDITION, proposed.rawTag)"
34 ><fa-icon icon="plus" alt="[+]" /></a>
35
36 <a
30 class="operation-tag link" 37 class="operation-tag link"
38 :title="$t('tag-propositions.intersection')"
31 @click="add(Operation.INTERSECTION, proposed.rawTag)" 39 @click="add(Operation.INTERSECTION, proposed.rawTag)"
32 >{{proposed.rawTag}}</div> 40 >{{proposed.rawTag}}</a>
33 <div class="disabled">x{{proposed.count}}</div> 41
42 <div
43 class="disabled"
44 :title="$t('tag-propositions.item-count')"
45 >{{proposed.count}}</div>
34 </div> 46 </div>
35 </div> 47 </div>
36</template> 48</template>