Flag box

2026-08-13 12:40:11 +08:00 · 2017-02-28 22:35:37 -03:00
parent cdbc065c90
commit 42b380b942
7 changed files with 164 additions and 55 deletions
@@ -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}
@@ -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();

@@ -21,46 +22,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>
+          <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})}
+                            showBanUserDialog={() => props.showBanUserDialog(props.comment.user, 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 +75,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: 5px;
+  top: 5px;
+  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,35 @@
+.flagBox {
+  border-top: 1px solid rgba(66, 66, 66, 0.12);
+
+  .container {
+    padding: 0 14px;
+  }
+
+  .header {
+    position: relative;
+    .moreDetail {
+      float: right;
+    }
+    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,14 +1,20 @@
 import React, {PropTypes} from 'react';
-import styles from './styles.css';
+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 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>
+      </div>
+    </div>
  </div>
 );

@@ -162,16 +162,20 @@ 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: 20px 0 0;
+  min-height: 187px;

+  .container {
+    padding: 0 14px;
+  }

  &:hover {
     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
@@ -213,6 +217,8 @@ span {
  .itemBody {
    display: flex;
    justify-content: space-between;
+    margin-top: 15px;
+    font-size: 16px;
  }

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

  .actionButton {
@@ -310,20 +316,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 +343,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;