From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001 From: tusooa 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; +} -- cgit v1.2.3-70-g09d2 From 274d384572f5699ddf0b43065235b32304954ca1 Mon Sep 17 00:00:00 2001 From: tusooa 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