Overflow icons: Switch from scroll button to dropdown

[pedropintosilva]

Describe the bug

Currently when elements do no fit we use w2ui-scroll-right.

Notebookbar:

Classic:

This has a few drawbacks:

• Depending on the window's width the scroll button can actually cover part of the icon that is under
  • User see the icon under and tries to click; nothing happens plus the whole thing slides in some cases creating another scroll button on the left and occupying even more space while not showing more icons
• On not so big screens:
  • It forces more swipes/clicks and more muscle memory:
  • Classic mode: to click the farthest icon on the right and then to the farthest icon on the left: -1. Click+click (till reach right edge); click in the desired icon -2. Click+click (till reach left edge); click in the desired icon -3. repeat this multiple times if you are not sure where the icon is
  • Notebookbar mode: the same as classic but with additional caveats:
    • switching between tabs
    • losing the scroll position constantly (while switching and dialogs etc)

Suggested solution

• Ditch w2ui-scroll and use a singular overflow button on the right for those cases
  • This would be a big plus in terms of maintenance
• This would solve all the problems above mentioned
  • If the screen is not wide enough it will always hide from the side same side
  • it will not be hard on muscle memory (since elements do not move around)
  • Less clicks/taps when trying to find something
• On classic mode the overflow button should be always before the sidebar and collapse icons similar as it happens on Gdocs for example:

What would happen when on mobile?

In this case I would let it as it (visually) is because:

• it's probably better for one handled usage (sliding in the bottom edge VS trying to reach the farthest icon on the right to open a menu to then try to reach with the same hand the topmost in a list of 6 items
• but this doesn't mean we need to keep the js scroll thingy around (we are actually not using it for swiping on mobile, we are using plain old css there and using the scroll elements just to have a visual cue so we are not really dependent on JS there)

[Andreas-Kainz]

I understood the issue but I'm not 100 % sure if an overflow button is the best solution.

scroll

pro:

• work well on touch devices (with swipe)
• with mouse wheel support it would well on the desktop

con:

• scroll button hide commands
• losing scroll position

overflow button

pro:

• No UI jumping issues

con:

• hide content
• didn't work for notebookbar

other solutions

• dynamic preview numbers #1587 is more flexible on larger screens
• other ideas

[pedropintosilva]

I understood the issue but I'm not 100 % sure if an overflow button is the best solution.

scroll

pro:

Yes, please refer to What would happen when on mobile? (that's why on mobile it should remain as scrollable but without the JS part we do not need it now)

con:

there are more drawbacks please refer to This has a few drawbacks

overflow button

pro:

* No UI jumping issues

• and solves the This has a few drawbacks

con:

* hide content

• in the current solution we also hide content and worst we then show it while hidden other content so we never have everything shown. Plus we make harder on muscle memory by shifting the whole element

* didn't work for notebookbar

other solutions

* dynamic preview numbers #1587 is more flexible on larger screens

To leverage the flex we have in the styles preview (notebookbar) is a good idea and a good addition to the UX but not really directly related to this issue

[Andreas-Kainz]

Before

Notebookbar:

After

left/right click commands icon in the tab area of the notebookbar.

• will be visible if there is not enough space
• less disturbing
• when there is enough space for all commands the icons are hidden and you could shown an icon to hide the notebookbar commands.
• move left/right, hide notebookbar and show/hide sidebar are all command's for the app UI so they are well grouped together.

[Andreas-Kainz]

for usability I would suggest to have an icon to show/hide notebookbar (like MSO any many other tabbed layout apps has)

[Andreas-Kainz]

and if the window is smaler than the notebookbar width needed, there will be two buttons for left and right scrolling.

[pedropintosilva]

Oh now I understand your suggestion but I see a couple of problems there:

• Using the same spot for similar icons but with different repercussions (sometimes it's a top level action that hides the tab's contents and sometimes works and sometimes works as low level action to navigate tab's contents)
  • BTW: we already have a way expand and collapse tabs' content (just by tapping again the current tab)
• Placing navigational arrows there can be misleading (User: Ah nice I can change tab order etc)
  • They are still arrows working and having almost all the same problems as the current solution

[Andreas-Kainz]

@quikee implement this new search command feature for LibreOffice which should be placed somewhere at the notebookbar tab area.

From Netflix I learn that an search can have very useful default values when nothing was inputted.

What if when command's that didn't have space were available at this search field. Maybe with a changed search label?

Than you have one place where you get command access.

[Andreas-Kainz]

At LibreOffice each tab has on the very right an tab label with commands that are not so offen used. When there is not so much space, commands will be available within the drop-down widget so you have two options for commands, visible at the toolbar or behind the label drop down.

[Rash419]

Something like this is there in libre office

when you click on it , it shows remaining buttons