pleroma-fe

commit: 274d384572f5699ddf0b43065235b32304954ca1
parent e74482d84b3ae88c98d9d4c6a4e6b4ec0376356e
Author: tusooa <tusooa@kazv.moe>
Date:   Sat, 14 Jan 2023 10:19:08 -0500

Make modal easier to close if there is only one image

Diffstat:
M
src/components/media_modal/media_modal.js
5
+++++
M
src/components/media_modal/media_modal.vue
1
+
M
src/components/swipe_click/swipe_click.js
7
+++++++

3 files changed, 13 insertions(+), 0 deletions(-)
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
@@ -63,6 +63,11 @@ const MediaModal = {
     },
     type () {
       return this.currentMedia ? this.getType(this.currentMedia) : null
+    },
+    swipeDisableClickThreshold () {
+      // If there is only one media, allow more mouse movements to close the modal
+      // because there is less chance that the user wants to switch to another image
+      return () => this.canNavigate ? 1 : 30
     }
   },
   methods: {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
@@ -10,6 +10,7 @@
       class="modal-image-container"
       :direction="swipeDirection"
       :threshold="swipeThreshold"
+      :disable-click-threshold="swipeDisableClickThreshold"
       @preview-requested="handleSwipePreview"
       @swipe-finished="handleSwipeEnd"
       @swipeless-clicked="hide"
diff --git a/src/components/swipe_click/swipe_click.js b/src/components/swipe_click/swipe_click.js
@@ -5,6 +5,8 @@ import GestureService from '../../services/gesture_service/gesture_service'
  *   direction: a vector that indicates the direction of the intended swipe
  *   threshold: the minimum distance in pixels the swipe has moved on `direction'
  *              for swipe-finished() to have a non-zero sign
+ *   disableClickThreshold: the minimum distance in pixels for the swipe to
+ *                          not trigger a click
  *   perpendicularTolerance: see gesture_service
  *
  * Events:
@@ -34,6 +36,10 @@ const SwipeClick = {
       type: Function,
       default: () => 30
     },
+    disableClickThreshold: {
+      type: Function,
+      default: () => 1
+    },
     perpendicularTolerance: {
       type: Number,
       default: 1.0
@@ -72,6 +78,7 @@ const SwipeClick = {
     this.$gesture = new GestureService.SwipeAndClickGesture({
       direction: this.direction,
       threshold: this.threshold,
+      disableClickThreshold: this.disableClickThreshold,
       perpendicularTolerance: this.perpendicularTolerance,
       swipePreviewCallback: this.preview,
       swipeEndCallback: this.end,