diff options
Diffstat (limited to 'viewer/src/views/PanelLeft.vue')
-rw-r--r-- | viewer/src/views/PanelLeft.vue | 120 |
1 files changed, 0 insertions, 120 deletions
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue deleted file mode 100644 index ea61865..0000000 --- a/viewer/src/views/PanelLeft.vue +++ /dev/null | |||
@@ -1,120 +0,0 @@ | |||
1 | <!-- ldgallery - A static generator which turns a collection of tagged | ||
2 | -- pictures into a searchable web gallery. | ||
3 | -- | ||
4 | -- Copyright (C) 2019-2020 Guillaume FOUET | ||
5 | -- | ||
6 | -- 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 | -- published by the Free Software Foundation, either version 3 of the | ||
9 | -- License, or (at your option) any later version. | ||
10 | -- | ||
11 | -- This program is distributed in the hope that it will be useful, | ||
12 | -- but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
13 | -- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
14 | -- GNU Affero General Public License for more details. | ||
15 | -- | ||
16 | -- You should have received a copy of the GNU Affero General Public License | ||
17 | -- along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
18 | --> | ||
19 | |||
20 | <template> | ||
21 | <div class="flex-column" :class="$style.sidebar"> | ||
22 | <ld-tag-input | ||
23 | :search-filters.sync="searchFilters" | ||
24 | :tags-index="$galleryStore.tagsIndex" | ||
25 | @onkeyenter-empty="search" | ||
26 | /> | ||
27 | <ld-command-search @clear="clear" @search="search" /> | ||
28 | <h1 class="title">{{ $t("panelLeft.propositions") }}</h1> | ||
29 | <div class="scrollbar no-scroll-x flex-grow-1" :class="$style.flexShrinkFully"> | ||
30 | <ld-proposition | ||
31 | v-for="category in $galleryStore.tagsCategories" | ||
32 | :key="category.tag" | ||
33 | :category="$galleryStore.tagsIndex[category.tag]" | ||
34 | :show-category="$galleryStore.tagsCategories.length > 1" | ||
35 | :search-filters.sync="searchFilters" | ||
36 | :tags-index="category.index" | ||
37 | :current-tags="currentTags" | ||
38 | /> | ||
39 | </div> | ||
40 | <h1 :class="$style.infoPanelTitleBar" 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> | ||
47 | </div> | ||
48 | </template> | ||
49 | |||
50 | <script lang="ts"> | ||
51 | import { TagSearch } from "@/@types/tag"; | ||
52 | import Navigation from "@/services/navigation"; | ||
53 | import { Component, Vue, Watch } from "vue-property-decorator"; | ||
54 | import { Dictionary, Route } from "vue-router/types/router"; | ||
55 | |||
56 | @Component | ||
57 | export default class PanelLeft extends Vue { | ||
58 | searchFilters: TagSearch[] = []; | ||
59 | infoOpen: boolean = true; | ||
60 | |||
61 | mounted() { | ||
62 | this.restoreSearchFilters(this.$route); | ||
63 | } | ||
64 | |||
65 | clear() { | ||
66 | this.searchFilters = []; | ||
67 | this.search(); | ||
68 | } | ||
69 | |||
70 | search() { | ||
71 | const lastDirectory = Navigation.getLastDirectory(this.$galleryStore.currentItemPath); | ||
72 | this.$router.push({ path: lastDirectory.path, query: this.serializeSearch() }).catch(err => { | ||
73 | if (err.name !== "NavigationDuplicated") throw err; | ||
74 | }); | ||
75 | } | ||
76 | |||
77 | serializeSearch() { | ||
78 | let query: Dictionary<null> = {}; | ||
79 | this.searchFilters.forEach(filter => (query[filter.display] = null)); | ||
80 | return query; | ||
81 | } | ||
82 | |||
83 | get currentTags() { | ||
84 | return this.$galleryStore.currentItem?.tags ?? []; | ||
85 | } | ||
86 | |||
87 | @Watch("$route") | ||
88 | restoreSearchFilters(route: Route) { | ||
89 | const query = Object.keys(route.query); | ||
90 | if (query.length > 0) this.$galleryStore.search(query).then(search => (this.searchFilters = [...search])); | ||
91 | } | ||
92 | } | ||
93 | </script> | ||
94 | |||
95 | <style lang="scss" module> | ||
96 | @import "~@/assets/scss/theme.scss"; | ||
97 | |||
98 | .sidebar { | ||
99 | :global(.title) { | ||
100 | background-color: $proposed-category-bgcolor; | ||
101 | padding: 0.2em 0.5em; | ||
102 | margin: 0 0 1px 0; | ||
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 | } | ||
110 | } | ||
111 | |||
112 | .infoPanelTitleBar { | ||
113 | cursor: pointer; | ||
114 | } | ||
115 | } | ||
116 | |||
117 | .flexShrinkFully { | ||
118 | flex-shrink: 1000; | ||
119 | } | ||
120 | </style> | ||