aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorZero~Informatique2020-01-29 07:54:03 +0100
committerNotkea2020-01-29 21:59:12 +0100
commite91065602eeeebef236dae29e67d8e3334ab4029 (patch)
tree9b8ff998181c1e598c6ac7a1cfb85e84029f0f71 /viewer
parentbb50cd8e6c7643f696a9ae038a207d1c98ef0b14 (diff)
downloadldgallery-e91065602eeeebef236dae29e67d8e3334ab4029.tar.gz
viewer: improved the picture layout. clicking a picture will switch between resized-to-screen and original-size (+fullscreen). drag-n-drop scrolls/moves the picture, just like a touch device. Resolves #19
Diffstat (limited to 'viewer')
-rw-r--r--viewer/package-lock.json5
-rw-r--r--viewer/package.json1
-rw-r--r--viewer/src/@types/vue-dragscroll.ts20
-rw-r--r--viewer/src/assets/scss/global.scss5
-rw-r--r--viewer/src/main.ts1
-rw-r--r--viewer/src/plugins/dragscroll.ts (renamed from viewer/src/components/LdButtonFullscreen.vue)30
-rw-r--r--viewer/src/plugins/fontawesome.ts2
-rw-r--r--viewer/src/views/GalleryPicture.vue34
-rw-r--r--viewer/src/views/MainLayout.vue1
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
20declare 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"
23import "@/plugins/fontawesome"; 23import "@/plugins/fontawesome";
24import "@/plugins/buefy"; 24import "@/plugins/buefy";
25import "@/plugins/lazyimage"; 25import "@/plugins/lazyimage";
26import "@/plugins/dragscroll";
26import store from '@/store' 27import store from '@/store'
27import i18n from "@/plugins/i18n"; 28import i18n from "@/plugins/i18n";
28import router from "@/router"; 29import 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> 20import Vue from "vue";
21 <fa-icon icon="expand-arrows-alt" class="button-fullscreen" @click="$uiStore.toggleFullscreen()" /> 21import VueDragscroll from 'vue-dragscroll';
22</template>
23 22
24<script lang="ts"> 23Vue.use(VueDragscroll);
25import { Component, Vue } from "vue-property-decorator";
26 24
27@Component
28export 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";
22import { library } from "@fortawesome/fontawesome-svg-core"; 22import { library } from "@fortawesome/fontawesome-svg-core";
23import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; 23import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
24import { 24import {
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
34library.add( 33library.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";
30export default class GalleryPicture extends Vue { 36export 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 lay