Merge pull request #355 from coralproject/comment-component

UX Comment Component
2026-07-24 13:20:47 +08:00 · 2017-03-01 11:03:54 -05:00
parent 0af08fcaea 6cd0c12ba4
commit a984fc9beb
16 changed files with 313 additions and 81 deletions
@@ -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>
  );
 };

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

  i {
    vertical-align: middle;
@@ -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}
@@ -19,6 +19,7 @@
  background: #E5E5E5;
  height: 100%;
  width: 128px;
+  z-index: 10;
 }

 .base {
@@ -80,6 +80,7 @@ class ModerationContainer extends Component {
        <ModerationQueue
          currentAsset={asset}
          comments={comments}
+          activeTab={activeTab}
          suspectWords={settings.wordlist.suspect}
          showBanUserDialog={props.showBanUserDialog}
          acceptComment={props.acceptComment}
@@ -19,6 +19,7 @@ const ModerationQueue = ({comments, ...props}) => {
            key={i}
            index={i}
            comment={comment}
+            commentType={props.activeTab}
            suspectWords={props.suspectWords}
            actions={actionsMap[status]}
            showBanUserDialog={props.showBanUserDialog}
@@ -6,8 +6,10 @@ 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();

@@ -21,46 +23,48 @@ const Comment = ({actions = [], ...props}) => {
  return (
    <li tabIndex={props.index}
        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.itemHeader}>
+      <div className={styles.container}>
+        <div className={styles.itemHeader}>
        <div className={styles.author}>
          <span>{props.comment.user.name}</span>
          <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}
+              {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}>
          {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
-           <div className={`actions ${styles.actions}`}>
-             {actions.map((action, i) =>
-               <ActionButton key={i}
-                 type={action}
-                 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>
+          <div className={`actions ${styles.actions}`}>
+            {actions.map((action, i) =>
+              <ActionButton key={i}
+                            type={action}
+                            user={props.comment.user}
+                            acceptComment={() => props.acceptComment({commentId: props.comment.id})}
+                            rejectComment={() => props.rejectComment({commentId: props.comment.id})}
+              />
+            )}
+          </div>
          {props.comment.user.status === 'banned' ?
            <span className={styles.banned}>
-              <Icon name='error_outline'/>
+                <Icon name='error_outline'/>
              {lang.t('comment.banned_user')}
-            </span>
-          : null}
+              </span>
+            : null}
        </div>
      </div>
-      {!props.currentAsset && (
-        <div className={styles.moderateArticle}>
-          Article: {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate Article</Link>
+        {!props.currentAsset && (
+          <div className={styles.moderateArticle}>
+            Story: {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate &rarr;</Link>
+          </div>
+        )}
+        <div className={styles.itemBody}>
+          <p className={styles.body}>
+            <Linkify component='span' properties={{style: linkStyles}}>
+              <Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
+            </Linkify>
+          </p>
        </div>
-      )}
-      <div className={styles.itemBody}>
-        <p className={styles.body}>
-          <Linkify component='span' properties={{style: linkStyles}}>
-            <Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
-          </Linkify>
-        </p>
      </div>
      {actionSummaries && <FlagBox actionSummaries={actionSummaries} />}
    </li>
@@ -72,7 +76,6 @@ Comment.propTypes = {
  rejectComment: PropTypes.func.isRequired,
  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
  currentAsset: PropTypes.object,
-  isActive: PropTypes.bool.isRequired,
  comment: PropTypes.shape({
    body: PropTypes.string.isRequired,
    action_summaries: PropTypes.array,
@@ -0,0 +1,33 @@
+.commentType {
+  position: absolute;
+  right: 15px;
+  top: 11px;
+  color: white;
+  background: grey;
+  padding: 2px 13px;
+  font-size: 14px;
+  height: 32px;
+  box-sizing: border-box;
+  line-height: 29px;
+  padding-left: 26px;
+
+  i {
+    font-size: 14px;
+    position: absolute;
+    left: 6px;
+    top: 8px;
+    margin: 0;
+  }
+
+  &.premod {
+    background: #063B9A;
+  }
+
+  &.flagged {
+    background: #d03235;
+  }
+
+  &.no-type {
+    display: none;
+  }
+}
@@ -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: '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;
@@ -0,0 +1,55 @@
+.flagBox {
+  border-top: 1px solid rgba(66, 66, 66, 0.12);
+
+  .container {
+    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;
+      font-size: 12px;
+    }
+    ul {
+      vertical-align: middle;
+      list-style: none;
+      display: inline-block;
+      padding: 0;
+      margin-left: 10px;
+      font-size: 12px;
+    }
+  }
+
+  h3 {
+    vertical-align: middle;
+    margin: 0;
+    font-weight: 500;
+    display: inline-block;
+    margin-left: 7px;
+    font-size: 12px;
+  }
+}
@@ -1,16 +1,47 @@
-import React, {PropTypes} from 'react';
-import styles from './styles.css';
+import React, {Component, PropTypes} from 'react';
+import {Icon} from 'coral-ui';
+import styles from './FlagBox.css';

-const FlagBox = props => (
-  <div className={styles.flagBox}>
-    <h3>Flags:</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>
-  </div>
-);
+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>
+    );
+  }
+}

 FlagBox.propTypes = {
  actionSummaries: PropTypes.array.isRequired
@@ -162,16 +162,21 @@ span {

 .listItem {
  border-bottom: 1px solid #e0e0e0;
-  font-size: 16px;
+  font-size: 18px;
  width: 100%;
  max-width: 660px;
  min-width: 400px;
  margin: 0 auto;
-  padding: 16px 14px;
  position: relative;
  transition: box-shadow 200ms;
  margin-top: 0;
+  padding: 4px 0 0;
+  min-height: 220px;

+  .container {
+    padding: 0 14px;
+    min-height: 220px;
+  }

  &:hover {
     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
@@ -194,7 +199,7 @@ span {
     right: 0;
     height: 100%;
     top: 0;
-     padding: 40px 18px;
+     padding: 100px 12px 65px;
     box-sizing: border-box;
   }

@@ -213,6 +218,8 @@ span {
  .itemBody {
    display: flex;
    justify-content: space-between;
+    margin-top: 15px;
+    font-size: 16px;
  }

  .avatar {
@@ -228,7 +235,7 @@ span {
  .created {
    color: #666;
    font-size: 13px;
-    margin-left: 40px;
+    margin-left: 15px;
  }

  .actionButton {
@@ -310,20 +317,26 @@ span {
 }

 .Comment {
+
  .moderateArticle {
-    font-size: 12px;
+    font-size: 15px;
+    margin-top: 14px;
+    font-weight: 500;
    a {
      display: inline-block;
-      color: #679af3;
+      color: #063b9a;
      text-decoration: none;
-      font-size: 1em;
-      font-weight: 400;
+      font-weight: 500;
      letter-spacing: .5px;
-      font-size: 12px;
      margin-left: 10px;

+      font-size: 13px;
+      margin-left: 5px;
+      padding-bottom: 0px;
+      border-bottom: solid 1px;
+      line-height: 16px;
+
      &:hover {
-        text-decoration: underline;
        opacity: .9;
        cursor: pointer;
       }
@@ -331,16 +344,6 @@ span {
  }
 }

-.flagBox {
-  max-width: 480px;
-  border-top: 1px solid rgba(66, 66, 66, 0.12);
-  h3 {
-    font-size: 14px;
-    margin: 0;
-    font-weight: 500;
-  }
-}
-
 .selectField {
  position: relative;
  width: 140px;
@@ -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'}
 };
@@ -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
@@ -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;