nextcloud-libraries/nextcloud-vue

Sidebar tabs design update

Closed this issue · 6 comments

  • Remove border
  • Ellipse text instead of 2 lines

As discussed with @jancborchardt

Does it address this "feature"?
grafik

So I've been a bit reluctant with this because I think our current system doesn't work and we need to think this through a bit more. I think that we need to take a step back here and rethink how we do the sidebar altogether. I'm closing for now as this is just a cosmetic change that is not solving problems and in fact ellipsizing text on buttons is something that we've come to normalise but is just unacceptable.

Screenshot 2023-08-22 at 09 44 05

The ideal case would be that we just have 3 sidebar tabs:

  • Activity: All chronological info
  • Sharing
  • Details

Also ref nextcloud/server#658

And this issue here is precisely about the visual part, which should be fixed as well, not closed.
@marcoambrosini Stepping back to think about a perfect solution doesn't mean we have to leave the current state unwell. We need to work step by step on improving.

I thought I was the only one that disliked the border so I figured I should leave it there as it doesn't really solve much. Implemented now.
Label trimming is already in.

ShGKme commented

@marcoambrosini what do you think about some multiline tabs design when text is not truncated? Taking into account that we have many apps with many tabs, many apps that adds more tabs (to files for example) and etc. Like very classic tabs, but with this pillow design

image

@ShGKme That's one of the approaches I was thinking about, but visually they would look more like chips. I don't think it's the best approach though. I think the most viable solution is to remove the labels and have 44x44px buttons.