Comment badge to reflect mod and admin status.

## Issue 6467 Add status indicators for messages from creator, delegated moderator, global moderator ## Changes - Added the required icons. - Added tooltip. ## Notes - Left out "creator" since we are already highlighting the creator's name. - Note that currently the status is only available via websocket deltas. `comment.List` does not provide the data. - When `comment.List` includes the info, regular comments will automatically include these badges.
2021-07-23 18:26:16 +08:00 · 2021-07-23 18:26:16 +08:00 · 1421a39518
commit 1421a39518
parent f81b0f5913
10 changed files with 113 additions and 1 deletions
--- a/flow-typed/Comment.js
+++ b/flow-typed/Comment.js
@ -14,6 +14,9 @@ declare type Comment = {
  is_pinned: boolean,
  support_amount: number,
  replies: number, // number of direct replies (i.e. excluding nested replies).
+  is_moderator: boolean,
+  is_creator: boolean,
+  is_global_mod: boolean,
  is_fiat?: boolean,
 };

--- a/static/app-strings.json
+++ b/static/app-strings.json
@ -1729,6 +1729,7 @@
  "Are you sure you want to view this content? Viewing will not unmute @%channel%": "Are you sure you want to view this content? Viewing will not unmute @%channel%",
  "View Content": "View Content",
  "Global": "Global",
+  "Global Admin": "Global Admin",
  "Moderator": "Moderator",
  "Global Unblock Channel": "Global Unblock Channel",
  "Global Block Channel": "Global Block Channel",
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@ -10,6 +10,7 @@ import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import Expandable from 'component/expandable';
 import MarkdownPreview from 'component/common/markdown-preview';
+import Tooltip from 'component/common/tooltip';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { Menu, MenuButton } from '@reach/menu-button';
 import Icon from 'component/common/icon';
@ -59,7 +60,9 @@ type Props = {
  stakedLevel: number,
  supportAmount: number,
  numDirectReplies: number,
-  isFiat: boolean
+  isModerator: boolean,
+  isGlobalMod: boolean,
+  isFiat: boolean,
 };

 const LENGTH_TO_COLLAPSE = 300;
@ -92,6 +95,8 @@ function Comment(props: Props) {
    stakedLevel,
    supportAmount,
    numDirectReplies,
+    isModerator,
+    isGlobalMod,
    isFiat,
  } = props;

@ -225,6 +230,22 @@ function Comment(props: Props) {
        <div className="comment__body-container">
          <div className="comment__meta">
            <div className="comment__meta-information">
+              {isGlobalMod && (
+                <Tooltip label={__('Admin')}>
+                  <span className="comment__badge comment__badge--global-mod">
+                    <Icon icon={ICONS.BADGE_MOD} size={20} />
+                  </span>
+                </Tooltip>
+              )}
+
+              {isModerator && (
+                <Tooltip label={__('Moderator')}>
+                  <span className="comment__badge comment__badge--mod">
+                    <Icon icon={ICONS.BADGE_MOD} size={20} />
+                  </span>
+                </Tooltip>
+              )}
+
              {!author ? (
                <span className="comment__author">{__('Anonymous')}</span>
              ) : (
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@ -316,6 +316,8 @@ function CommentList(props: Props) {
                    isPinned={comment.is_pinned}
                    supportAmount={comment.support_amount}
                    numDirectReplies={comment.replies}
+                    isModerator={comment.is_moderator}
+                    isGlobalMod={comment.is_global_mod}
                    isFiat={comment.is_fiat}
                  />
                );
--- a/ui/component/commentsReplies/view.jsx
+++ b/ui/component/commentsReplies/view.jsx
@ -97,6 +97,8 @@ function CommentsReplies(props: Props) {
                        commentingEnabled={commentingEnabled}
                        supportAmount={comment.support_amount}
                        numDirectReplies={comment.replies}
+                        isModerator={comment.is_moderator}
+                        isGlobalMod={comment.is_global_mod}
                      />
                    );
                  })}
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@ -2331,4 +2331,37 @@ export const icons = {
      <path d="M4.954 14.753l3.535 3.535-1.768 1.768-3.535-3.535z" />
    </g>
  ),
