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 ? 🤔

[juliusknorr]

Since we just have one depth level we could also just make the background of the child elements light gray to indicate that they are children.

[jancborchardt]

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 ?

@skjnldsv that’s why in the mockup I added some whitespace and wrote above:

(We can choose if we want to use whitespace or a slight line of light grey border, which only shows when the menu is open.)

Border is good because we don’t need to move the entries for whitespace, but in general we use very few borders in our design and whitespace is better because it has inherent separation insead of added elements.

Since we just have one depth level we could also just make the background of the child elements light gray to indicate that they are children.

@juliushaertl if you try that out, it looks pretty ugly though. :\

[jancborchardt]

Take another look at what I posted above, and also now with added comparison and borders for separation.

The left has whitespace to separate the groups – maybe it needs more whitespace. The light border on the right makes it very clear, but looks too boxy for Nextcloud and not light.

[juliusknorr]

@jancborchardt I think the additional spacing works quite well here with removing the indentation. However I don't think this is something for all submenus like in the news/mail app. In files the Favorites/Shares work more as a headline. If we have a folder hierarchy indetation is quite important I think.

[MorrisJobke]

Let's move this to 16 and maybe backport some fixes.

[jancborchardt]

cc @jenniferpiperek on this regarding mockups and design system exploration. :)

[MorrisJobke]

Cleared the milestone.

[szaimen]

Hi, please update to 24.0.8 or better 25.0.2 and report back if it fixes the issue. Thank you!