aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/PanelLeft.vue
diff options
context:
space:
mode:
authorpacien2020-09-25 16:01:49 +0200
committerpacien2020-09-25 16:01:49 +0200
commite93f7b1eb84c083d67567115284c0002a3a7d5fc (patch)
tree8d373e8f7f571485e1330928f43b090ed004c525 /viewer/src/views/PanelLeft.vue
parent8e3ac8fe44bebb38e1882ca7f06b8100078ad88d (diff)
parentfd542f75a1d94ee5f804d0925823276b97f38581 (diff)
downloadldgallery-e93f7b1eb84c083d67567115284c0002a3a7d5fc.tar.gz
Merge branch 'develop' for release v2.0v2.0
Diffstat (limited to 'viewer/src/views/PanelLeft.vue')
-rw-r--r--viewer/src/views/PanelLeft.vue34
1 files changed, 26 insertions, 8 deletions
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index e3821a8..0ab3aa8 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -18,25 +18,32 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="flex-column sidebar"> 21 <div class="flex-column" :class="$style.sidebar">
22 <ld-tag-input 22 <ld-tag-input
23 :search-filters.sync="searchFilters" 23 :search-filters.sync="searchFilters"
24 :tags-index="$galleryStore.tagsIndex" 24 :tags-index="$galleryStore.tagsIndex"
25 @onkeyenter-empty="search" 25 @onkeyenter-empty="search"
26 /> 26 />
27 <ld-command-search @clear="clear" @search="search" /> 27 <ld-command-search @clear="clear" @search="search" />
28 <h1 class="title">{{$t('panelLeft.propositions')}}</h1> 28 <h1 class="title">{{ $t("panelLeft.propositions") }}</h1>
29 <div class="scrollbar no-scroll-x"> 29 <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrinkFully">
30 <ld-proposition 30 <ld-proposition
31 v-for="(category) in $galleryStore.tagsCategories" 31 v-for="category in $galleryStore.tagsCategories"
32 :key="category.tag" 32 :key="category.tag"
33 :category="$galleryStore.tagsIndex[category.tag]" 33 :category="$galleryStore.tagsIndex[category.tag]"
34 :show-category="$galleryStore.tagsCategories.length > 1" 34 :show-category="$galleryStore.tagsCategories.length > 1"
35 :search-filters.sync="searchFilters" 35 :search-filters.sync="searchFilters"
36 :tags-index="category.index" 36 :tags-index="category.index"
37 :current-tags="currentTags()" 37 :current-tags="currentTags"
38 /> 38 />
39 </div> 39 </div>
40 <h1 class="flex title" @click="infoOpen = !infoOpen">
41 {{ $t("panelLeft.information.title") }}
42 <fa-icon :icon="infoOpen ? 'caret-down' : 'caret-up'" />
43 </h1>
44 <transition name="flex-expand">
45 <ld-information v-show="infoOpen" :item="$galleryStore.currentItem" class="scrollbar no-scroll-x" />
46 </transition>
40 </div> 47 </div>
41</template> 48</template>
42 49
@@ -49,6 +56,7 @@ import IndexFactory from "@/services/indexfactory";
49@Component 56@Component
50export default class PanelLeft extends Vue { 57export default class PanelLeft extends Vue {
51 searchFilters: Tag.Search[] = []; 58 searchFilters: Tag.Search[] = [];
59 infoOpen: boolean = true;
52 60
53 mounted() { 61 mounted() {
54 this.restoreSearchFilters(this.$route); 62 this.restoreSearchFilters(this.$route);
@@ -72,7 +80,7 @@ export default class PanelLeft extends Vue {
72 return query; 80 return query;
73 } 81 }
74 82
75 currentTags() { 83 get currentTags() {
76 return this.$galleryStore.currentItem?.tags ?? []; 84 return this.$galleryStore.currentItem?.tags ?? [];
77 } 85 }
78 86
@@ -84,15 +92,25 @@ export default class PanelLeft extends Vue {
84} 92}
85</script> 93</script>
86 94
87<style lang="scss"> 95<style lang="scss" module>
88@import "~@/assets/scss/theme.scss"; 96@import "~@/assets/scss/theme.scss";
89 97
90.sidebar { 98.sidebar {
91 .title { 99 :global(.title) {
92 background-color: $proposed-category-bgcolor; 100 background-color: $proposed-category-bgcolor;
93 padding: 0.2em 0.5em; 101 padding: 0.2em 0.5em;
94 margin: 0 0 1px 0; 102 margin: 0 0 1px 0;
95 font-variant: small-caps; 103 font-variant: small-caps;
104 justify-content: space-between;
105 user-select: none;
106 > svg {
107 color: $link;
108 margin-top: 2px; // Fixes a vertical centering issue with the carret
109 }
96 } 110 }
97} 111}
112
113.flexShrinkFully {
114 flex-shrink: 1000;
115}
98</style> 116</style>