Merge branch 'tusooa/noswipe-1img' into 'develop'

Make media modal easier to close if there is only one image

Closes #1237

See merge request pleroma/pleroma-fe!1755
This commit is contained in:
HJ 2023-01-14 22:21:59 +00:00
commit b4cbbefbd2
3 changed files with 13 additions and 0 deletions

View file

@ -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: {

View file

@ -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"

View file

@ -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,