From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 9 Jan 2023 13:02:16 -0500
Subject: Use stylelint

---
 src/components/media_modal/media_modal.vue | 57 ++++++++++++++++--------------
 1 file changed, 31 insertions(+), 26 deletions(-)

(limited to 'src/components/media_modal/media_modal.vue')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index d59055b3..6464b99f 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -120,32 +120,12 @@ $modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2)
 $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
-.modal-view.media-modal-view {
-  z-index: var(--ZI_media_modal);
-  flex-direction: column;
-
-  .modal-view-button-arrow,
-  .modal-view-button-hide {
-    opacity: 0.75;
-
-    &:focus,
-    &:hover {
-      outline: none;
-      box-shadow: none;
-    }
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-  overflow: hidden;
-}
-
 .media-modal-view {
   @keyframes media-fadein {
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
@@ -226,7 +206,7 @@ $modal-view-button-icon-margin: 0.5em;
     appearance: none;
     overflow: visible;
     cursor: pointer;
-    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
     height: $modal-view-button-icon-height;
     width: $modal-view-button-icon-width;
 
@@ -236,9 +216,9 @@ $modal-view-button-icon-margin: 0.5em;
       width: $modal-view-button-icon-width;
       font-size: 1rem;
       line-height: $modal-view-button-icon-height;
-      color: #FFF;
+      color: #fff;
       text-align: center;
-      background-color: rgba(0,0,0,.3);
+      background-color: rgb(0 0 0 / 30%);
     }
   }
 
@@ -254,13 +234,14 @@ $modal-view-button-icon-margin: 0.5em;
       position: absolute;
       top: 0;
       line-height: $modal-view-button-icon-height;
-      color: #FFF;
+      color: #fff;
       text-align: center;
-      background-color: rgba(0,0,0,.3);
+      background-color: rgb(0 0 0 / 30%);
     }
 
     &--prev {
       left: 0;
+
       .arrow-icon {
         left: $modal-view-button-icon-margin;
       }
@@ -268,6 +249,7 @@ $modal-view-button-icon-margin: 0.5em;
 
     &--next {
       right: 0;
+
       .arrow-icon {
         right: $modal-view-button-icon-margin;
       }
@@ -278,10 +260,33 @@ $modal-view-button-icon-margin: 0.5em;
     position: absolute;
     top: 0;
     right: 0;
+
     .button-icon {
       top: $modal-view-button-icon-margin;
       right: $modal-view-button-icon-margin;
     }
   }
 }
+
+.modal-view.media-modal-view {
+  z-index: var(--ZI_media_modal);
+  flex-direction: column;
+
+  .modal-view-button-arrow,
+  .modal-view-button-hide {
+    opacity: 0.75;
+
+    &:focus,
+    &:hover {
+      outline: none;
+      box-shadow: none;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  overflow: hidden;
+}
 </style>
-- 
cgit v1.2.3-70-g09d2


From 274d384572f5699ddf0b43065235b32304954ca1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 14 Jan 2023 10:19:08 -0500
Subject: Make modal easier to close if there is only one image

---
 src/components/media_modal/media_modal.js  | 5 +++++
 src/components/media_modal/media_modal.vue | 1 +
 src/components/swipe_click/swipe_click.js  | 7 +++++++
 3 files changed, 13 insertions(+)

(limited to 'src/components/media_modal/media_modal.vue')

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index ff993664..05ef9fbe 100644
--- 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
index d59055b3..8e1adda5 100644
--- 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
index 238e6df8..2a423901 100644
--- 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,
-- 
cgit v1.2.3-70-g09d2

