aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/layout/left
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views/layout/left')
-rw-r--r--viewer/src/views/layout/left/LayoutCommandSearch.vue64
-rw-r--r--viewer/src/views/layout/left/LayoutInformation.vue99
-rw-r--r--viewer/src/views/layout/left/LayoutLeft.vue158
-rw-r--r--viewer/src/views/layout/left/LayoutProposition.vue208
-rw-r--r--viewer/src/views/layout/left/LayoutTagInput.vue141
-rw-r--r--viewer/src/views/layout/left/LayoutTagList.vue74
6 files changed, 744 insertions, 0 deletions
diff --git a/viewer/src/views/layout/left/LayoutCommandSearch.vue b/viewer/src/views/layout/left/LayoutCommandSearch.vue
new file mode 100644
index 0000000..ab31a84
--- /dev/null
+++ b/viewer/src/views/layout/left/LayoutCommandSearch.vue
@@ -0,0 +1,64 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 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
22 class="flex"
23 :class="[$style.commands, $style.webkitFlexShrinkFix]"
24 >
25 <button
26 tabindex="60"
27 @click="emit('clear')"
28 >
29 <fa-icon :icon="faEraser" />
30 <span>{{ t("command.search.clear") }}</span>
31 </button>
32 <button
33 tabindex="61"
34 class="flex-grow-1"
35 @click="emit('search')"
36 >
37 <fa-icon :icon="faSearch" />
38 <span>{{ t("command.search.search") }}</span>
39 </button>
40 </div>
41</template>
42
43<script setup lang="ts">
44import { faEraser, faSearch } from '@fortawesome/free-solid-svg-icons';
45import { useI18n } from 'vue-i18n';
46
47const emit = defineEmits(['clear', 'search']);
48
49const { t } = useI18n();
50</script>
51
52<style lang="scss" module>
53// fix flexbox shrinking and overlap in old webkit versions
54// https://github.com/pacien/ldgallery/issues/183
55.webkitFlexShrinkFix {
56 flex: none;
57}
58
59.commands {
60 span {
61 margin-left: 0.5rem;
62 }
63}
64</style>
diff --git a/viewer/src/views/layout/left/LayoutInformation.vue b/viewer/src/views/layout/left/LayoutInformation.vue
new file mode 100644
index 0000000..780a458
--- /dev/null
+++ b/viewer/src/views/layout/left/LayoutInformation.vue
@@ -0,0 +1,99 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 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
22 v-if="item"
23 class="flex-column"
24 :class="$style.infopanel"
25 >
26 <div
27 v-if="item.title"
28 :class="$style.title"
29 >
30 {{ item.title }}
31 </div>
32 <time
33 v-if="item.datetime"
34 :datetime="item.datetime"
35 :class="$style.datetime"
36 >
37 {{ formatDate }}
38 </time>
39 <LdMarkdown
40 v-if="item.description"
41 :class="$style.description"
42 :markdown="item.description"
43 />
44 </div>
45</template>
46
47<script setup lang="ts">
48import { Item } from '@/@types/gallery';
49import { LdMarkdown } from '@/components/async';
50import { computed, PropType } from 'vue';
51
52const props = defineProps({
53 item: { type: Object as PropType<Item>, required: true },
54});
55
56const formatDate = computed(() => {
57 const { datetime } = props.item;
58 const date = datetime.substring(0, 10);
59 const time = datetime.substring(11, 16);
60 return `${date} ${time}`;
61});
62</script>
63
64<style lang="scss" module>
65@import "~@/assets/scss/theme";
66
67.infopanel {
68 padding: 2px 2px 7px 7px;
69 overflow-wrap: break-word;
70
71 .title {
72 font-weight: bold;
73 }
74 .datetime {
75 font-size: 0.9em;
76 color: $palette-300;
77 }
78 .description {
79 padding-bottom: 7px;
80 > * {
81 margin-top: 5px;
82 }
83 ul,
84 ol {
85 margin-left: 1em;
86 }
87 ul {
88 list-style-type: disc;
89 }
90 a {
91 color: $palette-200;
92 &:hover {
93 color: $palette-050;
94 text-decoration: underline;
95 }
96 }
97 }
98}
99</style>
diff --git a/viewer/src/views/layout/left/LayoutLeft.vue b/viewer/src/views/layout/left/LayoutLeft.vue
new file mode 100644
index 0000000..bb3e747
--- /dev/null
+++ b/viewer/src/views/layout/left/LayoutLeft.vue
@@ -0,0 +1,158 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 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
22 class="flex-column"
23 :class="$style.sidebar"
24 >
25 <LayoutTagList v-model="searchFilters" />
26 <LayoutTagInput
27 v-model="searchFilters"
28 @search="search"
29 @opening="isOpenSearch=true"
30 @closing="isOpenSearch=false"
31 />
32 <!-- We disable the components beneath the Dropdown for accessibility purposes -->
33 <LayoutCommandSearch
34 v-show="!isOpenSearch"
35 @clear="clear"
36 @search="search"
37 />
38 <h1
39 v-show="!isOpenSearch"
40 :class="$style.title"
41 >
42 {{ t("panelLeft.propositions.related") }}
43 </h1>
44 <div
45 v-show="!isOpenSearch"
46 class="scrollbar no-scroll-x"
47 :class="$style.flexShrinkFully"
48 >
49 <LayoutProposition
50 v-for="category in galleryStore.tagsCategories"
51 :key="category.tag"
52 v-model:search-filters="searchFilters"
53 :category="galleryStore.tagsIndex[category.tag]"
54 :show-category="galleryStore.tagsCategories.length &g