Mobile only: Replace Context menu with bottom drawer

[db-ot]

User Story

As a user who uses the context menu mobile, I want to see the name of the selected element(s), so that I'm reassured that Ive selected the right one(s).

As a user who uses the context menu mobile, I want an explicit option to close the menu so that I know how to close it.

As a user, I want a bottom drawer on my mobile device so that I can quickly access focus actions without leaving the current page, as this is a familiar and intuitive mobile experience.

As a user, I want to easily open and close the bottom drawer by tapping or swiping, so that the interaction feels natural and comfortable.

As a user, I want the bottom drawer to be responsive, well-organized and spaceoptimized, ensuring it is readable and usable across different mobile devices.

User Value

• Touch-friendly – optimized for finger interaction
• Accessibility – screen reader and keyboard friendly
• Familiar interaction pattern – matches standard mobile / app UX behavior
• Space-saving – makes efficient use of limited screen space ( no surrounding white space )
• Contextual actions – displays only relevant options
• Easy to dismiss – can be closed quickly and intuitively

Acceptance Criteria

• context menu gets replaced by bottom drawer on small mobile viewports (tablet as well?)
• Tapping the "X", click out or (swiping down -> will be a separate story) closes the entire drawer.
• Add File / Foldername on top of the drawer
• The drawer is a modal drawer (same as the current context menu actually)
• heigth of the drawer:
  • max. height is 66% of the screensize (unsure if this is a good value, lets play around and find out)
  • if there are only a few (2-3 options) in the first menu, the drawer height adapt to the height of these 2 options -> drawer is smaller than 66%
  • to reduce jumpyness:
    • submenus have at least the same height like its parents (usually 66%)
• Only one menu level is visible at a time to reduce cognitive load.
• The drawer must follow touch-target size guidelines (min. 48×48dp). ( not 100% sure )
• If the content of the drawer requires scrolling, the last visible item must be cut off, so that the user knows that there's more.

please also check here some UI Experiences & Examples:
https://m2.material.io/components/navigation-drawer#bottom-drawer

Problem

resource name is not visible any more:

Mockups

will follow - direct examples for opencloud

Current place where we can show bottom drawer:

1. context menu for files / folder
2. context menu for usersettings in admin
3. context menu in spaces administration
4. context menu in groups administration
5. maybe also creating a new document behind the + button

Suggestion:

With x and namefile

[db-ot]

connected with

#930

#929

[kulmann]

Shouldn't we use the bottom drawer for any drop and select? Like e.g. the view options (gear-icon at the top right), share, space and public links roles (right sidebar), etc?

[db-ot]

I learned it's the same component. If so, it's okay from the product side.
Just a small point of awareness:

When a bottom drawer contains an input field or a dropdown, we should double-check if everything works correctly.
Input fields automatically trigger the keyboard on mobile devices, and dropdowns (for example, "items per page" in the view options gear) require sufficient space.

[JammingBen]

We decided to do the swiping part as a follow-up because it requires some attention to detail which might not be so straightforward to implement.

Also we'd like to raise this for discussion again:

If the content of the drawer requires scrolling, the last visible item must be cut off, so that the user knows that there's more.

We don't think it's solvable, at least not in a generic and clean way. There seems to be a visible scrollbar though, so that might be sufficient to indicate that there is more content.