aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/GalleryPicture.vue
diff options
context:
space:
mode:
authorZero~Informatique2020-01-29 07:54:03 +0100
committerNotkea2020-01-29 21:59:12 +0100
commite91065602eeeebef236dae29e67d8e3334ab4029 (patch)
tree9b8ff998181c1e598c6ac7a1cfb85e84029f0f71 /viewer/src/views/GalleryPicture.vue
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/src/views/GalleryPicture.vue')
-rw-r--r--viewer/src/views/GalleryPicture.vue34
1 files changed, 33 insertions, 1 deletions
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>