Label for inactive comments

client/coral-embed-stream/src/components/Comment.js

@@ -20,6 +20,7 @@ import {TopRightMenu} from './TopRightMenu';
 import CommentContent from './CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
+import InactiveCommentLabel from './InactiveCommentLabel';
 import {EditableCommentContent} from './EditableCommentContent';
 import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
@@ -438,7 +439,7 @@ export default class Comment extends React.Component {
                   }
                 </span>
               }
-              { (currentUser && (comment.user.id !== currentUser.id)) &&
+              { isActive && (currentUser && (comment.user.id !== currentUser.id)) &&
 
                   /* TopRightMenu allows currentUser to ignore other users' comments */
                   <span className={cn(styles.topRight, styles.topRightMenu)}>
@@ -448,6 +449,9 @@ export default class Comment extends React.Component {
                       addNotification={addNotification} />
                   </span>
               }
+              { !isActive &&
+                <InactiveCommentLabel status={comment.status}/>
+              }
             </div>
             <div className={styles.content}>
               {

client/coral-embed-stream/src/components/InactiveCommentLabel.css

@@ -0,0 +1,32 @@
+.root {
+  display: inline-block;
+  color: white;
+  background: grey;
+  height: 22px;
+  box-sizing: border-box;
+  line-height: 19px;
+  padding: 2px 6px 2px 4px;
+  border-radius: 2px;
+  font-size: 12px;
+  text-transform: capitalize;
+}
+
+.icon {
+  font-size: 14px;
+  vertical-align: text-top;
+  margin: 0;
+  margin-right: 4px;
+}
+
+.label {
+  display: inline-block;
+}
+
+.premod {
+  background: #063B9A;
+}
+
+.rejected {
+  background: #d03235;
+}
+

client/coral-embed-stream/src/components/InactiveCommentLabel.js

@@ -0,0 +1,36 @@
+import React, {PropTypes} from 'react';
+import t from 'coral-framework/services/i18n';
+import styles from './InactiveCommentLabel.css';
+import {Icon} from 'coral-ui';
+import cn from 'classnames';
+
+const InactiveCommentLabel = ({status, className, ...rest}) => {
+  let label;
+  let icon;
+
+  switch (status) {
+  case 'PREMOD':
+    label = t('modqueue.premod');
+    icon = 'query_builder';
+    break;
+  case 'REJECTED':
+    label = t('modqueue.rejected');
+    icon = 'close';
+    break;
+  default:
+    throw new Error(`Unknown inactive status ${status}`);
+  }
+
+  return (
+    <span {...rest} className={cn(className, styles.root, styles[status.toLowerCase()])}>
+      <Icon name={icon} className={styles.icon}/>
+      <span className={styles.label}>{label}</span>
+    </span>
+  );
+};
+
+InactiveCommentLabel.propTypes = {
+  status: PropTypes.string.isRequired,
+};
+
+export default InactiveCommentLabel;