From 75f4cff8d760f6335f3cf55f17a12b9d92e67b67 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Thu, 23 Apr 2020 14:36:02 +0200
Subject: [PATCH] Frontend: Improve range select on mobile

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/component/p-photo-card.vue   |  2 ++
 frontend/src/component/p-photo-mosaic.vue | 13 ++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/p-photo-card.vue b/frontend/src/component/p-photo-card.vue
index ec9686d40..75426c417 100644
--- a/frontend/src/component/p-photo-card.vue
+++ b/frontend/src/component/p-photo-card.vue
@@ -128,6 +128,8 @@
                         this.$clipboard.toggle(this.photo);
                     }
                 }
+
+                this.wasLong = false;
             },
         },
         watch: {
diff --git a/frontend/src/component/p-photo-mosaic.vue b/frontend/src/component/p-photo-mosaic.vue
index 067222652..c71b4b04f 100644
--- a/frontend/src/component/p-photo-mosaic.vue
+++ b/frontend/src/component/p-photo-mosaic.vue
@@ -23,7 +23,7 @@
             >
                 <v-hover>
                     <v-card tile slot-scope="{ hover }"
-                            @contextmenu="contextMenu($event, photo)"
+                            @contextmenu="contextMenu($event, photo, index)"
                             :class="$clipboard.has(photo) ? 'elevation-10 ma-0' : 'elevation-0 ma-1'"
                             :title="photo.PhotoTitle">
                         <v-img :src="photo.getThumbnailUrl('tile_224')"
@@ -118,12 +118,19 @@
 
                 this.wasLong = false;
             },
-            contextMenu(ev, model) {
+            contextMenu(ev, model, index) {
                 if (this.$isMobile) {
                     ev.preventDefault();
                     ev.stopPropagation();
-                    this.$clipboard.toggle(model);
+
+                    if (this.wasLong) {
+                        this.selectRange(index);
+                    } else {
+                        this.$clipboard.toggle(model);
+                    }
                 }
+
+                this.wasLong = false;
             },
             selectRange(index) {
                 this.$clipboard.addRange(index, this.photos);