Merge pull request #869 from coralproject/admin-reply

Reply Badge - Admin Side

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

@@ -3,12 +3,11 @@
   color: white;
   background: grey;
   box-sizing: border-box;
-  padding: 0px 5px;
-  border-radius: 2px;
+  padding: 2px 5px;
   font-size: 12px;
   height: 24px;
   letter-spacing: 0.4px;
-  margin-bottom: 1px;
+  line-height: 22px;
   
   > i {
     font-size: 14px;

client/coral-admin/src/components/ReplyBadge.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Badge} from 'coral-ui';
+import t from 'coral-framework/services/i18n';
+
+const ReplyBadge = () => (
+  <Badge icon="reply">
+    {t('modqueue.reply')}
+  </Badge>
+);
+
+export default ReplyBadge;

client/coral-admin/src/components/UserDetailComment.css

@@ -55,7 +55,7 @@
   position: relative;
 }
 
-.commentType {
+.badgeBar {
   position: absolute;
   right: 0px;
 }

client/coral-admin/src/components/UserDetailComment.js

@@ -3,6 +3,7 @@ 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';
@@ -56,7 +57,11 @@ class UserDetailComment extends React.Component {
               ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
               : null
             }
-            <CommentType type={commentType} className={styles.commentType}/>
+
+            <div className={styles.badgeBar}>
+              {comment.hasParent && <ReplyBadge/>}
+              <CommentType type={commentType}/>
+            </div>
           </div>
           <div className={styles.story}>
             Story: {comment.asset.title}

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

@@ -9,6 +9,7 @@ export default withFragments({
       body
       created_at
       status
+      hasParent
       asset {
         id
         title

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 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';
@@ -107,6 +108,7 @@ class Comment extends React.Component {
                 </ActionsMenu>
               }
               <div className={styles.adminCommentInfoBar}>
+                {comment.hasParent && <ReplyBadge/>}
                 <CommentType type={commentType} className={styles.commentType}/>
                 <Slot
                   fill="adminCommentInfoBar"

client/coral-admin/src/routes/Moderation/containers/Comment.js

@@ -37,6 +37,7 @@ export default withFragments({
         count
         ... on FlagActionSummary {
           reason
+          __typename
         }
       }
       actions {
@@ -48,11 +49,14 @@ export default withFragments({
             id
             username
           }
+          __typename
         }
+        __typename
       }
       editing {
         edited
       }
+      hasParent
       ${getSlotFragmentSpreads(slots, 'comment')}
     }
   `

client/coral-ui/components/Badge.css

@@ -0,0 +1,20 @@
+.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;
+}

client/coral-ui/components/Badge.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Badge.css';
+import Icon from './Icon';
+import cn from 'classnames';
+
+const Badge = ({className, children, icon, props}) => (
+  <span className={cn(styles.badge, className)} {...props}>
+    {icon && <Icon name={icon} className={styles.icon} />}
+    {children}
+  </span>
+);
+
+export default Badge;

client/coral-ui/index.js

@@ -26,3 +26,4 @@ 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';

graph/resolvers/comment.js

@@ -1,6 +1,9 @@
 const {decorateWithTags} = require('./util');
 
 const Comment = {
+  hasParent({parent_id}) {
+    return !!parent_id;
+  },
   parent({parent_id}, _, {loaders: {Comments}}) {
     if (parent_id == null) {
       return null;

graph/typeDefs.graphql

@@ -339,6 +339,9 @@ type Comment {
 
   # describes how the comment can be edited
   editing: EditInfo
+
+  # Indicates if it has a parent
+  hasParent: Boolean
 }
 
 # CommentConnection represents a paginable subset of a comment list.

locales/en.yml

@@ -281,6 +281,7 @@ en:
     prev_comment: "Go to the previous comment"
     reject: "Reject"
     rejected: "Rejected"
+    reply: "Reply"
     select_stream: "Select Stream"
     shift_key: "⇧"
     shortcuts: "Shortcuts"

locales/es.yml

@@ -272,6 +272,7 @@ es:
     prev_comment: "Ir al comentario anterior"
     reject: "Rechazar"
     rejected: "rechazado"
+    reply: "Respuesta"
     select_stream: "Seleccionar hilo de comentarios"
     shift_key: ⇧
     shortcuts: Atajos