From e91065602eeeebef236dae29e67d8e3334ab4029 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Wed, 29 Jan 2020 07:54:03 +0100 Subject: 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 --- viewer/package-lock.json | 5 ++++ viewer/package.json | 1 + viewer/src/@types/vue-dragscroll.ts | 20 +++++++++++++ viewer/src/assets/scss/global.scss | 5 +++- viewer/src/components/LdButtonFullscreen.vue | 44 ---------------------------- viewer/src/main.ts | 1 + viewer/src/plugins/dragscroll.ts | 24 +++++++++++++++ viewer/src/plugins/fontawesome.ts | 2 -- viewer/src/views/GalleryPicture.vue | 34 ++++++++++++++++++++- viewer/src/views/MainLayout.vue | 1 - 10 files changed, 88 insertions(+), 49 deletions(-) create mode 100644 viewer/src/@types/vue-dragscroll.ts delete mode 100644 viewer/src/components/LdButtonFullscreen.vue create mode 100644 viewer/src/plugins/dragscroll.ts (limited to 'viewer') 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 @@ } } }, + "vue-dragscroll": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/vue-dragscroll/-/vue-dragscroll-1.10.2.tgz", + "integrity": "sha512-fGVw8KP3ggbp49csa1Tbj2my0YuNmZ1zxYYge4QWIypGNHVwd9hResy/v6QF5HxY0a+qd2EBteeBpxtJxFMp5A==" + }, "vue-eslint-parser": { "version": "6.0.5", "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 @@ "v-lazy-image": "^1.3.2", "vue": "^2.6.10", "vue-class-component": "^7.0.2", + "vue-dragscroll": "^1.10.2", "vue-i18n": "^8.0.0", "vue-property-decorator": "^8.3.0", "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 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2020 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +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 @@ // === Scrollbar styling .scrollbar { - overflow-y: auto; + overflow: auto; } .scrollbar::-webkit-scrollbar { width: 12px; } +.scrollbar::-webkit-scrollbar-corner { + background-color: transparent; +} .scrollbar::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px black; background-color: $toolbar-color; diff --git a/viewer/src/components/LdButtonFullscreen.vue b/viewer/src/components/LdButtonFullscreen.vue deleted file mode 100644 index 39d59af..0000000 --- a/viewer/src/components/LdButtonFullscreen.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - 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" import "@/plugins/fontawesome"; import "@/plugins/buefy"; import "@/plugins/lazyimage"; +import "@/plugins/dragscroll"; import store from '@/store' import i18n from "@/plugins/i18n"; import router from "@/router"; diff --git a/viewer/src/plugins/dragscroll.ts b/viewer/src/plugins/dragscroll.ts new file mode 100644 index 0000000..f6d88bb --- /dev/null +++ b/viewer/src/plugins/dragscroll.ts @@ -0,0 +1,24 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2020 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +import Vue from "vue"; +import VueDragscroll from 'vue-dragscroll'; + +Vue.use(VueDragscroll); + 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"; import { library } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { - faExpandArrowsAlt, faFolder, faSearch, faTag, @@ -32,7 +31,6 @@ import { } from "@fortawesome/free-solid-svg-icons"; library.add( - faExpandArrowsAlt, faFolder, faSearch, 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 @@ --> @@ -30,11 +36,37 @@ import { Component, Vue, Prop } from "vue-property-decorator"; export default class GalleryPicture extends Vue { @Prop({ required: true }) readonly picture!: Gallery.Picture; + dragging: boolean = false; + get pictureSrc() { return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`; } + + onClick() { + if (!this.dragging) this.$uiStore.toggleFullscreen(); + this.dragging = false; + } } 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 @@ - -- cgit v1.2.3