diff --git a/client/coral-admin/src/components/CommentLabels.css b/client/coral-admin/src/components/CommentLabels.css index c3a2af639..718cd7dfd 100644 --- a/client/coral-admin/src/components/CommentLabels.css +++ b/client/coral-admin/src/components/CommentLabels.css @@ -1,2 +1,13 @@ .root { + > *:not(:last-child) { + margin-right: 3px; + } +} + +.replyLabel { + background-color: #3D73D5; +} + +.premodLabel { + background-color: #063B9A; } diff --git a/client/coral-admin/src/components/CommentLabels.js b/client/coral-admin/src/components/CommentLabels.js index 631cf3443..333f905ef 100644 --- a/client/coral-admin/src/components/CommentLabels.js +++ b/client/coral-admin/src/components/CommentLabels.js @@ -1,9 +1,9 @@ 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'; +import styles from './CommentLabels.css'; function isUserFlagged(actions) { return actions.some((action) => action.__typename === 'FlagAction' && action.user); @@ -17,11 +17,11 @@ function hasHistoryFlag(actions) { return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST'); } -const CommentLabels = ({className, status, actions, isReply}) => { +const CommentLabels = ({comment: {className, status, actions, hasParent}}) => { return (
- {isReply && } - {status === 'PREMOD' && } + {hasParent && } + {status === 'PREMOD' && } {isUserFlagged(actions) && User} {hasSuspectedWords(actions) && Suspect} {hasHistoryFlag(actions) && History} @@ -30,10 +30,12 @@ const CommentLabels = ({className, status, actions, isReply}) => { }; CommentLabels.propTypes = { - className: PropTypes.string, - status: PropTypes.string, - actions: PropTypes.array, - isReply: PropTypes.bool, + comment: PropTypes.shape({ + className: PropTypes.string, + status: PropTypes.string, + actions: PropTypes.array, + hasParent: PropTypes.bool, + }), }; export default CommentLabels; diff --git a/client/coral-admin/src/components/CommentType.css b/client/coral-admin/src/components/CommentType.css deleted file mode 100644 index 969d9511d..000000000 --- a/client/coral-admin/src/components/CommentType.css +++ /dev/null @@ -1,30 +0,0 @@ -.commentType { - 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; - - > i { - font-size: 14px; - vertical-align: text-top; - margin: 0; - margin-right: 4px; - } - - &.premod { - background: #063B9A; - } - - &.flagged { - background: #d03235; - } - - &.no-type { - display: none; - } -} diff --git a/client/coral-admin/src/components/CommentType.js b/client/coral-admin/src/components/CommentType.js deleted file mode 100644 index 4d1ff7e67..000000000 --- a/client/coral-admin/src/components/CommentType.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styles from './CommentType.css'; -import {Icon} from 'coral-ui'; -import cn from 'classnames'; - -const CommentType = (props) => { - const typeData = getTypeData(props.type); - - return ( - - {typeData.text} - - ); -}; - -const getTypeData = (type) => { - switch (type) { - case 'premod': - return {icon: 'query_builder', text: 'Pre-Mod', className: 'premod'}; - case 'flagged': - return {icon: 'flag', text: 'Flagged', className: 'flagged'}; - default: - return {icon: 'flag', className: 'no-type'}; - } -}; - -CommentType.propTypes = { - type: PropTypes.string.isRequired -}; - -export default CommentType; diff --git a/client/coral-admin/src/components/Label.css b/client/coral-admin/src/components/Label.css index fb6bd86ff..5e7f656ee 100644 --- a/client/coral-admin/src/components/Label.css +++ b/client/coral-admin/src/components/Label.css @@ -8,7 +8,6 @@ height: 24px; letter-spacing: 0.4px; line-height: 22px; - background: #063B9A; min-width: 80px; text-align: center; } @@ -20,7 +19,4 @@ margin-right: 4px; } -.isFlag { - background: #d03235; -} diff --git a/client/coral-admin/src/components/ReplyBadge.js b/client/coral-admin/src/components/ReplyBadge.js deleted file mode 100644 index 5c8bb88ba..000000000 --- a/client/coral-admin/src/components/ReplyBadge.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import {Badge} from 'coral-ui'; -import t from 'coral-framework/services/i18n'; - -const ReplyBadge = () => ( - - {t('modqueue.reply')} - -); - -export default ReplyBadge; diff --git a/client/coral-admin/src/components/UserDetailComment.css b/client/coral-admin/src/components/UserDetailComment.css index 2dfd61cf3..d1e2b007a 100644 --- a/client/coral-admin/src/components/UserDetailComment.css +++ b/client/coral-admin/src/components/UserDetailComment.css @@ -55,7 +55,7 @@ position: relative; } -.badgeBar { +.labels { position: absolute; right: 0px; } diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js index fa196dc41..2aec28ab9 100644 --- a/client/coral-admin/src/components/UserDetailComment.js +++ b/client/coral-admin/src/components/UserDetailComment.js @@ -4,16 +4,14 @@ import {Link} from 'react-router'; import {Icon} from 'coral-ui'; import FlagBox from './FlagBox'; -import ReplyBadge from './ReplyBadge'; import styles from './UserDetailComment.css'; -import CommentType from './CommentType'; import {getActionSummary} from 'coral-framework/utils'; import ActionButton from 'coral-admin/src/components/ActionButton'; 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 CommentAnimatedEdit from './CommentAnimatedEdit'; +import CommentLabels from '../containers/CommentLabels'; import t, {timeago} from 'coral-framework/services/i18n'; @@ -35,7 +33,6 @@ class UserDetailComment extends React.Component { const flagActionSummaries = getActionSummary('FlagActionSummary', comment); const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction'); - const commentType = getCommentType(comment); return (
  • - {comment.hasParent && } - +
    +
  • diff --git a/client/coral-admin/src/containers/CommentLabels.js b/client/coral-admin/src/containers/CommentLabels.js new file mode 100644 index 000000000..ab9639bcd --- /dev/null +++ b/client/coral-admin/src/containers/CommentLabels.js @@ -0,0 +1,21 @@ +import {gql} from 'react-apollo'; +import CommentLabels from '../components/CommentLabels'; +import withFragments from 'coral-framework/hocs/withFragments'; + +export default withFragments({ + comment: gql` + fragment CoralAdmin_CommentLabels_comment on Comment { + hasParent + status + actions { + __typename + ... on FlagAction { + reason + } + user { + id + } + } + } + ` +})(CommentLabels); diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js index 9f0e3a793..9f0199bce 100644 --- a/client/coral-admin/src/containers/UserDetailComment.js +++ b/client/coral-admin/src/containers/UserDetailComment.js @@ -1,6 +1,8 @@ import {gql} from 'react-apollo'; import UserDetailComment from '../components/UserDetailComment'; import withFragments from 'coral-framework/hocs/withFragments'; +import {getDefinitionName} from 'coral-framework/utils'; +import CommentLabels from './CommentLabels'; export default withFragments({ comment: gql` @@ -35,6 +37,8 @@ export default withFragments({ editing { edited } + ...${getDefinitionName(CommentLabels.fragments.comment)} } + ${CommentLabels.fragments.comment} ` })(UserDetailComment); diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js index ce055e644..b210d8f23 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.js +++ b/client/coral-admin/src/routes/Moderation/components/Comment.js @@ -107,9 +107,7 @@ class Comment extends React.Component { }
    a.__typename === 'FlagAction')) { - commentType = 'flagged'; - } - return commentType; -} diff --git a/client/coral-ui/components/Badge.css b/client/coral-ui/components/Badge.css deleted file mode 100644 index db68ebd58..000000000 --- a/client/coral-ui/components/Badge.css +++ /dev/null @@ -1,20 +0,0 @@ -.badge { - 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-color: #3D73D5; - margin-right: 4px; -} - -.icon { - font-size: 14px; - vertical-align: text-top; - margin: 0; - margin-right: 4px; -} \ No newline at end of file diff --git a/client/coral-ui/components/Badge.js b/client/coral-ui/components/Badge.js deleted file mode 100644 index c1ba8100b..000000000 --- a/client/coral-ui/components/Badge.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import styles from './Badge.css'; -import Icon from './Icon'; -import cn from 'classnames'; - -const Badge = ({className, children, icon, props}) => ( - - {icon && } - {children} - -); - -export default Badge; diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js index 8f261bcca..8a538d120 100644 --- a/client/coral-ui/index.js +++ b/client/coral-ui/index.js @@ -26,4 +26,3 @@ export {default as Option} from './components/Option'; export {default as SnackBar} from './components/SnackBar'; export {default as TextArea} from './components/TextArea'; export {default as Drawer} from './components/Drawer'; -export {default as Badge} from './components/Badge';