Add role banner under user avatar

pontoon/base/models/comment.py

@@ -30,6 +30,7 @@ def serialize(self):
         return {
             "author": self.author.name_or_email,
             "username": self.author.username,
+            "user_status": self.author.locale_status(self.locale),
             "user_gravatar_url_small": self.author.gravatar_url(88),
             "created_at": self.timestamp.strftime("%b %d, %Y %H:%M"),
             "date_iso": self.timestamp.isoformat(),

pontoon/base/models/user.py

@@ -1,13 +1,15 @@
 from hashlib import md5
 from urllib.parse import quote, urlencode
 
+from dateutil.relativedelta import relativedelta
 from guardian.shortcuts import get_objects_for_user
 
 from django.conf import settings
 from django.contrib.auth.models import User
 from django.contrib.contenttypes.models import ContentType
 from django.db.models import Count
 from django.urls import reverse
+from django.utils import timezone
 
 from pontoon.actionlog.models import ActionLog
 
@@ -192,6 +194,21 @@ def user_locale_role(self, locale):
         return "Contributor"
 
 
+def user_locale_status(self, locale):
+    if self is None:
+        return ""
+    if self.is_superuser:
+        return "Admin"
+    if self in locale.managers_group.user_set.all():
+        return "Manager"
+    if self in locale.translators_group.user_set.all():
+        return "Translator"
+    if self.date_joined >= timezone.now() - relativedelta(months=3):
+        return "New User"
+    else:
+        return ""
+
+
 @property
 def contributed_translations(self):
     """Filtered contributions provided by user."""
@@ -423,6 +440,7 @@ def latest_action(self):
 User.add_to_class("translated_projects", user_translated_projects)
 User.add_to_class("role", user_role)
 User.add_to_class("locale_role", user_locale_role)
+User.add_to_class("locale_status", user_locale_status)
 User.add_to_class("contributed_translations", contributed_translations)
 User.add_to_class("top_contributed_locale", top_contributed_locale)
 User.add_to_class("can_translate", can_translate)

pontoon/base/views.py

@@ -420,6 +420,7 @@ def get_translation_history(request):
                 "uid": u.id,
                 "username": u.username,
                 "user_gravatar_url_small": u.gravatar_url(88),
+                "user_status": User.locale_status(t.user, locale),
                 "date": t.date,
                 "approved_user": User.display_name_or_blank(t.approved_user),
                 "approved_date": t.approved_date,

translate/public/locale/en-US/translate.ftl

@@ -704,6 +704,8 @@ user-UserAvatar--anon-alt-text =
     .alt = Anonymous User
 user-UserAvatar--alt-text = 
     .alt = User Profile
+user-UserAvatar--userStatus =
+    .title {$userStatus}
 
 ## User Menu
 ## Shows user menu entries and options to sign in or out.

translate/src/api/comment.ts

@@ -9,6 +9,7 @@ import { keysToCamelCase } from './utils/keysToCamelCase';
 export type TranslationComment = {
   readonly author: string;
   readonly username: string;
+  readonly userStatus: string;
   readonly userGravatarUrlSmall: string;
   readonly createdAt: string;
   readonly dateIso: string;

translate/src/api/translation.ts

@@ -44,6 +44,7 @@ export type HistoryTranslation = {
   readonly user: string;
   readonly username: string;
   readonly userGravatarUrlSmall: string;
+  readonly userStatus: string;
   readonly comments: Array<TranslationComment>;
 };
 

translate/src/modules/comments/components/Comment.css

@@ -2,6 +2,24 @@
   padding-bottom: 10px;
 }
 
+.comments-list ul .comment .avatar-container {
+  position: relative;
+  display: inline-block;
+}
+
+.comments-list ul .comment .user-status-banner {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 30%);
+  background-color: var(--icon-border-1);
+  color: white;
+  font-size: 8px;
+  padding: 0 6px;
+  border-radius: 0 0 4px 4px;
+  white-space: nowrap;
+}
+
 .comments-list .comment a {
   color: var(--status-translated);
   font-weight: 400;

translate/src/modules/comments/components/Comment.tsx

@@ -32,10 +32,13 @@ export function Comment(props: Props): null | React.ReactElement<'li'> {
 
   return (
     <li className='comment'>
-      <UserAvatar
-        username={comment.username}
-        imageUrl={comment.userGravatarUrlSmall}
-      />
+      <div className='avatar-container'>
+        <UserAvatar
+          username={comment.username}
+          imageUrl={comment.userGravatarUrlSmall}
+          userStatus={comment.userStatus}
+        />
+      </div>
       <div className='container'>
         <div className='content'>
           <div>

translate/src/modules/history/components/HistoryTranslation.css

@@ -22,6 +22,28 @@
   top: 3px;
 }
 
+.history .translation .user-avatar .avatar-container {
+  position: relative;
+  display: inline-block;
+}
+
+.history .translation .user-avatar .user-status-banner {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 30%);
+  background-color: var(--icon-border-1);
+  color: white;
+  font-size: 11px;
+  padding: 0 8px;
+  border-radius: 0 0 4px 4px;
+  white-space: nowrap;
+}
+
+.history .translation:hover .user-status-banner {
+  border-color: var(--translation-border);
+}
+
 .history .translation .user-avatar img {
   border-radius: 6px;
   border: 2px solid var(--icon-border-1);

translate/src/modules/history/components/HistoryTranslation.tsx

@@ -270,6 +270,7 @@ export function HistoryTranslationBase({
                 username={translation.username}
                 title=''
                 imageUrl={translation.userGravatarUrlSmall}
+                userStatus={translation.userStatus}
               />
             </Localized>
             {translation.machinerySources ? (

translate/src/modules/user/components/UserAvatar.tsx

@@ -5,10 +5,12 @@ type Props = {
   username: string;
   title?: string;
   imageUrl: string;
+  userStatus?: string;
 };
 
 export function UserAvatar(props: Props): React.ReactElement<'div'> {
-  const { username, title, imageUrl } = props;
+  const { username, title, imageUrl, userStatus } = props;
+  console.log(userStatus);
 
   return (
     <div className='user-avatar'>
@@ -19,9 +21,18 @@ export function UserAvatar(props: Props): React.ReactElement<'div'> {
         rel='noopener noreferrer'
         onClick={(e: React.MouseEvent) => e.stopPropagation()}
       >
-        <Localized id='user-UserAvatar--alt-text' attrs={{ alt: true }}>
-          <img src={imageUrl} alt='User Profile' height='44' width='44' />
-        </Localized>
+        <div className='avatar-container'>
+          <Localized id='user-UserAvatar--alt-text' attrs={{ alt: true }}>
+            <img src={imageUrl} alt='User Profile' height='44' width='44' />
+          </Localized>
+          {userStatus && (
+            <Localized id='user-UserAvatar--userStatus' vars={{ userStatus }}>
+              <span className='user-status-banner' title='{$userStatus}'>
+                {userStatus}
+              </span>
+            </Localized>
+          )}
+        </div>
       </a>
     </div>
   );