diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index 6cb623978..b1b1ebbaf 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/client/coral-admin/src/containers/Configure/Configure.css @@ -90,6 +90,11 @@ .configTimeoutSelect { display: inline-block; margin-left: 20px; + + i { /* fix for firefox and react-mdl-selectfield@0.2.0 */ + padding: 20px 0; + vertical-align: top; + } } .charCountTexfield { diff --git a/client/coral-admin/src/containers/Configure/StreamSettings.js b/client/coral-admin/src/containers/Configure/StreamSettings.js index 5530bc6cd..f77013bc0 100644 --- a/client/coral-admin/src/containers/Configure/StreamSettings.js +++ b/client/coral-admin/src/containers/Configure/StreamSettings.js @@ -171,6 +171,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => { + {/* the above card should be the last one if at all possible because of z-index issues with the selects */} ); }; diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index 4b86ec7d7..7d2ffe17a 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -12,43 +12,29 @@ const FlagWidget = (props) => { return (

Articles with the most flags

- - - - - - - - - { - assets.length - ? assets.map(asset => { - const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary'); - return ( - - - - - - ); - }) - : - } - { /* rows in a table with a fixed height will expand and ignore height. - this extra row will expand to fill the extra space. */ - assets.length < 10 ? : null - } - -
{lang.t('streams.article')}{lang.t('dashboard.flags')}
- -

{asset.title}

-

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

- -
-

{flagSummary ? flagSummary.actionCount : 0}

-
- Moderate -
{lang.t('dashboard.no_flags')}
+
+

{lang.t('streams.article')}

+

{lang.t('dashboard.flags')}

+
+
+ { + assets.length + ? assets.map(asset => { + const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary'); + return ( +
+ Moderate +

{flagSummary ? flagSummary.actionCount : 0}

+ +

{asset.title}

+ +

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

+
+ ); + }) + :
{lang.t('dashboard.no_flags')}
+ } +
); }; diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index d52676ae4..436fbcaf3 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -13,43 +13,29 @@ const LikeWidget = (props) => { return (

Articles with the most likes

- - - - - - - - - { - assets.length - ? assets.map(asset => { - const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary'); - return ( - - - - - - ); - }) - : - } - { /* rows in a table with a fixed height will expand and ignore height. - this extra row will expand to fill the extra space. */ - assets.length < 10 ? : null - } - -
{lang.t('streams.article')}{lang.t('modqueue.likes')}
- -

{asset.title}

-

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

- -
-

{likeSummary ? likeSummary.actionCount : 0}

-
- Moderate -
{lang.t('dashboard.no_likes')}
+
+

{lang.t('streams.article')}

+

{lang.t('modqueue.likes')}

+
+
+ { + assets.length + ? assets.map(asset => { + const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary'); + return ( +
+ Moderate +

{likeSummary ? likeSummary.actionCount : 0}

+ +

{asset.title}

+ +

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

+
+ ); + }) + :
{lang.t('dashboard.no_likes')}
+ } +
); }; diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css index 3170cf332..124663cea 100644 --- a/client/coral-admin/src/containers/Dashboard/Widget.css +++ b/client/coral-admin/src/containers/Dashboard/Widget.css @@ -1,5 +1,5 @@ :root { - --row-height: 80px; + --row-height: 60px; } .widget { @@ -11,6 +11,10 @@ background-color: white; } +.widget * { + box-sizing: border-box; +} + .heading { margin: 0; padding-left: 10px; @@ -19,21 +23,28 @@ } .widgetTable { - width: 100%; - border-collapse: collapse; - user-select: none; height: calc(var(--row-height) * 10); } -.widgetTable thead th { +.widgetTable + div:after { + content: ''; + clear: both; + display: block; +} + +.widgetHead p { color: rgb(35, 102, 223); padding: 10px; text-align: left; text-transform: capitalize; + display: inline-block; + box-sizing: border-box; + margin-bottom: 0; } -.widgetTable thead th:last-child { - width: 10%; +.widgetHead p:last-child { + float: right; + margin-right: 100px; } .rowLinkify { @@ -41,6 +52,7 @@ border-bottom: 1px solid lightgrey; color: #555; height: var(--row-height); + padding: 10px; } .rowLinkify:last-child { @@ -51,16 +63,8 @@ background-color: #f8f8f8; } -.widgetTable tbody td { - padding: 10px; -} - -.widgetTable tbody td:last-child { - padding-top: 0; -} - .linkToAsset { - display: block; + display: inline-block; text-decoration: none; } @@ -69,6 +73,8 @@ padding: 10px 14px; text-decoration: none; color: black; + float: right; + margin-left: 15px; } .linkToModerate:hover { @@ -96,4 +102,6 @@ color: #555; font-size: 1.3em; font-weight: 400; + float: right; + margin-top: 7px; } diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 06b9b8a68..d936d840f 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -21,7 +21,8 @@ import ModerationKeysModal from '../../components/ModerationKeysModal'; class ModerationContainer extends Component { state = { - selectedIndex: 0 + selectedIndex: 0, + sort: 'REVERSE_CHRONOLOGICAL' } componentWillMount() { @@ -74,6 +75,11 @@ class ModerationContainer extends Component { } } + selectSort = (sort) => { + this.setState({sort}); + this.props.modQueueResort(sort); + } + componentWillUnmount() { key.unbind('s'); key.unbind('shift+/'); @@ -92,7 +98,7 @@ class ModerationContainer extends Component { } render () { - const {data, moderation, settings, assets, modQueueResort, onClose, ...props} = this.props; + const {data, moderation, settings, assets, onClose, ...props} = this.props; const providedAssetId = this.props.params.id; const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path; @@ -115,6 +121,18 @@ class ModerationContainer extends Component { } const comments = data[activeTab]; + let activeTabCount; + switch(activeTab) { + case 'premod': + activeTabCount = data.premodCount; + break; + case 'flagged': + activeTabCount = data.flaggedCount; + break; + case 'rejected': + activeTabCount = data.rejectedCount; + break; + } return (
@@ -124,7 +142,8 @@ class ModerationContainer extends Component { premodCount={data.premodCount} rejectedCount={data.rejectedCount} flaggedCount={data.flaggedCount} - modQueueResort={modQueueResort} + selectSort={this.selectSort} + sort={this.state.sort} /> { +const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props}) => { return (
    @@ -20,7 +21,7 @@ const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => { key={i} index={i} comment={comment} - commentType={props.activeTab} + commentType={activeTab} selected={i === selectedIndex} suspectWords={props.suspectWords} actions={actionsMap[status]} @@ -33,6 +34,14 @@ const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => { : {lang.t('modqueue.emptyqueue')} }
+
); }; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js new file mode 100644 index 000000000..f8d3f0ed4 --- /dev/null +++ b/client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js @@ -0,0 +1,31 @@ +import React, {PropTypes} from 'react'; +import {Button} from 'coral-ui'; +import styles from './styles.css'; + +const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) => +
+ { + showLoadMore && + } +
; + +LoadMore.propTypes = { + comments: PropTypes.array.isRequired, + loadMore: PropTypes.func.isRequired, + sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired, + tab: PropTypes.oneOf(['rejected', 'premod', 'flagged']).isRequired, + assetId: PropTypes.string, + showLoadMore: PropTypes.bool.isRequired +}; + +export default LoadMore; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js index f9b0c266f..b8160e21b 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js @@ -1,4 +1,4 @@ -import React, {PropTypes, Component} from 'react'; +import React, {PropTypes} from 'react'; import CommentCount from './CommentCount'; import styles from './styles.css'; import {SelectField, Option} from 'react-mdl-selectfield'; @@ -8,57 +8,45 @@ import {Link} from 'react-router'; const lang = new I18n(translations); -class ModerationMenu extends Component { - state = { - sort: 'REVERSE_CHRONOLOGICAL', - } - - static propTypes = { - premodCount: PropTypes.number.isRequired, - rejectedCount: PropTypes.number.isRequired, - flaggedCount: PropTypes.number.isRequired, - asset: PropTypes.shape({ - id: PropTypes.string - }) - } - - selectSort = (sort) => { - this.setState({sort}); - this.props.modQueueResort(sort); - } - - render() { - const {asset, premodCount, rejectedCount, flaggedCount} = this.props; - 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'; - return ( -
-
-
-
- - {lang.t('modqueue.premod')} - - - {lang.t('modqueue.rejected')} - - - {lang.t('modqueue.flagged')} - -
- this.selectSort(sort)}> - - - +const ModerationMenu = ({asset, 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'; + return ( +
+
+
+
+ + {lang.t('modqueue.premod')} + + + {lang.t('modqueue.rejected')} + + + {lang.t('modqueue.flagged')} +
+ selectSort(sort)}> + + +
- ); - } -} +
+ ); +}; + +ModerationMenu.propTypes = { + premodCount: PropTypes.number.isRequired, + rejectedCount: PropTypes.number.isRequired, + flaggedCount: PropTypes.number.isRequired, + asset: PropTypes.shape({ + id: PropTypes.string + }) +}; export default ModerationMenu; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index 627cde5e4..9576045de 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -394,3 +394,23 @@ span { cursor: pointer; } } + +.loadMoreContainer { + display: flex; + justify-content: center; + width: 100%; +}; + +.loadMore { + width: 100%; + text-align: center; + color: #FFF; + max-width: 660px; + margin-bottom: 30px; + background-color: #2376D8; + cursor: pointer; +} + +.loadMore:hover { + background-color: #4399FF; +} diff --git a/client/coral-admin/src/containers/Streams/Streams.js b/client/coral-admin/src/containers/Streams/Streams.js index 96130fcba..bd5ce6e85 100644 --- a/client/coral-admin/src/containers/Streams/Streams.js +++ b/client/coral-admin/src/containers/Streams/Streams.js @@ -80,8 +80,8 @@ class Streams extends Component {
- {closed ? lang.t('streams.closed') : lang.t('streams.open')} {!statusMenuOpen && } + {closed ? lang.t('streams.closed') : lang.t('streams.open')}
{ statusMenuOpen && diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index e911402b0..291ea6bc5 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -1,6 +1,7 @@ import {graphql} from 'react-apollo'; import MOD_QUEUE_QUERY from './modQueueQuery.graphql'; +import MOD_QUEUE_LOAD_MORE from './loadMore.graphql'; import MOD_USER_FLAGGED_QUERY from './modUserFlaggedQuery.graphql'; import METRICS from './metricsQuery.graphql'; @@ -15,7 +16,8 @@ export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { }, props: ({ownProps: {params: {id = null}}, data}) => ({ data, - modQueueResort: modQueueResort(id, data.fetchMore) + modQueueResort: modQueueResort(id, data.fetchMore), + loadMore: loadMore(data.fetchMore) }) }); @@ -31,6 +33,40 @@ export const getMetrics = graphql(METRICS, { } }); +export const loadMore = (fetchMore) => ({limit, cursor, sort, tab, asset_id}) => { + let statuses; + switch(tab) { + case 'premod': + statuses = ['PREMOD']; + break; + case 'flagged': + statuses = ['NONE', 'PREMOD']; + break; + case 'rejected': + statuses = ['REJECTED']; + break; + } + return fetchMore({ + query: MOD_QUEUE_LOAD_MORE, + variables: { + limit, + cursor, + sort, + statuses, + asset_id + }, + updateQuery: (oldData, {fetchMoreResult:{data:{comments}}}) => { + return { + ...oldData, + [tab]: [ + ...oldData[tab], + ...comments + ] + }; + } + }); +}; + export const modUserFlaggedQuery = graphql(MOD_USER_FLAGGED_QUERY); export const modQueueResort = (id, fetchMore) => (sort) => { diff --git a/client/coral-admin/src/graphql/queries/loadMore.graphql b/client/coral-admin/src/graphql/queries/loadMore.graphql new file mode 100644 index 000000000..56966a804 --- /dev/null +++ b/client/coral-admin/src/graphql/queries/loadMore.graphql @@ -0,0 +1,13 @@ +#import "../fragments/commentView.graphql" + +query LoadMoreModQueue($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!]) { + comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort}) { + ...commentView + action_summaries { + count + ... on FlagActionSummary { + reason + } + } + } +}