From 061efd47343e3797a65a60451b78c09577d403eb Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 28 Feb 2017 09:03:19 -0300 Subject: [PATCH 1/5] Comment Component Design --- client/coral-admin/src/components/ui/Logo.css | 1 + .../ModerationQueue/ModerationQueue.js | 1 + .../ModerationQueue/components/Comment.css | 0 .../ModerationQueue/components/Comment.js | 4 ++- .../components/CommentType.css | 25 ++++++++++++++++ .../ModerationQueue/components/CommentType.js | 30 +++++++++++++++++++ .../ModerationQueue/components/styles.css | 5 ++++ client/coral-admin/src/services/client.js | 1 + 8 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/Comment.css create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/CommentType.css create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/CommentType.js diff --git a/client/coral-admin/src/components/ui/Logo.css b/client/coral-admin/src/components/ui/Logo.css index 498d5596c..af2758bcb 100644 --- a/client/coral-admin/src/components/ui/Logo.css +++ b/client/coral-admin/src/components/ui/Logo.css @@ -19,6 +19,7 @@ background: #E5E5E5; height: 100%; width: 128px; + z-index: 10; } .base { 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.css b/client/coral-admin/src/containers/ModerationQueue/components/Comment.css new file mode 100644 index 000000000..e69de29bb diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js index b39eeb2f8..61ed1552d 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(); @@ -18,6 +19,7 @@ const lang = new I18n(translations); const Comment = ({actions = [], ...props}) => { const links = linkify.getMatches(props.comment.body); const actionSummaries = props.comment.action_summaries; + console.log(props) return (
  • @@ -27,7 +29,7 @@ const Comment = ({actions = [], ...props}) => { {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} - {props.comment.action_summaries ?

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

    : null} +
    {links ? Contains Link : null} 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..5d8eeea12 --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/components/CommentType.css @@ -0,0 +1,25 @@ +.commentType { + position: absolute; + right: 5px; + top: 5px; + color: white; + background: grey; + padding: 2px 7px; + font-size: 14px; + height: 32px; + box-sizing: border-box; + line-height: 29px; + + i { + font-size: 14px; + margin-right: 7px; + } + + &.premod { + background: #063B9A; + } + + &.flagged { + background: #d03235; + } +} 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..b2e58cf5e --- /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: 'clock', text: 'Pre-Mod', className: 'premod'}; + case 'flagged': + return {icon: 'flag', text: 'Flagged', className: 'flagged'}; + default: + return {icon: 'flag', text: 'no-type', className: 'non'}; + } +}; + +CommentType.propTypes = { + type: PropTypes.string.isRequired +}; + +export default CommentType; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index 27d5c2533..a50d7d6e0 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -310,6 +310,11 @@ span { } .Comment { + + .commentType { + background: red; + } + .moderateArticle { font-size: 12px; a { diff --git a/client/coral-admin/src/services/client.js b/client/coral-admin/src/services/client.js index 40a539634..7f6a0567d 100644 --- a/client/coral-admin/src/services/client.js +++ b/client/coral-admin/src/services/client.js @@ -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 From 42b380b942ac56066f93101fbfb189e767c91abe Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 28 Feb 2017 22:35:37 -0300 Subject: [PATCH 2/5] 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; From ea0602b7a55cf1e2bcaf2caff2fc51a76ebc2855 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 1 Mar 2017 11:42:08 -0300 Subject: [PATCH 3/5] Design Comment Component --- .../src/components/ActionButton.js | 13 +--- .../src/components/BanUserButton.css | 5 +- .../src/components/BanUserButton.js | 2 +- .../ModerationQueue/ModerationContainer.js | 4 +- .../ModerationQueue/ModerationQueue.js | 20 +++-- .../ModerationQueue/components/Comment.js | 6 +- .../components/CommentType.css | 4 +- .../ModerationQueue/components/FlagBox.css | 20 +++++ .../ModerationQueue/components/FlagBox.js | 55 ++++++++++---- .../ModerationQueue/components/styles.css | 7 +- .../helpers/moderationQueueActionsMap.js | 15 ++-- client/coral-ui/components/Button.css | 76 +++++++++++++++++++ 12 files changed, 174 insertions(+), 53 deletions(-) diff --git a/client/coral-admin/src/components/ActionButton.js b/client/coral-admin/src/components/ActionButton.js index 1d1d4d9d0..3bd96abad 100644 --- a/client/coral-admin/src/components/ActionButton.js +++ b/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 props.showBanUserDialog(props.user, props.id)} />; - } - +const ActionButton = ({type = '', ...props}) => { return ( - + >{menuActionsMap[type].text} ); }; diff --git a/client/coral-admin/src/components/BanUserButton.css b/client/coral-admin/src/components/BanUserButton.css index 79b805c30..36243348f 100644 --- a/client/coral-admin/src/components/BanUserButton.css +++ b/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; diff --git a/client/coral-admin/src/components/BanUserButton.js b/client/coral-admin/src/components/BanUserButton.js index 191164ca5..a54cdd322 100644 --- a/client/coral-admin/src/components/BanUserButton.js +++ b/client/coral-admin/src/components/BanUserButton.js @@ -8,7 +8,7 @@ const lang = new I18n(translations); const BanUserButton = ({user, ...props}) => (
    -