From decdfad39b4c161acb391ecb4b2c116cc419668d Mon Sep 17 00:00:00 2001
From: Dan Zajdband <dan.zajdband@gmail.com>
Date: Fri, 16 Dec 2016 12:32:09 -0500
Subject: [PATCH] Adding show shortcuts button and minor fixes (#177)

* Adding show shortcuts button and minor fixes

* Lint

* Unwrapping the showComments method
---
 client/coral-admin/src/components/BanUserDialog.js   |  2 +-
 .../containers/ModerationQueue/ModerationQueue.css   | 12 ++++++++++++
 .../containers/ModerationQueue/ModerationQueue.js    | 10 ++++++++++
 client/coral-admin/src/translations.json             |  6 ++++--
 client/coral-plugin-commentbox/CommentBox.js         |  2 +-
 client/coral-ui/components/Dialog.js                 |  9 ++++-----
 6 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index 1867b9ac2..1b4af6eb1 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/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>
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css
index 6d40b5935..802fb88be 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css
+++ b/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;
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index e0e3c636f..339a1fa55 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/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
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index ef00f1cf8..6f8e76c4b 100644
--- a/client/coral-admin/src/translations.json
+++ b/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",
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 086a0cf36..fe67b22e0 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/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')}
diff --git a/client/coral-ui/components/Dialog.js b/client/coral-ui/components/Dialog.js
index 3f6585297..9af9be6dd 100644
--- a/client/coral-ui/components/Dialog.js
+++ b/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}
       >