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';