+  [ICONS.BADGE_MOD]: (props: IconProps) => (
+    <svg
+      {...props}
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlSpace="preserve"
+    >
+      <style type="text/css">{'.st0{fill:FF3850}.st1{fill:#181021}.st2{fill:#FFFFFF}'}</style>
+      <g>
+        <g>
+          <path
+            className="st0"
+            d="M11.69,6.77c4.86,0,7.55,0.9,8.52,1.31c1.29-1.46,3.28-4.14,3.28-6.76c0,0-4.17,4.86-6.92,5.12 c-1.25-0.87-2.77-1.38-4.41-1.38c0,0-3.21-0.06-4.63,1.31C4.81,6.44,0.51,1.32,0.51,1.32c0,2.61,1.97,5.27,3.25,6.74 C4.71,7.59,7.03,6.77,11.69,6.77z M19.87,19.38c0.02-0.13,0.04-0.27,0.04-0.4V12.8c0-1.03-0.21-2.02-0.58-2.92 c-0.83-0.33-3.25-1.11-7.64-1.11c-4.29,0-6.33,0.75-7,1.06c-0.38,0.91-0.6,1.91-0.6,2.97v6.18c0,0.13,0.02,0.26,0.04,0.39 C1.6,19.73,0,22.54,0,22.54L12,24l12-1.46C24,22.54,22.36,19.79,19.87,19.38z"
+          />
+        </g>
+      </g>
+      <path
+        className="st1"
+        d="M13,18.57H11c-2.27,0-4.12-0.82-4.12-2.88v-2.46c0-2.77,2.17-3.94,5.11-3.94s5.11,1.17,5.11,3.94v2.46 C17.11,17.75,15.27,18.57,13,18.57z"
+      />
+      <path
+        className="st2"
+        d="M15.06,15.25c-0.28,0-0.5-0.22-0.5-0.5v-1.42c0-0.32,0-1.31-1.63-1.31c-0.28,0-0.5-0.22-0.5-0.5 s0.22-0.5,0.5-0.5c1.65,0,2.63,0.86,2.63,2.31v1.42C15.56,15.02,15.33,15.25,15.06,15.25z"
+      />
+    </svg>
+  ),
 };
--- a/ui/component/livestreamComment/view.jsx
+++ b/ui/component/livestreamComment/view.jsx
@ -3,6 +3,7 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import { parseURI } from 'lbry-redux';
 import MarkdownPreview from 'component/common/markdown-preview';
+import Tooltip from 'component/common/tooltip';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { Menu, MenuButton } from '@reach/menu-button';
 import Icon from 'component/common/icon';
@ -20,6 +21,8 @@ type Props = {
  commentIsMine: boolean,
  stakedLevel: number,
  supportAmount: number,
+  isModerator: boolean,
+  isGlobalMod: boolean,
  isFiat: boolean,
  isPinned: boolean,
 };
@ -34,6 +37,8 @@ function LivestreamComment(props: Props) {
    commentId,
    stakedLevel,
    supportAmount,
+    isModerator,
+    isGlobalMod,
    isFiat,
    isPinned,
  } = props;
@ -59,6 +64,22 @@ function LivestreamComment(props: Props) {
      <div className="livestream-comment__body">
        {supportAmount > 0 && <ChannelThumbnail uri={authorUri} xsmall />}
        <div className="livestream-comment__info">
+          {isGlobalMod && (
+            <Tooltip label={__('Admin')}>
+              <span className="comment__badge comment__badge--global-mod">
+                <Icon icon={ICONS.BADGE_MOD} size={16} />
+              </span>
+            </Tooltip>
+          )}
+
+          {isModerator && (
+            <Tooltip label={__('Moderator')}>
+              <span className="comment__badge comment__badge--mod">
+                <Icon icon={ICONS.BADGE_MOD} size={16} />
+              </span>
+            </Tooltip>
+          )}
+
          <Button
            className={classnames('button--uri-indicator comment__author', {
              'comment__author--creator': commentByOwnerOfContent,
--- a/ui/component/livestreamComments/view.jsx
+++ b/ui/component/livestreamComments/view.jsx
@ -252,6 +252,8 @@ export default function LivestreamComments(props: Props) {
                commentId={pinnedComment.comment_id}
                message={pinnedComment.comment}
                supportAmount={pinnedComment.support_amount}
+                isModerator={pinnedComment.is_moderator}
+                isGlobalMod={pinnedComment.is_global_mod}
                isFiat={pinnedComment.is_fiat}
                isPinned={pinnedComment.is_pinned}
                commentIsMine={pinnedComment.channel_id && isMyComment(pinnedComment.channel_id)}
@ -271,6 +273,8 @@ export default function LivestreamComments(props: Props) {
                    commentId={comment.comment_id}
                    message={comment.comment}
                    supportAmount={comment.support_amount}
+                    isModerator={comment.is_moderator}
+                    isGlobalMod={comment.is_global_mod}
                    isFiat={comment.is_fiat}
                    commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                  />
@ -286,6 +290,8 @@ export default function LivestreamComments(props: Props) {
                    commentId={comment.comment_id}
                    message={comment.comment}
                    supportAmount={comment.support_amount}
+                    isModerator={comment.is_moderator}
+                    isGlobalMod={comment.is_global_mod}
                    isFiat={comment.is_fiat}
                    commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                  />
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@ -165,3 +165,4 @@ export const GLOBE = 'globe';
 export const RSS = 'rss';
 export const STAR = 'star';
 export const MUSIC = 'MusicCategory';
+export const BADGE_MOD = 'BadgeMod';
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@ -224,6 +224,28 @@ $thumbnailWidthSmall: 1rem;
  }
 }

+.comment__badge {
+  padding-right: var(--spacing-xxs);
+
+  .icon {
+    margin-bottom: -3px;
+  }
+}
+
+.comment__badge--global-mod {
+  .st0 {
+    // @see: ICONS.BADGE_MOD
+    fill: #fe7500;
+  }
+}
+
+.comment__badge--mod {
+  .st0 {
+    // @see: ICONS.BADGE_MOD
+    fill: #ff3850;
+  }
+}
+
 .comment__message {
  word-break: break-word;
  max-width: 35rem;