Comment Component Design

client/coral-admin/src/components/ui/Logo.css

@@ -19,6 +19,7 @@
   background: #E5E5E5;
   height: 100%;
   width: 128px;
+  z-index: 10;
 }
 
 .base {

client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js

@@ -21,6 +21,7 @@ const ModerationQueue = ({activeTab = 'premod', ...props}) => {
             key={i}
             index={i}
             comment={comment}
+            commentType={activeTab}
             suspectWords={props.suspectWords}
             actions={actionsMap[status]}
             showBanUserDialog={props.showBanUserDialog}

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -8,6 +8,7 @@ import styles from './styles.css';
 import {Icon} from 'coral-ui';
 import ActionButton from '../../../components/ActionButton';
 import FlagBox from './FlagBox';
+import CommentType from './CommentType';
 
 const linkify = new Linkify();
 
@@ -18,6 +19,7 @@ const lang = new I18n(translations);
 const Comment = ({actions = [], ...props}) => {
   const links = linkify.getMatches(props.comment.body);
   const actionSummaries = props.comment.action_summaries;
+  console.log(props)
   return (
     <li tabIndex={props.index}
         className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
@@ -27,7 +29,7 @@ const Comment = ({actions = [], ...props}) => {
           <span className={styles.created}>
             {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
           </span>
-          {props.comment.action_summaries ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
+          <CommentType type={props.commentType}/>
         </div>
         <div className={styles.sideActions}>
           {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}

client/coral-admin/src/containers/ModerationQueue/components/CommentType.css

@@ -0,0 +1,25 @@
+.commentType {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  color: white;
+  background: grey;
+  padding: 2px 7px;
+  font-size: 14px;
+  height: 32px;
+  box-sizing: border-box;
+  line-height: 29px;
+
+  i {
+    font-size: 14px;
+    margin-right: 7px;
+  }
+
+  &.premod {
+    background: #063B9A;
+  }
+
+  &.flagged {
+    background: #d03235;
+  }
+}

client/coral-admin/src/containers/ModerationQueue/components/CommentType.js

@@ -0,0 +1,30 @@
+import React, {PropTypes} from 'react';
+import styles from './CommentType.css';
+import {Icon} from 'coral-ui';
+
+const CommentType = props => {
+  const typeData = getTypeData(props.type);
+
+  return (
+    <span className={`${styles.commentType} ${styles[typeData.className]}`}>
+      <Icon name={typeData.icon}/>{typeData.text}
+    </span>
+  );
+};
+
+const getTypeData = type => {
+  switch (type) {
+  case 'premod':
+    return {icon: 'clock', text: 'Pre-Mod', className: 'premod'};
+  case 'flagged':
+    return {icon: 'flag', text: 'Flagged', className: 'flagged'};
+  default:
+    return {icon: 'flag', text: 'no-type', className: 'non'};
+  }
+};
+
+CommentType.propTypes = {
+  type: PropTypes.string.isRequired
+};
+
+export default CommentType;

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -310,6 +310,11 @@ span {
 }
 
 .Comment {
+
+  .commentType {
+    background: red;
+  }
+
   .moderateArticle {
     font-size: 12px;
     a {

client/coral-admin/src/services/client.js

@@ -2,6 +2,7 @@ import ApolloClient, {addTypename} from 'apollo-client';
 import getNetworkInterface from './transport';
 
 export const client = new ApolloClient({
+  addTypename: true,
   queryTransformer: addTypename,
   dataIdFromObject: (result) => {
     if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle