Skip to content

App name text display improvements #22845

@jancborchardt

Description

@jancborchardt

So @karlitschek and I were chatting about how we can make it so that the app names in the navigation are not cut off so much. We are happy with the general look and approach, this should mostly be fixable with some tiny adjustments.

image

Small adjustments

  1. Make sure the hovered/focused app gets more width. Need to make sure the width of entries doesn't jump. Con: Names left and right will get overlapped, and doesn't fix the cutting of non-hovered app names.
  2. Also reduce the text size of the non-hover/focused apps slightly, with a quick size animation so it’s not jarring. Con: Smaller text size.
  3. Since the issue got worse when we increased the font size, we can also increase the navigation height and entry width. Con: We'll be able to show slightly less apps due to slightly increased width, but that's probably fine?

We could also combine different options, e.g. 1, 2 and 3 to improve step by step.

Bigger changes

Very unlikely that we should do any of these since we used almost all of those before and changed from them because of the cons listed.

  1. Show the app names right of the icons instead of below. Cons: Takes a lot more width for each entry so we can show less, and will look strange or jump unless we show the name permanently. Entries will not be the same width.
  2. Go back to only showing the name of hovered/focused app in a tooltip. Con: Same issue we had before, it could be unclear which app the icons are for if you are not in Nextcloud every day, and you need to hover every one (a.k.a. mystery meat navigation).
  3. Put all app names in a menu, also like we had it some time ago before using the header nav. Con: People might not know Nextcloud has more apps (which is why we switched to showing them directly) and it's another step to get to them.

@nextcloud/designers what do you think? cc @juliushaertl since you worked on it before and cc @ma12-co since you are always interested in the app navigation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    0. Needs triagePending check for reproducibility or if it fits our roadmapdesignDesign, UI, UX, etc.papercutAnnoying recurring UX issue with possibly simple fix.

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions