Design Comment Component

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

@@ -1,21 +1,16 @@
 import React from 'react';
 import styles from './ModerationList.css';
-import BanUserButton from './BanUserButton';
-import {FabButton} from 'coral-ui';
+import {Button} from 'coral-ui';
 import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
 
-const ActionButton = ({type = '', user, ...props}) => {
-  if (type === 'BAN') {
-    return <BanUserButton user={user} onClick={() => props.showBanUserDialog(props.user, props.id)} />;
-  }
-
+const ActionButton = ({type = '', ...props}) => {
   return (
-    <FabButton
+    <Button
       className={`${type.toLowerCase()} ${styles.actionButton}`}
       cStyle={type.toLowerCase()}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    />
+    >{menuActionsMap[type].text}</Button>
   );
 };
 

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

@@ -1,6 +1,7 @@
 .banButton {
-  width: 114px;
-  letter-spacing: 1px;
+  -webkit-transform: scale(.8);
+  transform: scale(.8);
+  margin: 0;
 
   i {
     vertical-align: middle;

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

@@ -8,7 +8,7 @@ const lang = new I18n(translations);
 
 const BanUserButton = ({user, ...props}) => (
   <div className={styles.ban}>
-    <Button cStyle='darkGrey'
+    <Button cStyle='ban'
       className={`ban ${styles.banButton}`}
       disabled={user.status === 'BANNED' ? 'disabled' : ''}
       onClick={props.onClick}

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

@@ -65,6 +65,8 @@ class ModerationContainer extends Component {
       }
     }
 
+    const comments = data[activeTab];
+
     return (
       <div>
         <ModerationHeader asset={asset} />
@@ -76,8 +78,8 @@ class ModerationContainer extends Component {
           modQueueResort={modQueueResort}
         />
         <ModerationQueue
-          data={data}
           currentAsset={asset}
+          comments={comments}
           activeTab={activeTab}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}

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

@@ -7,21 +7,19 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
-
-const ModerationQueue = ({activeTab = 'premod', ...props}) => {
-  const areComments = props.data[activeTab].length;
+const ModerationQueue = ({comments, ...props}) => {
   return (
     <div id="moderationList">
       <ul style={{paddingLeft: 0}}>
       {
-        areComments
-        ? props.data[activeTab].map((comment, i) => {
+        comments.length
+        ? comments.map((comment, i) => {
           const status = comment.action_summaries ? 'FLAGGED' : comment.status;
           return <Comment
             key={i}
             index={i}
             comment={comment}
-            commentType={activeTab}
+            commentType={props.activeTab}
             suspectWords={props.suspectWords}
             actions={actionsMap[status]}
             showBanUserDialog={props.showBanUserDialog}
@@ -38,12 +36,12 @@ const ModerationQueue = ({activeTab = 'premod', ...props}) => {
 };
 
 ModerationQueue.propTypes = {
-  data: PropTypes.object.isRequired,
-  acceptComment: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  showBanUserDialog: PropTypes.func.isRequired,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
+  showBanUserDialog: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  comments: PropTypes.array.isRequired
 };
 
 export default ModerationQueue;

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

@@ -6,9 +6,11 @@ import {Link} from 'react-router';
 
 import styles from './styles.css';
 import {Icon} from 'coral-ui';
-import ActionButton from '../../../components/ActionButton';
+
 import FlagBox from './FlagBox';
 import CommentType from './CommentType';
+import ActionButton from 'coral-admin/src/components/ActionButton';
+import BanUserButton from 'coral-admin/src/components/BanUserButton';
 
 const linkify = new Linkify();
 
@@ -29,6 +31,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>
+          <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id)} />
           <CommentType type={props.commentType} />
         </div>
         <div className={styles.sideActions}>
@@ -40,7 +43,6 @@ const Comment = ({actions = [], ...props}) => {
                             user={props.comment.user}
                             acceptComment={() => props.acceptComment({commentId: props.comment.id})}
                             rejectComment={() => props.rejectComment({commentId: props.comment.id})}
-                            showBanUserDialog={() => props.showBanUserDialog(props.comment.user, props.comment.id)}
               />
             )}
           </div>

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

@@ -1,7 +1,7 @@
 .commentType {
   position: absolute;
-  right: 5px;
-  top: 5px;
+  right: 15px;
+  top: 11px;
   color: white;
   background: grey;
   padding: 2px 13px;

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

@@ -5,10 +5,30 @@
     padding: 0 14px;
   }
 
+  .detail {
+    padding: 0 20px 16px;
+    ul {
+      padding: 0;
+      list-style: none;
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
+
   .header {
     position: relative;
     .moreDetail {
       float: right;
+      font-size: 12px;
+      font-weight: 500;
+      margin-right: 10px;
+      margin-top: 8px;
+      color: black;
+
+      &:hover {
+        opacity: 0.9;
+        cursor: pointer;
+      }
     }
     i {
       vertical-align: middle;

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

@@ -1,22 +1,47 @@
-import React, {PropTypes} from 'react';
+import React, {Component, PropTypes} from 'react';
 import {Icon} from 'coral-ui';
 import styles from './FlagBox.css';
 
-const FlagBox = props => (
-  <div className={styles.flagBox}>
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <Icon name='flag'/><h3>Flags ({props.actionSummaries.length}):</h3>
-        <ul>
-          {props.actionSummaries.map((action, i) =>
-            <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
-          )}
-        </ul>
-        <span className={styles.moreDetail}></span>
+class FlagBox extends Component {
+  constructor () {
+    super();
+    this.state = {
+      showDetail: false
+    };
+  }
+
+  toggleDetail = () => {
+    this.setState((state) => ({
+      showDetail: !state.showDetail
+    }));
+  }
+
+  render() {
+    const {props} = this;
+    return (
+      <div className={styles.flagBox}>
+        <div className={styles.container}>
+          <div className={styles.header}>
+            <Icon name='flag'/><h3>Flags ({props.actionSummaries.length}):</h3>
+            <ul>
+              {props.actionSummaries.map((action, i) =>
+                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+              )}
+            </ul>
+            <a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>
+          </div>
+          {this.state.showDetail && (<div className={styles.detail}>
+            <ul>
+              {props.actionSummaries.map((action, i) =>
+                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+              )}
+            </ul>
+          </div>)}
+        </div>
       </div>
-    </div>
-  </div>
-);
+    );
+  }
+}
 
 FlagBox.propTypes = {
   actionSummaries: PropTypes.array.isRequired

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

@@ -170,11 +170,12 @@ span {
   position: relative;
   transition: box-shadow 200ms;
   margin-top: 0;
-  padding: 20px 0 0;
-  min-height: 187px;
+  padding: 4px 0 0;
+  min-height: 220px;
 
   .container {
     padding: 0 14px;
+    min-height: 180px;
   }
 
   &:hover {
@@ -198,7 +199,7 @@ span {
      right: 0;
      height: 100%;
      top: 0;
-     padding: 40px 18px;
+     padding: 65px 12px;
      box-sizing: border-box;
    }
 

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

@@ -1,13 +1,14 @@
 export const actionsMap = {
-  PREMOD: ['REJECT', 'APPROVE', 'BAN'],
-  FLAGGED: ['REJECT', 'APPROVE', 'BAN'],
-  REJECTED: ['APPROVE']
+  PREMOD: ['APPROVE', 'REJECT'],
+  FLAGGED: ['APPROVE', 'REJECT'],
+  REJECTED: ['APPROVE', 'REJECTED']
 };
 
 export const menuActionsMap = {
-  'REJECT': {status: 'REJECTED', icon: 'close', key: 'r'},
-  'APPROVE': {status: 'ACCEPTED', icon: 'done', key: 't'},
-  'FLAGGED': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
-  'BAN': {status: 'BANNED', icon: 'not interested'},
+  'REJECT': {status: 'REJECTED', text: 'Reject', icon: 'close', key: 'r'},
+  'REJECTED': {status: 'REJECTED', text: 'Rejected', icon: 'close'},
+  'APPROVE': {status: 'ACCEPTED', text: 'Approve', icon: 'done', key: 't'},
+  'FLAGGED': {status: 'FLAGGED', text: 'Flag', icon: 'flag', filter: 'Untouched'},
+  'BAN': {status: 'BANNED', text: 'Ban User', icon: 'not interested'},
   '': {icon: 'done'}
 };

client/coral-ui/components/Button.css

@@ -110,6 +110,82 @@
   background: #00a291;
 }
 
+.type--approve {
+  display: block;
+  color: #519954;
+  border: solid 2px rgba(81, 153, 84, 0.75);
+  background: white;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 24px;
+  font-size: 17px;
+  height: 47px;
+  border-radius: 3px;
+  text-transform: capitalize;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
+  width: 128px;
+
+  &:hover {
+   box-shadow: none;
+   color: white;
+   background-color: #519954;
+  }
+}
+
+.type--reject, .type--rejected {
+  display: block;
+  color: #D03235;
+  border: solid 1px #D03235;
+  background: white;
+  padding: 10px 11px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 24px;
+  font-size: 17px;
+  height: 47px;
+  border-radius: 3px;
+  text-transform: capitalize;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
+  width: 128px;
+
+&:hover {
+   color: white;
+   background-color: #D03235;
+   box-shadow: none;
+ }
+}
+
+.type--rejected {
+  color: white;
+  background-color: #D03235;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.type--ban {
+  display: block;
+  color: #616161;
+  border: solid 2px rgba(97, 97, 97, 0.77);
+  background: white;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 24px;
+  font-size: 17px;
+  height: 47px;
+  border-radius: 3px;
+  text-transform: capitalize;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
+  width: 128px;
+
+&:hover {
+   box-shadow: none;
+   color: white;
+   background-color: #616161;
+ }
+}
+
 .full {
   width: 100%;
   margin: 0;