diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js index 2bd59b79d..bfb2e197c 100644 --- a/client/coral-admin/src/AppRouter.js +++ b/client/coral-admin/src/AppRouter.js @@ -39,6 +39,9 @@ const routes = ( {/* Moderation Routes */} + + + diff --git a/client/coral-admin/src/components/ActionButton.js b/client/coral-admin/src/components/ActionButton.js index 3bd96abad..1fcafeac0 100644 --- a/client/coral-admin/src/components/ActionButton.js +++ b/client/coral-admin/src/components/ActionButton.js @@ -1,17 +1,24 @@ -import React from 'react'; +import React, {PropTypes} from 'react'; import styles from './ModerationList.css'; import {Button} from 'coral-ui'; import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap'; -const ActionButton = ({type = '', ...props}) => { +const ActionButton = ({type = '', status, ...props}) => { + const typeName = type.toLowerCase(); + const active = ((type === 'REJECT' && status === 'REJECTED') || (type === 'APPROVE' && status === 'ACCEPTED')); + return ( ); }; +ActionButton.propTypes = { + status: PropTypes.string +}; + export default ActionButton; diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css index fc2ba9931..1e871f97c 100644 --- a/client/coral-admin/src/components/ModerationList.css +++ b/client/coral-admin/src/components/ModerationList.css @@ -188,3 +188,15 @@ margin: 0; width: 140px; } + +.approve__active { + box-shadow: none; + color: white; + background-color: #519954; +} + +.reject__active, .rejected__active { + color: white; + background-color: #D03235; + box-shadow: none; +} diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 2c556f36f..dffa4de26 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -135,6 +135,9 @@ class ModerationContainer extends Component { const comments = data[activeTab]; let activeTabCount; switch(activeTab) { + case 'all': + activeTabCount = data.allCount; + break; case 'premod': activeTabCount = data.premodCount; break; @@ -151,6 +154,7 @@ class ModerationContainer extends Component { { const linkText = links ? links.map(link => link.raw) : []; const flagActionSummaries = getActionSummary('FlagActionSummary', comment); const flagActions = comment.actions && comment.actions.filter(a => a.__typename === 'FlagAction'); + let commentType = ''; + if (comment.status === 'PREMOD') { + commentType = 'premod'; + } else if (flagActions && flagActions.length) { + commentType = 'flagged'; + } return (
  • @@ -36,7 +42,7 @@ const Comment = ({actions = [], comment, ...props}) => { {timeago().format(comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} props.showBanUserDialog(comment.user, comment.id, comment.status !== 'REJECTED')} /> - + {comment.user.status === 'banned' ? @@ -64,6 +70,7 @@ const Comment = ({actions = [], comment, ...props}) => { props.acceptComment({commentId: comment.id})} rejectComment={() => props.rejectComment({commentId: comment.id})} /> diff --git a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js index f8d3f0ed4..71b6b9e37 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js @@ -23,7 +23,7 @@ LoadMore.propTypes = { comments: PropTypes.array.isRequired, loadMore: PropTypes.func.isRequired, sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired, - tab: PropTypes.oneOf(['rejected', 'premod', 'flagged']).isRequired, + tab: PropTypes.oneOf(['rejected', 'premod', 'flagged', 'all']).isRequired, assetId: PropTypes.string, showLoadMore: PropTypes.bool.isRequired }; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js index 0606fdb81..032aa740e 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js @@ -4,22 +4,18 @@ import styles from './styles.css'; import {SelectField, Option} from 'react-mdl-selectfield'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-admin/src/translations.json'; +import {Icon} from 'coral-ui'; import {Link} from 'react-router'; const lang = new I18n(translations); const ModerationMenu = ( - {asset, premodCount, rejectedCount, flaggedCount, selectSort, sort} + {asset, allCount, premodCount, rejectedCount, flaggedCount, selectSort, sort} ) => { - const premodPath = asset - ? `/admin/moderate/premod/${asset.id}` - : '/admin/moderate/premod'; - const rejectPath = asset - ? `/admin/moderate/rejected/${asset.id}` - : '/admin/moderate/rejected'; - const flagPath = asset - ? `/admin/moderate/flagged/${asset.id}` - : '/admin/moderate/flagged'; + + function getPath (type) { + return asset ? `/admin/moderate/${type}/${asset.id}` : `/admin/moderate/${type}`; + } return (
    @@ -27,22 +23,28 @@ const ModerationMenu = (
    - {lang.t('modqueue.premod')} + {lang.t('modqueue.all')} - {lang.t('modqueue.flagged')} + {lang.t('modqueue.premod')} - {lang.t('modqueue.rejected')} + {lang.t('modqueue.flagged')} + + + {lang.t('modqueue.rejected')}
    ({limit, cursor, sort, tab, asset_id}) => { let statuses; switch(tab) { + case 'all': + statuses = null; + break; case 'premod': statuses = ['PREMOD']; break; diff --git a/client/coral-admin/src/graphql/queries/modQueueQuery.graphql b/client/coral-admin/src/graphql/queries/modQueueQuery.graphql index da8760be9..f124b87b5 100644 --- a/client/coral-admin/src/graphql/queries/modQueueQuery.graphql +++ b/client/coral-admin/src/graphql/queries/modQueueQuery.graphql @@ -1,6 +1,13 @@ #import "../fragments/commentView.graphql" query ModQueue ($asset_id: ID, $sort: SORT_ORDER) { + all: comments(query: { + statuses: [NONE, PREMOD, ACCEPTED, REJECTED], + asset_id: $asset_id, + sort: $sort + }) { + ...commentView + } premod: comments(query: { statuses: [PREMOD], asset_id: $asset_id, @@ -28,6 +35,9 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) { title url } + allCount: commentCount(query: { + asset_id: $asset_id + }) premodCount: commentCount(query: { statuses: [PREMOD], asset_id: $asset_id diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css index 14ed64aa2..219b70a65 100644 --- a/client/coral-ui/components/Button.css +++ b/client/coral-ui/components/Button.css @@ -149,7 +149,7 @@ 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 { + &:hover { color: white; background-color: #D03235; box-shadow: none; diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js index 11432c753..b7c49a799 100644 --- a/client/coral-ui/components/Icon.js +++ b/client/coral-ui/components/Icon.js @@ -1,8 +1,12 @@ -import React from 'react'; +import React, {PropTypes} from 'react'; import {Icon as IconMDL} from 'react-mdl'; const Icon = ({className = '', name}) => ( ); +Icon.propTypes = { + name: PropTypes.string.isRequired +}; + export default Icon;