[New module][WIP] Flyout

[prudho]

Description

The following PR implements a new module called Flyout. It's based on my own ES6 fomantic code, which is derived from sidebar, and CSS code is based from @jamessampford #1885 tryout.

For now this is just an embryo, and we need to discuss further to decide how we implement it.

Testcase

JSFiddle

Screenshot

Related issues

#121, #1885

[lubber-de]

Looks very promising! 👍🏼 I change this PR into Draft, if you don't mind :) At least some CSS adjustments are needed from a first quick check. I will test this more deeply later

[prudho]

Yeah i'm not very fluent with CSS yet...

Here are some of my thoughts about module:

• overlay should be the default transition. Maybe we should remove the push transition, code would be more clear and I don't think that a flyout should push page content.
• dealing with width should be different from sidebar. IMHO, the width classes thin and wide are not really adapted. Maybe we could use a grid system instead, like ui eight wide flyout dimensionned from context width.
• Mobile handling: the @jamessampford's idea for a fullscreen parameter is cool, and should be a default behavior.
• Adding a pure js implementation like we did for modals seems to be a great idea.

[testinfected]

Hi guys, what's the status on this? Our team is very much interested

Thanks

[prudho]

Hi @testinfected. This is still a work in progress for now, as I barely touched it since July. But it should be released in 2.9 (let's say before the end of the year). I'll push some commits later today.

[testinfected]

Thanks @prudho I'm looking forward to 2.9 then

[lubber-de]

I played with this now, here are my thoughts (not meant as a complete review as it is declared as WIP)

Overall

I havent really compared all the code, but i feel that most of the code is the same as for sidebar, so i thought if there is a possibility to just merge them and make flyout a variant of sidebar to have a smaller codebase. 🤔

Quick feedback

• test, if it works together with sidebar (using same pusher element)
• prepare more examples in a jsfiddle to play with/show all the features/variants (will also be a good base for the later docs page)
• fix the vertical scrollbar for the whole (left/right) flyout appearing all the time
• define "multiple", so a previous flyout gets a dedicated inner dimmer (like modals have)
• create flyouts via pure js properties (you already mentioend that above)
• put more of css values from .less to .variables to make them customizable
• the "x wide flyout" approach (like grid) seems to be a nice idea at first
  • however that would mean the width is always a percentage
  • Especially on mobile devices the "x wide" approach wont work well
  • it is not needed at all when using "top/bottom" flyouts
  • So i think we might implement this only in addition to "very/wide/thin"
• veryThinWidth: 60px seems very less for what a flyout is supposed to be (an alternative to modal). 60px would be more like a classical quick icons menu showing up (which we already have sidebar for). Of course, I know this value is customizable :wink:

[jamessampford]

If merged with sidebar, would need to consider if can offer different default settings for a flyout and some of the separate flyout-specific settings could possibly also cause confusion (though docs could possibly point it out)

That said, I wonder if shared functionality could be bundled into some kind of base class with both sidebar and flyout extended from the base class (or if flyout could extend/override sidebar)?

it may be easier if just overlay and not push, but then loses some flexibility

With regards to mobile, my original thinking was to have a setting to force mobile to fill max width … an alternative could be to use attributes, eg. data-width=“200px” data-mobile=“100%” with something similar in place for height for top/bottom (which could possibly allow for mobile menus) … think x wide just tries to bring some consistency, isn’t there also something like x wide y wide mobile?

[prudho]

I've added some commits.

• Scrollbar is no more visible unless it's necessary.
• Added x wide variation, based on grid module. I let very/thin/wide, time will tell.
• Added fullscreen variation, automatically enabled if mobile screen is detected.

I disagree merging it with the sidebar module, both have different purposes. Merging them would create issues since some behaviors will work as intended for one but not for the other.

[prudho]

Thanks @lubber-de ! Don't hesitate to suggest me changes to make the code better, as I already said CSS is a pain for me :)

[prudho]

I've updated the JSFiddle with added scenarios. Looks like I have some errors on content height that I need to fix before going further...

[prudho]

Update JSFiddle again, whith more example (very/thin/wide), a fix for content height in specific context and increase width values.

I think that, in term of functionalities, module can be proposed as it in 2.9. Some clean up and hardcoded variables to eliminate and it can be shipped. What do you think @fomantic/maintainers ?

[lubber-de]

@prudho We should at least also implement

create flyouts via pure js properties

before releasing this , as we now already have that feature for modal and toast and would be consistent.

You might adopt that from modal as it also has a11y support, tabbing support, close focus, etc. (and infact flyout is a visual combo of modal and sidebar)

[lubber-de]

@prudho Is this still considered to be part of 2.9.0 or probably 2.9.1+ ? So, are you done with everything so we can do a full review? (PR is still in draft mode)

You partly adopted the pure js implementation from modal but left out aria-support, tabbing support,close focus (all which i would have expected to be adopted as well as it is part of the pure js implementation from modal, so either you had an older codebase or you left it out for a reason). On the other hand you copied the alert/prompt/confirm config templates code from modal. That's why i am not sure if you think everything is finished :)

[prudho]

@lubber-de thanks for the feedback. Yes I still plan it to be released in 2.9... I miss time actually but i'll review your requested changes and create the doc ASAP.

For me the module can be released even if all features are not implemented or optimized yet. Feedback from users is always a good sight for what can be fixed and patches like 2.9.1 and so on will be perfect for that.

[prudho]

@fomantic/maintainers I think Flyout module is ready for release now. Code has been cleaned and everything looks good from my POV. Many thanks to @lubber-de from helping me about the CSS stuff that I don't rule yet 😄 and @jamessampford for the initial code and idea.

For now module is pretty simple, but incremental versions of fomantic coupled with user feedback will help us to find the right direction of what we should do to improve it !

Documentation writing has started. If Docpad is kind enough to let me finish without crashing, it should be ready for the end of the week.

[prudho]

Some issues to address before merging:

• Some events (here the onHide event) happens more and more time at each occurence.

• Despite setting scrollLock to true, scrolling is still enabled on the dimmed page.

[lubber-de]

Despite setting scrollLock to true, scrolling is still enabled on the dimmed page.

I fixed this for sidebar by adopting the same logic from modal in #2436 , so flyout could simply adopt the same i believe :)

[prudho]

@lubber-de thanks for the scrollLock logic, now it works flawlessly :)

[lubber-de]

I am testing this again now, so we can merge it for 2.9.0 and enhance it in further patch releases 😉

[lubber-de]

Docs added by https://github.com/fomantic/Fomantic-UI-Docs/pull/361