diff options
-rw-r--r-- | viewer/package-lock.json | 5 | ||||
-rw-r--r-- | viewer/package.json | 1 | ||||
-rw-r--r-- | viewer/src/@types/vue-dragscroll.ts | 20 | ||||
-rw-r--r-- | viewer/src/assets/scss/global.scss | 5 | ||||
-rw-r--r-- | viewer/src/main.ts | 1 | ||||
-rw-r--r-- | viewer/src/plugins/dragscroll.ts (renamed from viewer/src/components/LdButtonFullscreen.vue) | 30 | ||||
-rw-r--r-- | viewer/src/plugins/fontawesome.ts | 2 | ||||
-rw-r--r-- | viewer/src/views/GalleryPicture.vue | 34 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 1 |
9 files changed, 69 insertions, 30 deletions
diff --git a/viewer/package-lock.json b/viewer/package-lock.json index 4056424..b7e14f9 100644 --- a/viewer/package-lock.json +++ b/viewer/package-lock.json | |||
@@ -12712,6 +12712,11 @@ | |||
12712 | } | 12712 | } |
12713 | } | 12713 | } |
12714 | }, | 12714 | }, |
12715 | "vue-dragscroll": { | ||
12716 | "version": "1.10.2", | ||
12717 | "resolved": "https://registry.npmjs.org/vue-dragscroll/-/vue-dragscroll-1.10.2.tgz", | ||
12718 | "integrity": "sha512-fGVw8KP3ggbp49csa1Tbj2my0YuNmZ1zxYYge4QWIypGNHVwd9hResy/v6QF5HxY0a+qd2EBteeBpxtJxFMp5A==" | ||
12719 | }, | ||
12715 | "vue-eslint-parser": { | 12720 | "vue-eslint-parser": { |
12716 | "version": "6.0.5", | 12721 | "version": "6.0.5", |
12717 | "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-6.0.5.tgz", | 12722 | "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-6.0.5.tgz", |
diff --git a/viewer/package.json b/viewer/package.json index a8a4079..389c30e 100644 --- a/viewer/package.json +++ b/viewer/package.json | |||
@@ -17,6 +17,7 @@ | |||
17 | "v-lazy-image": "^1.3.2", | 17 | "v-lazy-image": "^1.3.2", |
18 | "vue": "^2.6.10", | 18 | "vue": "^2.6.10", |
19 | "vue-class-component": "^7.0.2", | 19 | "vue-class-component": "^7.0.2", |
20 | "vue-dragscroll": "^1.10.2", | ||
20 | "vue-i18n": "^8.0.0", | 21 | "vue-i18n": "^8.0.0", |
21 | "vue-property-decorator": "^8.3.0", | 22 | "vue-property-decorator": "^8.3.0", |
22 | "vue-router": "^3.1.3", | 23 | "vue-router": "^3.1.3", |
diff --git a/viewer/src/@types/vue-dragscroll.ts b/viewer/src/@types/vue-dragscroll.ts new file mode 100644 index 0000000..b0967a9 --- /dev/null +++ b/viewer/src/@types/vue-dragscroll.ts | |||
@@ -0,0 +1,20 @@ | |||
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 | declare module 'vue-dragscroll'; \ No newline at end of file | ||
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index ff57775..1903c9e 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss | |||
@@ -47,11 +47,14 @@ | |||
47 | // === Scrollbar styling | 47 | // === Scrollbar styling |
48 | 48 | ||
49 | .scrollbar { | 49 | .scrollbar { |
50 | overflow-y: auto; | 50 | overflow: auto; |
51 | } | 51 | } |
52 | .scrollbar::-webkit-scrollbar { | 52 | .scrollbar::-webkit-scrollbar { |
53 | width: 12px; | 53 | width: 12px; |
54 | } | 54 | } |
55 | .scrollbar::-webkit-scrollbar-corner { | ||
56 | background-color: transparent; | ||
57 | } | ||
55 | .scrollbar::-webkit-scrollbar-thumb { | 58 | .scrollbar::-webkit-scrollbar-thumb { |
56 | box-shadow: inset 0 0 6px black; | 59 | box-shadow: inset 0 0 6px black; |
57 | background-color: $toolbar-color; | 60 | background-color: $toolbar-color; |
diff --git a/viewer/src/main.ts b/viewer/src/main.ts index 8e7716d..75a238f 100644 --- a/viewer/src/main.ts +++ b/viewer/src/main.ts | |||
@@ -23,6 +23,7 @@ import "@/components" | |||
23 | import "@/plugins/fontawesome"; | 23 | import "@/plugins/fontawesome"; |
24 | import "@/plugins/buefy"; | 24 | import "@/plugins/buefy"; |
25 | import "@/plugins/lazyimage"; | 25 | import "@/plugins/lazyimage"; |
26 | import "@/plugins/dragscroll"; | ||
26 | import store from '@/store' | 27 | import store from '@/store' |
27 | import i18n from "@/plugins/i18n"; | 28 | import i18n from "@/plugins/i18n"; |
28 | import router from "@/router"; | 29 | import router from "@/router"; |
diff --git a/viewer/src/components/LdButtonFullscreen.vue b/viewer/src/plugins/dragscroll.ts index 39d59af..f6d88bb 100644 --- a/viewer/src/components/LdButtonFullscreen.vue +++ b/viewer/src/plugins/dragscroll.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | <!-- ldgallery - A static generator which turns a collection of tagged | 1 | /* ldgallery - A static generator which turns a collection of tagged |
2 | -- pictures into a searchable web gallery. | 2 | -- pictures into a searchable web gallery. |
3 | -- | 3 | -- |
4 | -- Copyright (C) 2019-2020 Guillaume FOUET | 4 | -- Copyright (C) 2019-2020 Guillaume FOUET |
@@ -15,30 +15,10 @@ | |||
15 | -- | 15 | -- |
16 | -- You should have received a copy of the GNU Affero General Public License | 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/>. | 17 | -- along with this program. If not, see <https://www.gnu.org/licenses/>. |
18 | --> | 18 | */ |
19 | 19 | ||
20 | <template> | 20 | import Vue from "vue"; |
21 | <fa-icon icon="expand-arrows-alt" class="button-fullscreen" @click="$uiStore.toggleFullscreen()" /> | 21 | import VueDragscroll from 'vue-dragscroll'; |
22 | </template> | ||
23 | 22 | ||
24 | <script lang="ts"> | 23 | Vue.use(VueDragscroll); |
25 | import { Component, Vue } from "vue-property-decorator"; | ||
26 | 24 | ||
27 | @Component | ||
28 | export default class LdButtonFullscreen extends Vue {} | ||
29 | </script> | ||
30 | |||
31 | <style lang="scss"> | ||
32 | .button-fullscreen { | ||
33 | position: fixed; | ||
34 | top: 0; | ||
35 | right: 0; | ||
36 | margin: 3px 10px; | ||
37 | opacity: 50%; | ||
38 | font-size: 1.5em; | ||
39 | color: white; | ||
40 | mix-blend-mode: difference; | ||
41 | cursor: pointer; | ||
42 | z-index: 4; | ||
43 | } | ||
44 | </style> | ||
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts index 7fb08a3..bb77c01 100644 --- a/viewer/src/plugins/fontawesome.ts +++ b/viewer/src/plugins/fontawesome.ts | |||
@@ -22,7 +22,6 @@ import Vue from "vue"; | |||
22 | import { library } from "@fortawesome/fontawesome-svg-core"; | 22 | import { library } from "@fortawesome/fontawesome-svg-core"; |
23 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; | 23 | import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; |
24 | import { | 24 | import { |
25 | faExpandArrowsAlt, | ||
26 | faFolder, | 25 | faFolder, |
27 | faSearch, | 26 | faSearch, |
28 | faTag, | 27 | faTag, |
@@ -32,7 +31,6 @@ import { | |||
32 | } from "@fortawesome/free-solid-svg-icons"; | 31 | } from "@fortawesome/free-solid-svg-icons"; |
33 | 32 | ||
34 | library.add( | 33 | library.add( |
35 | faExpandArrowsAlt, | ||
36 | faFolder, | 34 | faFolder, |
37 | faSearch, | 35 | faSearch, |
38 | faTag, | 36 | faTag, |
diff --git a/viewer/src/views/GalleryPicture.vue b/viewer/src/views/GalleryPicture.vue index 3689cb3..579e74b 100644 --- a/viewer/src/views/GalleryPicture.vue +++ b/viewer/src/views/GalleryPicture.vue | |||
@@ -18,7 +18,13 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div> | 21 | <div |
22 | v-dragscroll | ||
23 | class="scrollbar" | ||
24 | :class="{fitToScreen: !$uiStore.fullscreen, originalSize: $uiStore.fullscreen}" | ||
25 | @click="onClick" | ||
26 | @dragscrollstart="dragging=true" | ||
27 | > | ||
22 | <img :src="pictureSrc" /> | 28 | <img :src="pictureSrc" /> |
23 | </div> | 29 | </div> |
24 | </template> | 30 | </template> |
@@ -30,11 +36,37 @@ import { Component, Vue, Prop } from "vue-property-decorator"; | |||
30 | export default class GalleryPicture extends Vue { | 36 | export default class GalleryPicture extends Vue { |
31 | @Prop({ required: true }) readonly picture!: Gallery.Picture; | 37 | @Prop({ required: true }) readonly picture!: Gallery.Picture; |
32 | 38 | ||
39 | dragging: boolean = false; | ||
40 | |||
33 | get pictureSrc() { | 41 | get pictureSrc() { |
34 | return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`; | 42 | return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`; |
35 | } | 43 | } |
44 | |||
45 | onClick() { | ||
46 | if (!this.dragging) this.$uiStore.toggleFullscreen(); | ||
47 | this.dragging = false; | ||
48 | } | ||
36 | } | 49 | } |
37 | </script> | 50 | </script> |
38 | 51 | ||
39 | <style lang="scss"> | 52 | <style lang="scss"> |
53 | .fitToScreen { | ||
54 | display: flex; | ||
55 | justify-content: space-around; | ||
56 | height: 100%; | ||
57 | & > img { | ||
58 | object-fit: contain; | ||
59 | } | ||
60 | } | ||
61 | .originalSize { | ||
62 | display: block; | ||
63 | text-align: center; | ||
64 | cursor: grab; | ||
65 | height: 100%; | ||
66 | & > img { | ||
67 | max-width: unset; | ||
68 | max-height: unset; | ||
69 | object-fit: none; | ||
70 | } | ||
71 | } | ||
40 | </style> | 72 | </style> |
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index 1528e64..7a75eb1 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue | |||
@@ -22,7 +22,6 @@ | |||
22 | <panel-top class="layout layout-top" /> | 22 | <panel-top class="layout layout-top" /> |
23 | <panel-left class="layout layout-left" /> | 23 | <panel-left class="layout layout-left" /> |
24 | <router-view class="layout layout-content scrollbar" /> | 24 | <router-view class="layout layout-content scrollbar" /> |
25 | <ld-button-fullscreen /> | ||
26 | <b-loading :active="isLoading" is-full-page /> | 25 | <b-loading :active="isLoading" is-full-page |