From 1421a39518a0697e31bf1d82efc4652a48bd843e Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Fri, 23 Jul 2021 18:26:16 +0800 Subject: [PATCH] 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. --- flow-typed/Comment.js | 3 +++ static/app-strings.json | 1 + ui/component/comment/view.jsx | 23 ++++++++++++++++- ui/component/commentsList/view.jsx | 2 ++ ui/component/commentsReplies/view.jsx | 2 ++ ui/component/common/icon-custom.jsx | 33 ++++++++++++++++++++++++ ui/component/livestreamComment/view.jsx | 21 +++++++++++++++ ui/component/livestreamComments/view.jsx | 6 +++++ ui/constants/icons.js | 1 + ui/scss/component/_comments.scss | 22 ++++++++++++++++ 10 files changed, 113 insertions(+), 1 deletion(-) diff --git a/flow-typed/Comment.js b/flow-typed/Comment.js index 551699e3e..412052a39 100644 --- 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, }; diff --git a/static/app-strings.json b/static/app-strings.json index 86ee18263..e5f45808b 100644 --- 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", diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index 5161382fa..6e3d03e9b 100644 --- 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) {
+ {isGlobalMod && ( + + + + + + )} + + {isModerator && ( + + + + + + )} + {!author ? ( {__('Anonymous')} ) : ( diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx index 3c232441a..6e750bd3d 100644 --- 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} /> ); diff --git a/ui/component/commentsReplies/view.jsx b/ui/component/commentsReplies/view.jsx index 932b8c94e..6e78e7dac 100644 --- 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} /> ); })} diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx index 27bcf99fb..c9a181801 100644 --- a/ui/component/common/icon-custom.jsx +++ b/ui/component/common/icon-custom.jsx @@ -2331,4 +2331,37 @@ export const icons = { ), + [ICONS.BADGE_MOD]: (props: IconProps) => ( + + + + + + + + + + + ), }; diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx index cd4711957..1b20c9bbd 100644 --- 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) {
{supportAmount > 0 && }
+ {isGlobalMod && ( + + + + + + )} + + {isModerator && ( + + + + + + )} +