Skip to content

Ellipsize user name in top right #3273

Description

@jancborchardt

Currently there is no width limit on the username. This can lead to overlays with long names and narrow screens. For that we should either have a maximum width, or flexible so it automatically ellipsizes when the space gets narrow.

This is probably easy now with the switch to flexbox. Before it was a bit finnicky. cc @nextcloud/designers

Activity

  1. added this to the Nextcloud 12.0 milestone on Jan 26, 2017
  2. self-assigned this
    on Jan 26, 2017
  3. claell commented on Jan 26, 2017

    @claell

    A different approach would be the following:

    • Currently the name is displayed when there is no image set.
    • Instead of showing the name one could display an image with the initials like in the settings where an image can be set.
  4. skjnldsv commented on Jan 26, 2017

    @skjnldsv
    Member

    I would agree to go avatar only in the case of a too narrow screen.
    We could ellipsis for too long name but it could be great to go avatar for small screens

  5. claell commented on Jan 26, 2017

    @claell

    Currently avatar will be always used when set, so why not have it also on larger screens when not set?

  6. skjnldsv commented on Jan 26, 2017

    @skjnldsv
    Member

    I don't know. This is a good question.
    @nextcloud/designers what do you think?

  7. MorrisJobke commented on Jan 26, 2017

    @MorrisJobke
    Member

    I don't know. This is a good question.
    @nextcloud/designers what do you think?

    Because we don't want to placeholder be there. The placeholder is okayish, but not super perfect ;)

  8. jancborchardt commented on Jan 27, 2017

    @jancborchardt
    MemberAuthor

    We decided against this actually because then you have a colored placeholder there in the top right. And the color probably clashes with the Nextcloud blue, or theme color. That’s why we use a name.

  9. skjnldsv commented on Jan 27, 2017

    @skjnldsv
    Member

    This is indeed a good decision.
    Thanks for the heads up @jancborchardt

  10. claell commented on Jan 28, 2017

    @claell

    Thanks for explanation. Makes sense, if the colour of the placeholder avatar is random.

  11. skjnldsv commented on Feb 1, 2017

    @skjnldsv
    Member

    What about removing the user name and put it inside the dropdown menu on narrow screen?
    We could use something like a setting icon instead?

  12. MariusBluem commented on Feb 1, 2017

    @MariusBluem
    Member

    What about removing the user name and put it inside the dropdown menu on narrow screen?
    We could use something like a setting icon instead?

    Wow. Nice idea @skjnldsv 👍 I thought about something like this, where you can also change your spreed/chat online status and maybe see your quota:

    img_0409

  13. 6 remaining items

  14. eppfel commented on Feb 7, 2017

    @eppfel
    Member

    I'd go for a single-user icon. I mean it would duplicate with the personal menu item, but for non-admins, that is actually what the menu is for: profile (personal), help and logout.

  15. MariusBluem commented on Feb 7, 2017

    @MariusBluem
    Member

    A single-user icon would conflict with the contacts menu-icon which will be introduced with Nextcloud 12 ... @ChristophWurst - see #3233

  16. eppfel commented on Feb 7, 2017

    @eppfel
    Member

    Was not aware. What if we use a non-colored avatar then? There was a issue about changing the default avatars. Maybe we have to think this through more...

  17. skjnldsv commented on Feb 7, 2017

    @skjnldsv
    Member
  18. eppfel commented on Feb 8, 2017

    @eppfel
    Member

    I was referring to that comment. Therefore I particular propose a

    non-colored avatar

    Or am I lost here?

  19. skjnldsv commented on Feb 8, 2017

    @skjnldsv
    Member

    Hum, could be nice indeed!

  20. jancborchardt commented on Feb 14, 2017

    @jancborchardt
    MemberAuthor

    Sooo this is a great idea -> can you open a separate issue for it @MariusBluem? :)

    Because long usernames are still an issue and unrelated to this. Let's not derail the thread. ;)

  21. skjnldsv commented on Feb 14, 2017

    @skjnldsv
    Member

    Well, if we go for icon only then the long username will be irrelevant right?

  22. jancborchardt commented on Feb 14, 2017

    @jancborchardt
    MemberAuthor

    Sorry but the top right should always be personalized. Either profile image or ellipsized name. No generic user icon because then you don't know immediately with which user you are logged in if you have multiple.

  23. skjnldsv commented on Feb 14, 2017

    @skjnldsv
    Member

    An avatar with fixed colour is a good idea though, and it will help fix nextcloud/notifications#60.

    See @eppfel's comment

  24. jancborchardt commented on Feb 22, 2017

    @jancborchardt
    MemberAuthor

    A non colored avatar has two issues:

    • We use colored avatar placeholders everywhere else. It’s confusing and not consistent.
    • It would be the first letter of the name. So basically how a name would look ellipsized on a small display. On big screens it’s fine though.

    Think responsive, folks. ;) This is only an issue on small displays, on big screens it’s super nice how we do it. This is simply about ellipsizing long names correctly, nothing more and nothing less. :)

  25. skjnldsv commented on Feb 22, 2017

    @skjnldsv
    Member

    I honestly don't see the point of seeing my username on the header in my opinion. :)
    But I can understand that people wants to.

    Github just put the avatar for example, and without displaying the username.

  26. eppfel commented on Feb 23, 2017

    @eppfel
    Member

    I see it as @skjnldsv It is only relevant for multi accounts, which I believe to be the minority.

  27. MorrisJobke commented on Mar 26, 2017

    @MorrisJobke
    Member

    This is fixed with #4074

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

1. to developAccepted and waiting to be taken care ofdesignDesign, UI, UX, etc.enhancement

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions