From c714eb26002b1343a64d664ad7c1282f838f39aa Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Mon, 4 Feb 2019 05:23:10 +0300
Subject: [PATCH] Add admin and moderator indicators to the user card

---
 src/_variables.scss                              |  4 ++++
 .../user_card_content/user_card_content.vue      | 16 +++++++++++++++-
 .../entity_normalizer.service.js                 |  2 ++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/_variables.scss b/src/_variables.scss
index 150e4fb56a..4869b72147 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -2,6 +2,10 @@ $main-color: #f58d2c;
 $main-background: white;
 $darkened-background: whitesmoke;
 
+$admin-color: #e87487;
+$admin-border-color: rgba(232,116,135,.5);
+$admin-background-color: rgba(232,116,135,.1);
+
 $fallback--bg: #121a24;
 $fallback--fg: #182230;
 $fallback--faint: rgba(185, 185, 186, .5);
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ce65ec2f2b..3c0e160c8c 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -19,7 +19,10 @@
           </div>
 
           <router-link class='user-screen-name' :to="userProfileLink(user)">
-            <span class="handle">@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
+            <span class="handle">@{{user.screen_name}}
+              <span class="staff" v-if="user.is_admin">Admin</span>
+              <span class="staff" v-else-if="user.is_moderator">Moderator</span>
+            </span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
         </div>
@@ -247,6 +250,17 @@
       text-overflow: ellipsis;
       overflow: hidden;
     }
+
+    .staff {
+      border: 1px solid $admin-border-color;
+      color: $admin-color;
+      background-color: $admin-background-color;
+      line-height: 12px;
+      border-radius: 3px;
+      font-size: 12px;
+      padding: 4px 6px;
+      margin-left: 5px;
+    }
   }
 
   .user-meta {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index bba6b3636e..bbf20b64a2 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -90,6 +90,8 @@ export const parseUser = (data) => {
     output.statusnet_blocking = data.statusnet_blocking
 
     output.is_local = data.is_local
+    output.is_admin = data.is_admin
+    output.is_moderator = data.is_moderator
 
     output.follows_you = data.follows_you