zulip-mobile
zulip-mobile copied to clipboard
zulip
Swipe an image down to close it.
Instead of clicking on x to close an image, dragging an image down to close it will make it much easier and user-friendly. It also improves reachability issues when using one-handed.
An example would be WhatsApp's image viewing.
I can understand swiping left or right to close the lightbox, but I'm a bit surprised by swiping down.
Does WhatsApp also have their lightbox-equivalent slide up from the bottom when it comes into view?
I can understand swiping left or right to close the lightbox, but I'm a bit surprised by swiping down.
Does WhatsApp also have their lightbox-equivalent slide up from the bottom when it comes into view?
Swiping down is the only way ( apart from the back button ) to close the lightbox in case of WhatsApp ( and almost every other app I use, including the system gallery app. )
Usually, swiping left / right does not close lightboxes, becaue the lighbox is a gallery of of images and left / right swipes would change the image displayed.
I can understand swiping left or right to close the lightbox, but I'm a bit surprised by swiping down.
Are you saying that we swipe from edge which acts as clicking back on android?
Does WhatsApp also have their lightbox-equivalent slide up from the bottom when it comes into view?
No, it just opens up in a pop up kind of fashion. I think I understand how you are imagining. Are you thinking that it looks like a different container that can be closed by sliding down?
In the issue I was trying to say that we should be able to close the image by swiping it down anywhere on the image.
As @agrawal-d said, swiping left or right takes us to previous/next image on whatsapp and gallery. I don’t really know how it works on android, I’m guessing it’ll be same. I’m thinking that on android we can also close the image by swiping from left/right edge as that acts as back button.
I think swiping down to dismiss makes the most sense in a slightly different case than ours.
Check out the GIFs at the demo here:
https://github.com/oblador/react-native-lightbox#demo
There, the image expands to fill the screen, as an overlay on top of the current route—there isn't another route that we navigate to. So it can make sense that you could drag it and swipe in pretty much any direction, and it would go away. In the GIF, they show it going away if you swipe down.
In our app, we do navigate to a different route to show the lightbox. So, to make it go away, we're pretty limited to using whatever "go back" is in our navigation system. Swiping down isn't used in any other screens to make them go away, and it would be surprising and pattern-breaking to add it here.
We could definitely consider not navigating to another screen, though.
I think we'd have a lot of trouble doing a size animation to go from the thumbnail to full-screen; that seems very difficult to pull off across the WebView barrier. If we were attached to that particular animation, I suppose we could try starting with #3426, though that seems pretty dramatic. There are other animations that might make sense, though, like fading in and fading out.
Having a nice animation between the thumbnail and the full-size view in the lightbox would be ideal -- but I think swiping down to close can still make sense without that, too.
From a user perspective, if I'm in the lightbox in another app (I just played with WhatsApp as mentioned above, and with Google Photos which is the stock photo viewer on Android), it certainly feels to me like another screen. And indeed if I do the system "back" gesture, then in both of those example apps it takes me back to the screen where I was before, exactly the same as if I'd swiped down. The animation is just somewhat different in that the image moves directly toward where the thumbnail will be, whereas with swipe-down it begins by following my thumb in the swipe.
To be clear, though:
I’m thinking that on android we can also close the image by swiping from left/right edge as that acts as back button.
@chdinesh1089 We already do this :slightly_smiling_face: Try it out and see what you think!
More generally, if you do the normal system "back" gesture then that will take you out of the lightbox and back to the message list. I just tried this on Android 10 with the "swipe from either left or right edge" gesture, and on iOS with "swipe from left edge". I believe it works the same on older versions of Android (or with the relevant option on Android 10), too, with the "back" button at the bottom of the screen.
In particular:
Instead of clicking on
xto close an image, dragging an image down to close it will make it much easier and user-friendly. It also improves reachability issues when using one-handed.
I think the normal system "back" gesture solves this problem already.
Still it would be nice to offer swiping down, too, because that's another thing people are used to from other apps.
@chdinesh1089 We already do this 🙂 Try it out and see what you think!
I do not have an android phone but I saw that we can use swipe from left edge on iPhone (and been using that. It solved the reachability issue) which I didn't know for some time.
I remember trying to swipe down when I was new to the app and I think most people would expect the same (at least most iOS users). As you said, it would still be nice to offer to swipe down gesture :-)
We've had a fresh request in chat for a version of this: https://chat.zulip.org/#narrow/stream/48-mobile/topic/exit.20image.20view.20by.20swiping/near/1573561
In that version, swiping either up or down would exit the lightbox / image viewer.
One point of comparison in particular was Discord. So I went and tried that gesture out, and here's my description of it:
I use Discord regularly, but I don't think I'd seen that gesture until just now. Trying it out, it's interesting how it behaves. Swiping left and right doesn't do anything (the image may move a bit, but snaps back); but if you swipe vertically the image moves, just on the vertical axis, and the lightbox fades out in tandem with your swipe motion to show the underlying message-list screen again.