Add role banner under user avatar #3400
Conversation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Nice work!
The spec is not exactly clear where to show the status icons. It mentions translations (suggestions) and comments and shows the status icon in the Profile. It also says "Status Icons: Show status icons universally in the user avatar".
I am not sure we should show them everywhere we show the avatar. In the Contributors dashboards and user filters, we already show the roles. I also don't think it's useful to show it in the Profile icon or in the Settings page, since that's only visible to the user.
How about we keep it just next to translations and comments (covered by this patch) and also add them to the Profile page? @flodolo Given that you were the reviewer of the spec, what's your take on this?
translate/src/modules/history/components/HistoryTranslation.tsx
Outdated
Show resolved
Hide resolved
Looks like I didn't actually review the final version 🤔 I agree on showing the status only in translations and comments:
|
|
OK, so let's keep it like that. On a second thought, it's indeed not necessary in the Profile page, where we already show the Translator, Manager and Admin status (as well as the date joined). |
In this commit, i've expanded the status icons to also be included in comments. I've slightly adjusted the CSS rules as well, and created a new function to send status data to translations and comments.
|
As we discussed, it seems like some of the statuses do indeed overflow when displayed in the banner.
|
|
Thoughts on using just letters to keep labels short (A/T/M + New), and rely on tooltip for explanation? |
|
I think it would work for 'New', however, since a lot of users have their avatar as the default (the initials of their username), I personally feel that it might look odd to have up to three letters displayed in the avatar container. |
We could make it more "badge-y". 
|
|
I like flod's idea for the status icon. Below is a rough variant of this proposal, which uses different colors for different statuses and shortens the titles using the similar method that we use on the dashboards.
|
|
I've held off on creating |
translate/src/modules/history/components/HistoryTranslation.tsx
Outdated
Show resolved
Hide resolved
| @@ -18,6 +18,7 @@ export function CommentsList({ | |||
| user, | |||
| }: Props): React.ReactElement<'div'> { | |||
| const onAddComment = useAddCommentAndRefresh(translation); | |||
|
|
|||
There was a problem hiding this comment.
Nit: Please restore this change and we can ship it! :)
Fix #3393
This PR adds the user role as a banner under their avatar in the
translateview. As per discussions in team calls, the design for the banner is to be iterated on within this PR.To reproduce results: Head to any string within any team/project that has more than just the imported translation available (i.e. a user has submitted a translation for that string). At the bottom of their avatar, their role will be displayed within a banner.