diff options
Diffstat (limited to 'viewer/src/components')
24 files changed, 185 insertions, 1484 deletions
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue deleted file mode 100644 index d518365..0000000 --- a/viewer/src/components/LdBreadcrumb.vue +++ /dev/null | |||
@@ -1,129 +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 | ||
22 | ref="breadcrumb" | ||
23 | v-dragscroll | ||
24 | class="flex scrollbar" | ||
25 | :class="$style.ldBreadcrumb" | ||
26 | @click.capture="e => dragScrollClickFix.onClickCapture(e)" | ||
27 | @dragscrollstart="dragScrollClickFix.onDragScrollStart()" | ||
28 | @dragscrollend="dragScrollClickFix.onDragScrollEnd()" | ||
29 | @dragscrollmove="checkForOverflowMask" | ||
30 | > | ||
31 | <div v-show="overflowMask" :class="$style.ldBreadcrumbOverflowMask"></div> | ||
32 | <ul> | ||
33 | <li v-for="(item, idx) in currentItemPath" :key="item.path"> | ||
34 | <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" /> | ||
35 | <router-link :to="item.path" class="link"> | ||
36 | <fa-icon :icon="getIcon(item)" size="lg" /> | ||
37 | {{ item.title }} | ||
38 | </router-link> | ||
39 | </li> | ||
40 | <li v-if="searchMode"> | ||
41 | <fa-icon icon="angle-right" class="disabled" /> | ||
42 | <router-link :to="$route" class="link"> | ||
43 | <fa-icon icon="search" size="lg" class="disabled" /> | ||
44 | </router-link> | ||
45 | </li> | ||
46 | </ul> | ||
47 | </div> | ||
48 | </template> | ||
49 | |||
50 | <script lang="ts"> | ||
51 | import { Item } from "@/@types/gallery"; | ||
52 | import DragScrollClickFix from "@/services/dragscrollclickfix"; | ||
53 | import Navigation from "@/services/navigation"; | ||
54 | import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator"; | ||
55 | |||
56 | @Component | ||
57 | export default class LdBreadcrumb extends Vue { | ||
58 | @Prop({ type: Array, required: true }) readonly currentItemPath!: Item[]; | ||
59 | @Prop(Boolean) readonly searchMode!: boolean; | ||
60 | @Ref() readonly breadcrumb!: HTMLUListElement; | ||
61 | |||
62 | readonly dragScrollClickFix = new DragScrollClickFix(); | ||
63 | |||
64 | dragging: boolean = false; | ||
65 | overflowMask: boolean = false; | ||
66 | |||
67 | mounted() { | ||
68 | window.addEventListener("resize", this.checkForOverflowMask); | ||
69 | } | ||
70 | |||
71 | destroyed() { | ||
72 | window.removeEventListener("resize", this.checkForOverflowMask); | ||
73 | } | ||
74 | |||
75 | checkForOverflowMask() { | ||
76 | this.overflowMask = this.breadcrumb.scrollLeft > 1; | ||
77 | } | ||
78 | |||
79 | @Watch("currentItemPath") | ||
80 | changedCurrentItemPath() { | ||
81 | this.$nextTick(() => { | ||
82 | this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth; | ||
83 | this.checkForOverflowMask(); | ||
84 | }); | ||
85 | } | ||
86 | |||
87 | getIcon(item: Item) { | ||
88 | return Navigation.getIcon(item); | ||
89 | } | ||
90 | } | ||
91 | </script> | ||
92 | |||
93 | <style lang="scss" module> | ||
94 | @import "~@/assets/scss/theme.scss"; | ||
95 | |||
96 | .ldBreadcrumbOverflowMask { | ||
97 | position: absolute; | ||
98 | width: 100%; | ||
99 | height: 100%; | ||
100 | background: linear-gradient( | ||
101 | to right, | ||
102 | rgba($panel-top-bgcolor, 1) $breadcrumb-margins, | ||
103 | rgba($panel-top-bgcolor, 0) $breadcrumb-overflow-mask-size | ||
104 | ); | ||
105 | pointer-events: none; | ||
106 | } | ||
107 | |||
108 | .ldBreadcrumb { | ||
109 | ul { | ||
110 | display: flex; | ||
111 | white-space: nowrap; | ||
112 | } | ||
113 | a { | ||
114 | padding: $breadcrumb-margins 0; | ||
115 | margin-left: $breadcrumb-margins; | ||
116 | } | ||
117 | li { | ||
118 | align-self: center; | ||
119 | margin-right: $breadcrumb-margins; | ||
120 | } | ||
121 | &:global(.scrollbar) { | ||
122 | overflow-y: hidden; | ||
123 | scrollbar-width: none; | ||
124 | &::-webkit-scrollbar { | ||
125 | height: 0; | ||
126 | } | ||
127 | } | ||
128 | } | ||
129 | </style> | ||
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue deleted file mode 100644 index 19174ad..0000000 --- a/viewer/src/components/LdCommand.vue +++ /dev/null | |||
@@ -1,98 +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 | -- 2020 Pacien TRAN-GIRARD | ||
6 | -- | ||
7 | -- This program is free software: you can redistribute it and/or modify | ||
8 | -- it under the terms of the GNU Affero General Public License as | ||
9 | -- published by the Free Software Foundation, either version 3 of the | ||
10 | -- License, or (at your option) any later version. | ||
11 | -- | ||
12 | -- This program is distributed in the hope that it will be useful, | ||
13 | -- but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
14 | -- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
15 | -- GNU Affero General Public License for more details. | ||
16 | -- | ||
17 | -- You should have received a copy of the GNU Affero General Public License | ||
18 | -- along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
19 | --> | ||
20 | |||
21 | <template> | ||
22 | <div class="flex" :class="$style.commandBtns"> | ||
23 | <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()"> | ||
24 | <fa-icon :icon="commandToggleSearchPanelIcon" size="lg" /> | ||
25 | </a> | ||
26 | <ld-command-sort /> | ||
27 | <a | ||
28 | class="link" | ||
29 | :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }" | ||
30 | :title="$t('command.back')" | ||
31 | @click="isEntryPoint() || $router.back()" | ||
32 | > | ||
33 | <fa-icon icon="arrow-left" size="lg" /> | ||
34 | </a> | ||
35 | <router-link :class="{ disabled: isRoot }" :title="$t('command.parent')" :to="parent"> | ||
36 | <fa-icon icon="folder" size="xs" /> | ||
37 | <fa-icon icon="level-up-alt" size="lg" /> | ||
38 | </router-link> | ||
39 | </div> | ||
40 | </template> | ||
41 | |||
42 | <script lang="ts"> | ||
43 | import { Item } from "@/@types/gallery"; | ||
44 | import { Component, Prop, Vue } from "vue-property-decorator"; | ||
45 | import { RawLocation } from "vue-router"; | ||
46 | |||
47 | @Component | ||
48 | export default class LdCommand extends Vue { | ||
49 | @Prop({ type: Array, required: true }) readonly currentItemPath!: Item[]; | ||
50 | |||
51 | get commandToggleSearchPanelIcon(): string { | ||
52 | return this.$uiStore.fullWidth ? "search" : "angle-double-left"; | ||
53 | } | ||
54 | |||
55 | get isRoot(): boolean { | ||
56 | return this.currentItemPath.length <= 1 && !this.$uiStore.searchMode; | ||
57 | } | ||
58 | |||
59 | isEntryPoint(): boolean { | ||
60 | return history.state?.ldgallery === "ENTRYPOINT"; // Set by MainLayout.vue | ||
61 | } |