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

7 files changed, 63 insertions, 30 deletions

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 <https://www.gnu.org/licenses/>.
+*/
+
+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/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/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 @@
-<!-- ldgallery - A static generator which turns a collection of tagged
+/* ldgallery - A static generator which turns a collection of tagged
 --             pictures into a searchable web gallery.
 --
 -- Copyright (C) 2019-2020  Guillaume FOUET
@@ -15,30 +15,10 @@
 --
 -- You should have received a copy of the GNU Affero General Public License
 -- along with this program.  If not, see <https://www.gnu.org/licenses/>.
--->
+*/
 
-<template>
-  <fa-icon icon="expand-arrows-alt" class="button-fullscreen" @click="$uiStore.toggleFullscreen()" />
-</template>
+import Vue from "vue";
+import VueDragscroll from 'vue-dragscroll';
 
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+Vue.use(VueDragscroll);
 
-@Component
-export default class LdButtonFullscreen extends Vue {}
-</script>
-
-<style lang="scss">
-.button-fullscreen {
-  position: fixed;
-  top: 0;
-  right: 0;
-  margin: 3px 10px;
-  opacity: 50%;
-  font-size: 1.5em;
-  color: white;
-  mix-blend-mode: difference;
-  cursor: pointer;
-  z-index: 4;
-}
-</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";
 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 @@
 -->
 
 <template>
-  <div>
+  <div
+    v-dragscroll
+    class="scrollbar"
+    :class="{fitToScreen: !$uiStore.fullscreen, originalSize: $uiStore.fullscreen}"
+    @click="onClick"
+    @dragscrollstart="dragging=true"
+  >
     <img :src="pictureSrc" />
   </div>
 </template>
@@ -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;
+  }
 }
 </script>
 
 <style lang="scss">
+.fitToScreen {
+  display: flex;
+  justify-content: space-around;
+  height: 100%;
+  & > img {
+    object-fit: contain;
+  }
+}
+.originalSize {
+  display: block;
+  text-align: center;
+  cursor: grab;
+  height: 100%;
+  & > img {
+    max-width: unset;
+    max-height: unset;
+    object-fit: none;
+  }
+}
 </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 @@
     <panel-top class="layout layout-top" />
     <panel-left class="layout layout-left" />
     <router-view class="layout layout-content scrollbar" />
-    <ld-button-fullscreen />
     <b-loading :active="isLoading" is-full-page />
   </div>
 </template>