From 7be3b05f226176e6e1a280f552648e0f9ca30fed Mon Sep 17 00:00:00 2001 From: David Jay Date: Thu, 2 Mar 2017 14:51:51 -0500 Subject: [PATCH 1/5] Re-enabling keyboard shortcut menu. --- .../src/containers/ModerationQueue/ModerationContainer.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 40f19b5a1..48741c2ad 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -17,13 +17,13 @@ import ModerationQueue from './ModerationQueue'; import ModerationMenu from './components/ModerationMenu'; import ModerationHeader from './components/ModerationHeader'; import NotFoundAsset from './components/NotFoundAsset'; +import ModerationKeysModal from '../../components/ModerationKeysModal'; class ModerationContainer extends Component { componentWillMount() { const {toggleModal, singleView} = this.props; this.props.fetchSettings(); - key('s', () => singleView()); key('shift+/', () => toggleModal(true)); key('esc', () => toggleModal(false)); @@ -43,7 +43,7 @@ class ModerationContainer extends Component { } render () { - const {data, moderation, settings, assets, modQueueResort, ...props} = this.props; + const {data, moderation, settings, assets, modQueueResort, onClose, ...props} = this.props; const providedAssetId = this.props.params.id; const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path; @@ -92,6 +92,9 @@ class ModerationContainer extends Component { handleClose={props.hideBanUserDialog} handleBanUser={props.banUser} /> + ); } From 78be17ec6d5ac51106608c6c41d021cc7ce57861 Mon Sep 17 00:00:00 2001 From: David Jay Date: Thu, 2 Mar 2017 15:19:33 -0500 Subject: [PATCH 2/5] Adding keyboard selection of comments. --- client/coral-admin/src/components/Comment.js | 71 ------------------- .../src/components/ModerationList.css | 4 ++ .../ModerationQueue/ModerationContainer.js | 8 +++ .../ModerationQueue/ModerationQueue.js | 3 +- .../ModerationQueue/components/Comment.js | 2 +- .../ModerationQueue/components/styles.css | 4 ++ 6 files changed, 19 insertions(+), 73 deletions(-) delete mode 100644 client/coral-admin/src/components/Comment.js diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js deleted file mode 100644 index db5cfe5bf..000000000 --- a/client/coral-admin/src/components/Comment.js +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import timeago from 'timeago.js'; -import Linkify from 'react-linkify'; - -import styles from './ModerationList.css'; - -import I18n from 'coral-framework/modules/i18n/i18n'; -import translations from '../translations.json'; - -import Highlighter from 'react-highlight-words'; -import {Icon} from 'coral-ui'; -import ActionButton from './ActionButton'; - -const linkify = new Linkify(); - -// Render a single comment for the list -const Comment = props => { - const {comment, author} = props; - let authorStatus = author.status; - const links = linkify.getMatches(comment.body); - - return ( -
  • -
    -
    - {author.username || lang.t('comment.anon')} - {timeago().format(comment.createdAt || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))} - {comment.flagged ?

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

    : null} -
    -
    - {links ? - Contains Link : null} -
    - {props.modActions.map( - (action, i) => - - )} -
    - {authorStatus === 'banned' ? - {lang.t('comment.banned_user')} : null} -
    -
    -
    - - - - - -
    -
    • - ); -}; - -export default Comment; - -const linkStyles = { - backgroundColor: 'rgb(255, 219, 135)', - padding: '1px 2px' -}; - -const lang = new I18n(translations); diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css index 140f4bc8f..7036998d1 100644 --- a/client/coral-admin/src/components/ModerationList.css +++ b/client/coral-admin/src/components/ModerationList.css @@ -178,6 +178,10 @@ } } +.selected { + border-radius: 10px; +} + .actionButton { transform: scale(.8); diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 48741c2ad..1505316cd 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -20,13 +20,20 @@ import NotFoundAsset from './components/NotFoundAsset'; import ModerationKeysModal from '../../components/ModerationKeysModal'; class ModerationContainer extends Component { + state = { + selectedIndex: 0 + } + componentWillMount() { const {toggleModal, singleView} = this.props; + const {selectedIndex} = this.state; this.props.fetchSettings(); key('s', () => singleView()); key('shift+/', () => toggleModal(true)); key('esc', () => toggleModal(false)); + key('j', () => this.setState({selectedIndex: selectedIndex + 1})); + key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex})); } componentWillUnmount() { @@ -81,6 +88,7 @@ class ModerationContainer extends Component { currentAsset={asset} comments={comments} activeTab={activeTab} + selectedIndex={this.state.selectedIndex} suspectWords={settings.wordlist.suspect} showBanUserDialog={props.showBanUserDialog} acceptComment={props.acceptComment} diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index cdbc7f28c..e3ba12b09 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -7,7 +7,7 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-admin/src/translations'; const lang = new I18n(translations); -const ModerationQueue = ({comments, ...props}) => { +const ModerationQueue = ({comments, selectedIndex, ...props}) => { return (
      @@ -20,6 +20,7 @@ const ModerationQueue = ({comments, ...props}) => { index={i} comment={comment} commentType={props.activeTab} + selected={i === selectedIndex} 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 3a82af2cd..683a7abd4 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js @@ -22,7 +22,7 @@ const Comment = ({actions = [], ...props}) => { const actionSummaries = props.comment.action_summaries; return (
    • + className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
      diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index 6db537eef..b2d59cb1a 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -186,6 +186,10 @@ span { border-bottom: none; } + &.selected { + box-shadow: 0px 0px 15px 5px rgb(255, 255, 111); + } + .context { a { color: #f36451; From 1146f22613d9a9a427ddbd4aa8ece95e0e84b0ff Mon Sep 17 00:00:00 2001 From: David Jay Date: Thu, 2 Mar 2017 15:41:51 -0500 Subject: [PATCH 3/5] Accepting and rejecting comments w/ keystrokes. --- .../ModerationQueue/ModerationContainer.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 1505316cd..32a7d0200 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -34,12 +34,33 @@ class ModerationContainer extends Component { key('esc', () => toggleModal(false)); key('j', () => this.setState({selectedIndex: selectedIndex + 1})); key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex})); + key('r', () => this.moderate(false)); + key('t', () => this.moderate(true)); + } + + moderate = (accept) => { + const {data, route, acceptComment, rejectComment} = this.props; + const {selectedIndex} = this.state; + const activeTab = route.path === ':id' ? 'premod' : route.path; + const comments = data[activeTab]; + const commentId = {commentId: comments[selectedIndex].id}; + + if (accept) { + acceptComment(commentId); + } else { + rejectComment(commentId); + } + } componentWillUnmount() { key.unbind('s'); key.unbind('shift+/'); key.unbind('esc'); + key.unbind('j'); + key.unbind('k'); + key.unbind('r'); + key.unbind('t'); } componentWillReceiveProps(nextProps) { From d554bf5211690856226558779ba5e082a28143cb Mon Sep 17 00:00:00 2001 From: David Jay Date: Thu, 2 Mar 2017 16:03:18 -0500 Subject: [PATCH 4/5] Adding single view and restyling selected comment. --- .../src/containers/ModerationQueue/ModerationContainer.js | 1 + .../src/containers/ModerationQueue/ModerationQueue.js | 5 +++-- .../src/containers/ModerationQueue/components/Comment.js | 2 +- .../src/containers/ModerationQueue/components/styles.css | 5 +++-- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index 32a7d0200..25a7a9511 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -109,6 +109,7 @@ class ModerationContainer extends Component { currentAsset={asset} comments={comments} activeTab={activeTab} + singleView={moderation.singleView} selectedIndex={this.state.selectedIndex} suspectWords={settings.wordlist.suspect} showBanUserDialog={props.showBanUserDialog} diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js index e3ba12b09..58fdd1398 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js @@ -1,15 +1,16 @@ import React, {PropTypes} from 'react'; import Comment from './components/Comment'; +import styles from './components/styles.css'; import EmptyCard from '../../components/EmptyCard'; import {actionsMap} from './helpers/moderationQueueActionsMap'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from 'coral-admin/src/translations'; const lang = new I18n(translations); -const ModerationQueue = ({comments, selectedIndex, ...props}) => { +const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => { return ( -
      +
        { comments.length diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js index 683a7abd4..54eac691b 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js +++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js @@ -22,7 +22,7 @@ const Comment = ({actions = [], ...props}) => { const actionSummaries = props.comment.action_summaries; return (
      • + className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
        diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index b2d59cb1a..5a4a42cca 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -136,7 +136,7 @@ span { display: none; } - &.singleView .listItem.activeItem { + &.singleView .listItem.selected { display: block; height: 100%; font-size: 1.5em; @@ -187,7 +187,8 @@ span { } &.selected { - box-shadow: 0px 0px 15px 5px rgb(255, 255, 111); + max-width: 670px; + max-height: 410px; } .context { From 57a7000e5901a9c23b7c1c3ed06ebcac631557f2 Mon Sep 17 00:00:00 2001 From: David Jay Date: Thu, 2 Mar 2017 16:08:24 -0500 Subject: [PATCH 5/5] Animating transition in mod queue. --- .../src/containers/ModerationQueue/components/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index 5a4a42cca..cdd03bca8 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -168,7 +168,7 @@ span { min-width: 400px; margin: 0 auto; position: relative; - transition: box-shadow 200ms; + transition: all 200ms; margin-top: 0; padding: 4px 0 0; min-height: 220px;