Quasar: [V1 - request] swipe down on Dialog

[mesqueeb]

I love <q-dialog position="bottom"> and use it all the time. Especially since Beta 11+ it's much more snappier!

I'd love to be able to swipe down on the modal to close it again. Especially when the modal has a lot of content and almost goes to the top of the phone, it feels really natural to be able to swipe down on it to close it again.

EDIT:
The swipe-to-close extension is now available!

[mesqueeb]

This is my current implementation using Quasar's Touch-Pan.

I might release it as a Q-Dialog wrapper or app-extension if there's any interest.

Video:
https://www.dropbox.com/s/hiwicra5adirdth/Swipe%20down%20on%20modal%20from%20bottom.mov?dl=0

[smolinari]

Hey, @mesqueeb - That's pretty cool. Just remember though, the component should also be desktop "closable" with a mouse click too. 😄 Maybe add a close "X" button top right of the dialog? Then call it QBottomActionCard. 😁

Scott

[mesqueeb]

on desktop it's still closable by:

1. clicking at the very top, the small area that Quasar reserved where you see the darkened background
2. pressing ESC

So actually in my opinion i wouldn't want to add any close button. : )

[thgick]

This is great @mesqueeb - I'd also say that a close button could be added manually inside the dialog and conditionally (on desktop). Beside your 2 close options it would also be closable everywhere outside the dialog, right?

[rstoenescu]

Sounds good as an App Extension.

[smolinari]

Yes, I was thinking that too with the name, but forgot to mention making it an app extension and sharing it. :grin:

Scott

[mesqueeb]

Everyone!!
I have published the app extension with success!

You can install it with quasar ext add swipe-to-close.

See usage Readme:
https://github.com/mesqueeb/quasar-app-extension-swipe-to-close

I'm gonna find somewhere over the next week to improve the ReadMe by adding demo & GIF. 📄

[smolinari]

Cool. That is a totally different take on where I thought the component would be going.

I'd also venture to say, the component would become excellent, if it would be swipeable, no matter how the dialog is brought into the screen.

Great work! 👍

Scott

[mesqueeb]

I finished the DEMO and GIF for the swipe-to-close extension!

Now compatible with Quasar V1 beta 0.15.

[rstoenescu]

@mesqueeb can you change the link to Quasar docs to point to v1 docs instead of current 0.17 one? Good app extension, btw!

[mesqueeb]

@rstoenescu Thanks! The url jumps to v1. : )