From 7431cd22330463dda7788b4a7cdf806a68e93023 Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Fri, 20 Dec 2024 17:11:58 +0000
Subject: [PATCH] Adjustments for touch

---
 WebDisplay/src/components/LongPressButton.vue | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/WebDisplay/src/components/LongPressButton.vue b/WebDisplay/src/components/LongPressButton.vue
index ef70f75..bd88738 100644
--- a/WebDisplay/src/components/LongPressButton.vue
+++ b/WebDisplay/src/components/LongPressButton.vue
@@ -20,10 +20,6 @@
     }
 
     function stopProgress() {
-        resetProgress();
-    }
-
-    function resetProgress() {
         clearInterval(interval);
 
         loading.value = false;
@@ -36,7 +32,7 @@
         if (current.value >= props.duration) {
             emit('longPress');
 
-            resetProgress();
+            stopProgress();
         }
     }
 
@@ -51,13 +47,14 @@
 
 <template>
     <button
-        :class="{ 'loading-button': loading }"
+        class="long-press-button"
+        :class="{ loading: loading }"
         @pointerdown="startProgress"
-        @pointerup="stopProgress">
+        @pointerup="stopProgress"
+        @pointercancel="stopProgress">
         <span v-show="!loading">
             <slot name="default"></slot>
         </span>
-
         <v-progress-circular
             v-if="loading"
             :size="props.progressSize"
@@ -66,11 +63,14 @@
 </template>
 
 <style scoped>
-    .loading-button {
+    .long-press-button {
+        touch-action: none;
+    }
+
+    .loading {
         display: inline-flex;
         flex-direction: column;
         align-items: center;
-        touch-action: none;
     }
 </style>