From 061efd47343e3797a65a60451b78c09577d403eb Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 28 Feb 2017 09:03:19 -0300 Subject: [PATCH] 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