Polishing fixes for Favorites and Shares submenus

[jancborchardt]

• The highlight bar of the subentries is floating in mid-air. Should also be on the left side of the viewport. (We need to take the padding from the li and instead add it to the a)
• Even if the menu is collapsed, the li elements are invisible but clickable. (Collapse the share menu and hover/click below it)
• That’s also a problem when you tab through the elements with a keyboard. They are invisible but seem to receive focus
• The triangle arrow for collapsing the folder should only show when the folder entry itself is hovered/focused, not when the subentries are hovered (cause the animation is very distracting when wanting to click a subentry)
• When navigating via keyboard, having focus on the collapse/expand function should visibly show the arrow, just like when you hover

@skjnldsv @juliushaertl @MorrisJobke

[nextcloud-bot]

GitMate.io thinks possibly related issues are #10224 (Fix formatting of email and circle shares), #10223 (fix selection of share provider), #5408 (Files: not all shares are shown if folder is marked as favorite), #10046 (Fix getting the information of a group share as a sharee), and #2193 (Files: show favorites column in Shared views as well).

[MorrisJobke]

@jancborchardt @skjnldsv Move to 15 and maybe we can backport fixes later

[skjnldsv]

That’s also a problem when you tab through the elements with a keyboard. They are invisible but seem to receive focus

Then we need to drop the animation :)

The highlight bar of the subentries is floating in mid-air. Should also be on the left side of the viewport. (We need to take the padding from the li and instead add it to the a)

Looks really weird :/

[jancborchardt]

Then we need to drop the animation :)

Is there no middle ground? Like applying display: none; through JS afterwards`? Yes I know it’s not clean and CSS only, but UX and accessibility is more important than underlying code. And right now it’s really not good for people who can not use a mouse.

Looks really weird :/

This looks great actually. No floating blue bars in mid-air. 🎉 Could you open a pull request?

[jancborchardt]

Another idea to make the subentries less weird: Since we only have one level in Files anyway, we don’t need to indent them:

This is also how normal file managers like Finder on macOS or Nautilus on GNOME/Ubuntu do it. Then we don’t have the floating bars either. (We can choose if we want to use whitespace or a slight line, which only shows when the menu is open.)

And yes I know, it’s adjustment from the standard, but a standard is never set in stone. ;) In the Mail app for example we do it like that already as it would be super weird to have the Inbox, Sent, Trash etc of an account indented already.

[skjnldsv]

Yes I know it’s not clean and CSS only, but UX and accessibility is more important than underlying code.

And that's how we got to the point where no one knows how to maintain our server core code anymore! :)
Nope, clean code and maintainability is always the top priority. Otherwise you end up with crazy complicated thing and poor performances just to have a proper ux. 😕

Until we have things properly written in a way css and js are properly working together, I don't want to add separate functions that everyone will forget and overwrite later on. 😞

Though, your idea of putting everything flat again is not bad at all. The best would be to find a way to indicate that the sub-entries belong to a main one. Indenting was one of the possibilities, but I'm sure we can find others? What about a tiny left border ? 🤔