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

@@ -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",