aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/layout/top/LayoutBreadcrumb.vue
diff options
context:
space:
mode:
authorZéro~Informatique2022-07-26 08:44:34 +0200
committerpacien2022-09-03 01:30:42 +0200
commit00510820a2794efcadbc83f7f8b54318fe198ecb (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/views/layout/top/LayoutBreadcrumb.vue
parent88aa098c07e067f9f737fbeba1f52a9bd5042e53 (diff)
downloadldgallery-00510820a2794efcadbc83f7f8b54318fe198ecb.tar.gz
viewer: migrate to vue 3, general refactoring and cleanup
Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112
Diffstat (limited to 'viewer/src/views/layout/top/LayoutBreadcrumb.vue')
-rw-r--r--viewer/src/views/layout/top/LayoutBreadcrumb.vue130
1 files changed, 130 insertions, 0 deletions
diff --git a/viewer/src/views/layout/top/LayoutBreadcrumb.vue b/viewer/src/views/layout/top/LayoutBreadcrumb.vue
new file mode 100644
index 0000000..2e70d66
--- /dev/null
+++ b/viewer/src/views/layout/top/LayoutBreadcrumb.vue
@@ -0,0 +1,130 @@
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 ref="breadcrumb"
23 v-dragscroll.x
24 class="flex scrollbar"
25 :class="$style.ldBreadcrumb"
26 >
27 <div
28 v-show="!arrivedState.left"
29 :class="$style.ldBreadcrumbOverflowMask"
30 />
31 <ul>
32 <li
33 v-for="(item, idx) in currentItemPath"
34 :key="item.path"
35 >
36 <fa-icon
37 v-if="idx > 0"
38 :icon="faAngleRight"
39 class="disabled"
40 />
41 <LdLink
42 :to="item.path"
43 >
44 <fa-icon
45 :icon="navigation.getIcon(item)"
46 size="lg"
47 />
48 {{ item.title }}
49 </LdLink>
50 </li>
51 <li v-if="searchMode">
52 <fa-icon
53 :icon="faAngleRight"
54 class="disabled"
55 />
56 <fa-icon
57 :icon="faSearch"
58 size="lg"
59 class="disabled"
60 />
61 </li>
62 </ul>
63 </div>
64</template>
65
66<script setup lang="ts">
67import { Item } from '@/@types/gallery';
68import LdLink from '@/components/LdLink.vue';
69import { useNavigation } from '@/services/navigation';
70import { faAngleRight, faSearch } from '@fortawesome/free-solid-svg-icons';
71import { useScroll } from '@vueuse/core';
72import { nextTick, onMounted, ref, watch } from 'vue';
73
74const props = defineProps({
75 currentItemPath: { type: Array<Item>, required: true },
76 searchMode: Boolean,
77});
78
79const breadcrumb = ref<HTMLDivElement>();
80
81const navigation = useNavigation();
82const { arrivedState } = useScroll(breadcrumb);
83
84onMounted(() =>
85 watch(() => props.currentItemPath, () => {
86 const div = breadcrumb.value;
87 if (div) nextTick(() => (div.scrollLeft = div.scrollWidth));
88 }, { immediate: true }));
89</script>
90
91<style lang="scss" module>
92@import "~@/assets/scss/theme";
93
94.ldBreadcrumbOverflowMask {
95 position: absolute;
96 width: 100%;
97 height: 100%;
98 background: linear-gradient(
99 to right,
100 rgba($panel-top-bgcolor, 1) $breadcrumb-margins,
101 rgba($panel-top-bgcolor, 0) $breadcrumb-overflow-mask-size
102 );
103 pointer-events: none;
104}
105
106.ldBreadcrumb {
107 ul {
108 display: flex;
109 white-space: nowrap;
110 list-style: none;
111 padding: 2px; // Necessary for the focus outline
112 align-items: center;
113 li {
114 > * {
115 margin-left: $breadcrumb-margins;
116 }
117 > a {
118 padding: $breadcrumb-margins 2px;
119 }
120 }
121 }
122 &:global(.scrollbar) {
123 overflow-y: hidden;
124 scrollbar-width: none;
125 &::-webkit-scrollbar {
126 height: 0;
127 }
128 }
129}
130</style>