diff --git a/client/coral-admin/src/components/CommentLabels.css b/client/coral-admin/src/components/CommentLabels.css new file mode 100644 index 000000000..c3a2af639 --- /dev/null +++ b/client/coral-admin/src/components/CommentLabels.css @@ -0,0 +1,2 @@ +.root { +} diff --git a/client/coral-admin/src/components/CommentLabels.js b/client/coral-admin/src/components/CommentLabels.js new file mode 100644 index 000000000..631cf3443 --- /dev/null +++ b/client/coral-admin/src/components/CommentLabels.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './CommentLabels.css'; +import Label from './Label'; +import FlagLabel from './FlagLabel'; +import cn from 'classnames'; + +function isUserFlagged(actions) { + return actions.some((action) => action.__typename === 'FlagAction' && action.user); +} + +function hasSuspectedWords(actions) { + return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'Matched suspect word filter'); +} + +function hasHistoryFlag(actions) { + return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST'); +} + +const CommentLabels = ({className, status, actions, isReply}) => { + return ( +
+ {isReply && } + {status === 'PREMOD' && } + {isUserFlagged(actions) && User} + {hasSuspectedWords(actions) && Suspect} + {hasHistoryFlag(actions) && History} +
+ ); +}; + +CommentLabels.propTypes = { + className: PropTypes.string, + status: PropTypes.string, + actions: PropTypes.array, + isReply: PropTypes.bool, +}; + +export default CommentLabels; diff --git a/client/coral-admin/src/components/FlagLabel.css b/client/coral-admin/src/components/FlagLabel.css new file mode 100644 index 000000000..070e117d1 --- /dev/null +++ b/client/coral-admin/src/components/FlagLabel.css @@ -0,0 +1,4 @@ +.flag { + background: #d03235; +} + diff --git a/client/coral-admin/src/components/FlagLabel.js b/client/coral-admin/src/components/FlagLabel.js new file mode 100644 index 000000000..8a7864c8b --- /dev/null +++ b/client/coral-admin/src/components/FlagLabel.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './FlagLabel.css'; +import Label from './Label'; +import cn from 'classnames'; + +const FlagLabel = ({iconName, children, className}) => { + return ( + + ); +}; + +FlagLabel.propTypes = { + className: PropTypes.string, + children: PropTypes.node.isRequired, + iconName: PropTypes.string, +}; + +export default FlagLabel; diff --git a/client/coral-admin/src/components/Label.css b/client/coral-admin/src/components/Label.css new file mode 100644 index 000000000..fb6bd86ff --- /dev/null +++ b/client/coral-admin/src/components/Label.css @@ -0,0 +1,26 @@ +.root { + display: inline-block; + color: white; + background: grey; + box-sizing: border-box; + padding: 2px 5px; + font-size: 12px; + height: 24px; + letter-spacing: 0.4px; + line-height: 22px; + background: #063B9A; + min-width: 80px; + text-align: center; +} + +.icon { + font-size: 14px; + vertical-align: text-top; + margin: 0; + margin-right: 4px; +} + +.isFlag { + background: #d03235; +} + diff --git a/client/coral-admin/src/components/Label.js b/client/coral-admin/src/components/Label.js new file mode 100644 index 000000000..9d1b736de --- /dev/null +++ b/client/coral-admin/src/components/Label.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './Label.css'; +import {Icon} from 'coral-ui'; +import cn from 'classnames'; + +const Label = ({iconName, children, className, isFlag}) => { + return ( + + {children} + + ); +}; + +Label.propTypes = { + className: PropTypes.string, + isFlag: PropTypes.bool, + children: PropTypes.node.isRequired, + iconName: PropTypes.string, +}; + +export default Label; diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js index a3edb4196..ce055e644 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.js +++ b/client/coral-admin/src/routes/Moderation/components/Comment.js @@ -3,10 +3,9 @@ import PropTypes from 'prop-types'; import {Link} from 'react-router'; import {Icon} from 'coral-ui'; -import ReplyBadge from 'coral-admin/src/components/ReplyBadge'; import FlagBox from 'coral-admin/src/components/FlagBox'; import styles from './styles.css'; -import CommentType from 'coral-admin/src/components/CommentType'; +import CommentLabels from 'coral-admin/src/components/CommentLabels'; import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit'; import Slot from 'coral-framework/components/Slot'; import {getActionSummary} from 'coral-framework/utils'; @@ -16,7 +15,6 @@ import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem'; import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter'; import IfHasLink from 'coral-admin/src/components/IfHasLink'; import cn from 'classnames'; -import {getCommentType} from 'coral-admin/src/utils/comment'; import t, {timeago} from 'coral-framework/services/i18n'; @@ -66,7 +64,6 @@ class Comment extends React.Component { const flagActionSummaries = getActionSummary('FlagActionSummary', comment); const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction'); - const commentType = getCommentType(comment); const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp'; @@ -109,8 +106,11 @@ class Comment extends React.Component { }
- {comment.hasParent && } - +