App navigation design issues

[juliushaertl]

Apps might have a name that is too long to fit the 50px space that is available in the app menu (this is usually an issue with translations):

Just adjusting the width to fit doesn't work properly since this would mean that the app icons change position on hover:

I discussed this with @jancborchardt already where he proposed a flex layout where the app names would be a separate row of flex items, however this will also not work properly since then we can not detect the hover on the combined icon+text dom elements anymore.

Maybe someone of @nextcloud/designers has an idea how we could solve this in a sane and elegant way.

[juliushaertl]

As a sidenote, the background color we had for the label was removed due to the gradient in the header, so we could add this back for plain colors (which is the case with theming) however this will not work with the new dashboard UI (#22143) nor the default Nextcloud blue gradient.

[YouveGotMeowxy]

How about just not showing the labels as text under the icons, and just show the icons; then hovering the cursor over the icon will display the standard tooltip with the app's name?

[jancborchardt]

How about just not showing the labels as text under the icons, and just show the icons; then hovering the cursor over the icon will display the standard tooltip with the app's name?

We did this previously, however the issue is that we can only show 1 label at a time that way. The point of showing them all was that people who don’t use Nextcloud all the time know what is what quickly.

[jancborchardt]

A solution which would not look so good but be reasonable and fix the issue at hand is to add a background to the app title – as before already and as discussed – and just accept that it will look different on the various backgrounds. We could use the primary color for it to look the least out-of-place, and use var(--border-radius-pill) for it to blend nicely?

[jancborchardt]

Hm … doesn’t look so good:

I discussed this with @jancborchardt already where he proposed a flex layout where the app names would be a separate row of flex items, however this will also not work properly since then we can not detect the hover on the combined icon+text dom elements anymore.

Could we not expand the name of the hovered app, and cut the ones left and right accordingly?

[juliushaertl]

Could we not expand the name of the hovered app, and cut the ones left and right accordingly?

At least I didn't find any sane way to do that.

[STaRDoGG]

I didn't look at what framework(s) they're using (update: angular), but what about something like Hotjar does?

[juliushaertl]

@STaRDoGG Let me quote @jancborchardt from earlier here:

We did this previously, however the issue is that we can only show 1 label at a time that way. The point of showing them all was that people who don’t use Nextcloud all the time know what is what quickly.