Skip to content

Add avatar ViewComponent

Thomas Hutterer requested to merge avatar_vc into master

What does this MR do and why?

This adds a ViewComponent for Pajamas avatars. The idea is that you can pass in a User, Project or Group and the component does the rest. Based on entity type it will be either circle or square shaped, use gravatar for users and identicon for project and groups, set srcset for high-res on retina and set the native lazy loading. See its spec file for the details.

As first usage of this component I chose the big user avatar on the profile page and the list items partial for project and groups, which are also used on that page. See !91568 (comment 1033605794)

Screenshots or screen recordings

Before After
image image

Both the large avatar and the list item avatars got a big larger, to follow Pajama sizes. This might need a UX review.

How to set up and validate locally

  • Checkout your own user profile and profiles of other users, with and without uploaded images. Check a blocked users profile.
  • See identicons (the initial letter in a colored box) for groups and projects that have no uploaded image.
  • See gravatars being used for the user avatars, which are also always round.
  • Checkout the Overview, Projects and Groups tabs to see the component being used in the lists.
  • Generally you can use the web inspector to verify with the HTML comments in there if it's the view component that is rendered.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Thomas Hutterer

Merge request reports