Add avatar ViewComponent
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 |
---|---|
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.
-
I have evaluated the MR acceptance checklist for this MR.