From 42b380b942ac56066f93101fbfb189e767c91abe Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 28 Feb 2017 22:35:37 -0300 Subject: [PATCH] Flag box --- .../ModerationQueue/ModerationQueue.js | 1 + .../ModerationQueue/components/Comment.js | 60 ++++++++++--------- .../components/CommentType.css | 33 ++++++++++ .../ModerationQueue/components/CommentType.js | 30 ++++++++++ .../ModerationQueue/components/FlagBox.css | 35 +++++++++++ .../ModerationQueue/components/FlagBox.js | 20 ++++--- .../ModerationQueue/components/styles.css | 40 +++++++------ 7 files changed, 164 insertions(+), 55 deletions(-) create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/CommentType.css create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/CommentType.js create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index 0d48acc92..23ed45f2e 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/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} diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js index b39eeb2f8..98e24f92a 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js +++ b/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(); @@ -21,46 +22,48 @@ const Comment = ({actions = [], ...props}) => { return (
  • -
    +
    +
    {props.comment.user.name} - {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} - - {props.comment.action_summaries ?

    {lang.t('comment.flagged')}

    : null} + {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} + +
    {links ? Contains Link : null} -
    - {actions.map((action, i) => - props.acceptComment({commentId: props.comment.id})} - rejectComment={() => props.rejectComment({commentId: props.comment.id})} - showBanUserDialog={() => props.showBanUserDialog(props.comment.user, props.comment.id)} - /> - )} -
    +
    + {actions.map((action, i) => + props.acceptComment({commentId: props.comment.id})} + rejectComment={() => props.rejectComment({commentId: props.comment.id})} + showBanUserDialog={() => props.showBanUserDialog(props.comment.user, props.comment.id)} + /> + )} +
    {props.comment.user.status === 'banned' ? - + {lang.t('comment.banned_user')} - - : null} + + : null}
    - {!props.currentAsset && ( -
    - Article: {props.comment.asset.title} Moderate Article + {!props.currentAsset && ( +
    + Story: {props.comment.asset.title} Moderate → +
    + )} +
    +

    + + + +

    - )} -
    -

    - - - -

    {actionSummaries && }
    • @@ -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, diff --git a/client/coral-admin/src/containers/ModerationQueue/components/CommentType.css b/client/coral-admin/src/containers/ModerationQueue/components/CommentType.css new file mode 100644 index 000000000..42c0b75f0 --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/components/CommentType.css @@ -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; + } +} diff --git a/client/coral-admin/src/containers/ModerationQueue/components/CommentType.js b/client/coral-admin/src/containers/ModerationQueue/components/CommentType.js new file mode 100644 index 000000000..5ad4138ca --- /dev/null +++ b/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 ( + + {typeData.text} + + ); +}; + +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; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css new file mode 100644 index 000000000..0806c30c3 --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css @@ -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; + } +} diff --git a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js index 6140abd90..f30d32662 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js @@ -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 => (
    -

    Flags:

    - +
    +
    +

    Flags ({props.actionSummaries.length}):

    +
      + {props.actionSummaries.map((action, i) => +
    • {!action.reason ? No reason provided : action.reason} ({action.count})
      • + )} +
    + +
    +
    ); diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index 27d5c2533..fdaf01439 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -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;