Swipeable Bottom Sheet (new component)

rodrigoslayertech commented 4 years ago

Describe the solution you'd like The world's most used mobile apps in the top 10 massively uses a Swipeable Bottom Sheet with the most varied components and layout within it, not just a menu of actions displayed as list or a grid.

I would like to have a Swipeable Bottom Sheet component in Quasar with this option to compose it with any component with two features: 1) Option to adjust its height, make it fullscreen in mobile by sliding up to the top and dismiss if you swipe down quickly. 2) Create and keep a footer fixed while active or the possibility to use the QLayout component inside it.

I still don't know why Quasar doesn't have a Swipeable Bottom Sheet component like this: https://github.com/atsutopia/vue-swipeable-bottom-sheet Why not? Is this a new component concept in the Material Design specification??

Describe alternatives you've considered 1) QDialog with position="bottom" with a new boolean prop (swipeable) to make it Swipeable (adjust the heigth or dismiss with swipe).

2) Add the prop boolean swipeable in Bottom Sheet plugin and add the possibility to compose other components, instead of being limited to just a list of objects to build a menu of actions only.

Additional context (examples)

Instagram - Inputs + List + Buttons... within Swipeable Bottom Sheet

Telegram - An image gallery + fixed footer with buttons in grid layout within Swipeable Bottom Sheet:

OneDrive - Action menu within Swipeable Bottom Sheet:

doc-2020-07-31-12-57-30

Facebook - Swipeable Bottom Sheet with fixed footer (in FB comment):

doc-2020-07-31-12-54-27

pdanpdan commented 4 years ago

It's not so difficult to do it adjusted to your needs. It would take less than recording all these images :)

https://codepen.io/pdanpdan/pen/ExPqZbK

The problem is that it's hard to do it as a generic component because each use case is different.

rodrigoslayertech commented 4 years ago

@pdanpdan, Does your example work as a Bottom Sheet? The top bar that is used to swipe is never hidden, does it always appear there in the footer? The fixed footer is only while the Bottom Sheet is active if you have a different layout: see the example of the Bottom Sheet that appears in the Comment on Facebook App (last GIF and first example).

Why not just to start with the current Quasar Bottom Sheet plugin making it swipeable by setting a default minimal breakpoint height to auto dismiss it after release the touch? Example: if the height reaches at least 50px when it is swipe down and the finger on the screen is released, hide the entire Bottom Sheet (and the topbar, of course).

  this.$q.bottomSheet({
    message: 'Bottom Sheet message',
    swipeable: true,
    swipebar: true, // If swipebar is true, it is only possible to swipe using the top bar. If false, the entire Bottom Sheet is swipeable.
    breakpoint: 50 // default value
  })

I think the easiest solution would be to add an prop to make a Dialog with position="bottom" swipeable by setting some directive for this in QHeader if it had a QLayout for example. So it is possible to compose this fake "Bottom Sheet" with any component and still play with the most varied layouts: fixed footer, etc.

pdanpdan commented 4 years ago

Why not just tweak the example not to show the bar? It's all there, just that exactly how I said everyone wants something else. But I can infer from your comment you haven't even checked the code in the codepen.

rodrigoslayertech commented 4 years ago

I checked all the code.

I believe that we are discussing a solution to be implemented within the Quasar core and not a specific solution for me.

I just thought that you had confused the fixed footer, so I tried to clarify that this is the example of the last GIF, a Bottom Sheet to comment there on Facebook.

IlCallo commented 4 years ago

@slowaways what you are referring to is a mix of backdrop and bottom sheet from material design spec. Both are relatively recent (especially the former) and the version with the drag-bar isn't even officially mentioned AFAIK, even if it has been used into Google Maps for years .

I also checked other material-based UI libraries and could not find a similar component, feel free to provide resources on the topic.

I like the component idea, but it should probably be added as a standalone Quasar App Extension until the spec is settled and stable. Would you like to give a try? :)

