Merged branch master into suspect-wordlist

client/coral-admin/src/components/BanUserDialog.js

@@ -14,7 +14,7 @@ const BanUserDialog = ({open, handleClose, onClickBanUser, user = {}}) => {
 
   return (
     <Dialog className={styles.dialog} open={open} onClose={() => handleClose()} onCancel={() => handleClose()} title={lang.t('bandialog.ban_user')}>
-    <span className={styles.close} onClick={() => handleClose()}>×</span>
+      <span className={styles.close} onClick={() => handleClose()}>×</span>
       <div>
         <div className={styles.header}>
           <h3>

client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css

@@ -14,6 +14,18 @@
   color: white;
 }
 
+.showShortcuts {
+  position: absolute;
+  right: 130px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+
+  span {
+    margin-left: 7px;
+  }
+}
+
 @media (--big-viewport) {
   .tab {
     flex: none;

client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from 'react-redux';
+import {Icon} from 'react-mdl';
 import key from 'keymaster';
 
 import ModerationKeysModal from 'components/ModerationKeysModal';
@@ -70,6 +71,10 @@ class ModerationQueue extends React.Component {
     this.props.dispatch(banUser('banned', userId, commentId));
   }
 
+  showShortcuts = () => {
+    this.setState({modalOpen: true});
+  }
+
   onTabClick (activeTab) {
     this.setState({activeTab});
   }
@@ -93,6 +98,11 @@ class ModerationQueue extends React.Component {
               className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')}</a>
             <a href='#flagged' onClick={() => this.onTabClick('flagged')}
               className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')}</a>
+            <a href='#' onClick={this.showShortcuts}
+              className={`mdl-tabs__tab ${styles.tab} ${styles.showShortcuts}`}>
+              <Icon name='keyboard' />
+              <span>{lang.t('modqueue.showshortcuts')}</span>
+            </a>
           </div>
           <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
             <CommentList

client/coral-admin/src/translations.json

@@ -28,7 +28,8 @@
       "nextcomment": "Go to the next comment",
       "prevcomment": "Go to the previous comment",
       "singleview": "Toggle single comment edit view",
-      "thismenu": "Open this menu"
+      "thismenu": "Open this menu",
+      "showshortcuts": "Show Shortcuts"
     },
     "comment": {
       "flagged": "flagged",
@@ -95,7 +96,8 @@
       "rejected": "rechazado",
       "flagged": "marcado",
       "shortcuts": "Atajos de teclado",
-      "close": "Cerrar"
+      "close": "Cerrar",
+      "showshortcuts": "Mostrar atajos"
     },
     "comment": {
       "flagged": "marcado",

client/coral-plugin-commentbox/CommentBox.js

@@ -103,7 +103,7 @@ class CommentBox extends Component {
         <div className={`${name}-button-container`}>
           { author && (
               <Button
-                cStyle={length > charCount ? 'lightGrey' : 'darkGrey'}
+                cStyle={!length || (charCount && length > charCount) ? 'lightGrey' : 'darkGrey'}
                 className={`${name}-button`}
                 onClick={this.postComment}>
                 {lang.t('post')}

client/coral-plugin-history/Comment.css

@@ -1,3 +1,11 @@
+.myComment {
+  border-bottom: 1px solid lightgrey;
+}
+
+.myComment:last-child {
+  border-bottom: none;
+}
+
 .assetURL {
   font-size: 16px;
   color: black;

client/coral-plugin-history/Comment.js

@@ -4,9 +4,9 @@ import styles from './Comment.css';
 
 const Comment = props => {
   return (
-    <div>
+    <div className={styles.myComment}>
       <p className="myCommentAsset">
-        <a className={`${styles.assetURL} myCommentAnchor`} href={`${props.asset.url}#${props.comment.id}`}>{`${props.asset.url}#${props.comment.id}`}</a>
+        <a className={`${styles.assetURL} myCommentAnchor`} href={`${props.asset.url}#${props.comment.id}`}>{props.asset.url}</a>
       </p>
       <p className={`${styles.commentBody} myCommentBody`}>{props.comment.body}</p>
     </div>

client/coral-plugin-history/CommentHistory.js

@@ -5,7 +5,6 @@ import styles from './CommentHistory.css';
 const CommentHistory = props => {
   return (
     <div className={`${styles.header} commentHistory`}>
-      <h2>All Comments</h2>
       <div className="commentHistory__list">
         {props.comments.map((comment, i) => {
           const asset = props.assets.find(asset => asset.id === comment.asset_id);

client/coral-settings/containers/SettingsContainer.js

@@ -34,18 +34,28 @@ class SignInContainer extends Component {
   render() {
     const {loggedIn, userData, showSignInDialog, items, user} = this.props;
     const {activeTab} = this.state;
+
+    const commentsMostRecentFirst = user
+      .myComments.map(id => items.comments[id])
+      .sort(({created_at:a}, {created_at:b}) => {
+        // descending order, created_at
+        // js date strings can be sorted lexigraphically.
+        const aLessThanB = a < b ? 1 : 0;
+        return a > b ? -1 : aLessThanB;
+      });
+
     return (
       <RestrictedContent restricted={!loggedIn} restrictedComp={<NotLoggedIn showSignInDialog={showSignInDialog} />}>
         <SettingsHeader {...this.props} />
         <TabBar onChange={this.handleTabChange} activeTab={activeTab} cStyle='material'>
-          <Tab>All Comments (120)</Tab>
+          <Tab>All Comments ({user.myComments.length})</Tab>
           <Tab>Profile Settings</Tab>
         </TabBar>
         <TabContent show={activeTab === 0}>
           {
             user.myComments.length && user.myAssets.length
             ? <CommentHistory
-              comments={user.myComments.map(id => items.comments[id])}
+              comments={commentsMostRecentFirst}
               assets={user.myAssets.map(id => items.assets[id])} />
             : <p>Loading comment history...</p>
           }

client/coral-ui/components/Dialog.js

@@ -1,5 +1,4 @@
 import React, {Component, PropTypes} from 'react';
-import ReactDOM from 'react-dom';
 import dialogPolyfill from 'dialog-polyfill';
 import 'dialog-polyfill/dialog-polyfill.css';
 
@@ -19,7 +18,7 @@ export default class Dialog extends Component {
   };
 
   componentDidMount(){
-    const dialog = ReactDOM.findDOMNode(this.refs.dialog);
+    const dialog = this.dialog;
     dialogPolyfill.registerDialog(dialog);
 
     if (this.props.open) {
@@ -31,7 +30,7 @@ export default class Dialog extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const dialog = ReactDOM.findDOMNode(this.refs.dialog);
+    const dialog = this.dialog;
     if (this.props.open !== prevProps.open) {
       if (this.props.open) {
         dialog.showModal();
@@ -42,7 +41,7 @@ export default class Dialog extends Component {
   }
 
   componentWillUnmount() {
-    const dialog = ReactDOM.findDOMNode(this.refs.dialog);
+    const dialog = this.dialog;
     dialog.removeEventListener('cancel', this.props.onCancel);
   }
 
@@ -51,7 +50,7 @@ export default class Dialog extends Component {
 
     return (
       <dialog
-        ref="dialog"
+        ref={el => { this.dialog = el; }}
         className={`mdl-dialog ${className}`}
         {...rest}
       >

tests/client/coral-plugin-history/Comment.spec.js

@@ -21,7 +21,8 @@ describe('coral-plugin-history/Comment', () => {
   it('should render the asset url as a link', () => {
     const wrapper = mount(<Comment asset={asset} comment={comment} />);
     expect(wrapper.find('.myCommentAnchor')).to.have.length(1);
-    expect(wrapper.find('.myCommentAnchor').text()).to.equal('https://google.com#123');
+    expect(wrapper.find('.myCommentAnchor').text()).to.equal('https://google.com');
+    expect(wrapper.find('.myCommentAnchor').props().href).to.equal('https://google.com#123');
   });
 
   it('should render the comment with styles', () => {