rodrigoslayertech commented 4 years ago

@IlCallo Why does Quasar have to strictly follow the specification? This is an overly important and massively used component. I don't know why there is no specification for it.

I'll try to work on it through the QDialog code base. Just try to add the "Swipeable" part.

pdanpdan commented 4 years ago

@slowaways is it so difficult for you to do basic adjustments to an already complete component to adjust it as you want it?

rodrigoslayertech commented 4 years ago

@pdanpdan That's what I'm going to do. I'm just going to create the "Swipeable" feature within the QDialog component. But I intend to send PR to the Quasar repository if it looks good. I intend to use this component in several of my projects.

IlCallo commented 4 years ago

Why does Quasar have to strictly follow the specification?

It doesn't have to, but following a spec makes it easier to maintain the codebase :)

Unstable or missing specs means that at some point we would probably need to change the component implementation or aesthetic, and this would generate a breaking change. This in turn would force us to:

just break every existing apps using the previous version (very bad)
release a new major version (still bad, we can't do it for every breaking change and we must accumulate them in batches)
support both the old and the new as opt-in (bad on our side, we must maintain the same code twice)

This is just one of the reasons following specs is a good (and future proof) idea, there are many others.

But if you write an app-extension providing this component and it gets major traction, we could consider to integrate it into the core UI. This is the compromise to allow everyone to get the component they want and still keep the framework stable and easy to maintain

IlCallo commented 4 years ago

@slowaways have you started working on this? I may create it as an UI AE in next few weeks, if you started and have some advices, please share

rodrigoslayertech commented 4 years ago

@slowaways have you started working on this? I may create it as an UI AE in next few weeks, if you started and have some advices, please share

I have not started yet.

To make the functionality look like the examples above, I thought of a new property in the Touch Pan Directive: handlePan ({ evt, ...info }) {{ info.speed }} -> 10 (pixels per second slid) A property called "speed", which measures the number of pixels per second slid while panning. With that, is possible to detect if the user wants to dismiss the component, quickly swipe it down, for example. For this to work, it was only necessary to create a logic that defined a speed limit to, if it exceeds that limit, automatically hide/dismiss the Swipeable Bottom Sheet component.

handlePan ({ evt, ...info }) {
  if (info.speed > 9 && info.direction === 'down') {
    this.dialog = false // Dialog model
  }
}

To calculate the speed of pixels per second slid on the screen, you can do this using the position, delta and duration properties and setTimeoutin loop of 1000 ms.

pdanpdan commented 3 years ago

cross reference: https://github.com/quasarframework/quasar/issues/7541 https://github.com/quasarframework/quasar/issues/5202

bake09 commented 2 years ago

@pdanpdan @slowaways Thank you for the codepen Example: I forked your Pen and try to add a "click-outside to close" functionallity...

I used a additional div at the bottom
add z-index to the card and div.
try to give a dynamic background transistion due rgba

@pdanpdan Can you give a look please? is this good practice?

https://codepen.io/bake09/pen/jOGLyya

Thanks very much

pdanpdan commented 2 years ago

LGTM, just a few tweaks: https://codepen.io/pdanpdan/pen/yLzogKq?editors=1010

hide backdrop when in handler mode
order backdrop first and drawer second so you don't need zIndex

douglasg14b commented 1 year ago

Really just a bottom sheet that works like the side nav does, or just a base component that has the same swipeable behavior as the side nav drawer, but in any direction would be nice...

FadhiliNjagi commented 1 year ago

The component being described here is a draggable bottom sheet (with a drag handle). It's now part of the Material Design 3 spec https://m3.material.io/components/bottom-sheets/overview .

I keep seeing them on Twitter (the website and PWA) on mobile and I'm like how can I add this to my next UI!

DaleMckeown commented 9 months ago

Yes, now that this is part of Material Design 3 spec, hopefully this will be implemented in Quasar?

quasarframework / quasar