Merge pull request #531 from coralproject/shortcuts-in-cog

shortcuts list should be accessible from the cog

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

@@ -28,6 +28,8 @@ const shortcuts = [
 export default class ModerationKeysModal extends React.Component {
 
   static propTypes = {
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
     hideShortcutsNote: PropTypes.func.isRequired,
     shortcutsNoteVisible: PropTypes.string.isRequired
   }

client/coral-admin/src/components/ui/Header.js

@@ -6,7 +6,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
 
-const CoralHeader = ({handleLogout, restricted = false}) => (
+const CoralHeader = ({handleLogout, showShortcuts = () => {}, restricted = false}) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
     {
@@ -55,7 +55,8 @@ const CoralHeader = ({handleLogout, restricted = false}) => (
               <div>
                 <IconButton name="settings" id="menu-settings"/>
                 <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
+                  <MenuItem onClick={() => showShortcuts(true)}>{lang.t('configure.shortcuts')}</MenuItem>
+                  <MenuItem onClick={handleLogout}>{lang.t('configure.sign-out')}</MenuItem>
                 </Menu>
               </div>
             </li>
@@ -72,6 +73,7 @@ const CoralHeader = ({handleLogout, restricted = false}) => (
 );
 
 CoralHeader.propTypes = {
+  showShortcuts: PropTypes.func,
   handleLogout: PropTypes.func.isRequired,
   restricted: PropTypes.bool // hide elemnts from a user that's logged out
 };

client/coral-admin/src/components/ui/Layout.js

@@ -4,9 +4,13 @@ import Header from './Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
-const Layout = ({children, handleLogout = () => {}, restricted = false, ...props}) => (
+const Layout = ({children, handleLogout = () => {}, toggleShortcutModal, restricted = false, ...props}) => (
   <LayoutMDL fixedDrawer>
-    <Header handleLogout={handleLogout} restricted={restricted} {...props} />
+    <Header
+      handleLogout={handleLogout}
+      showShortcuts={toggleShortcutModal}
+      restricted={restricted}
+      {...props} />
     <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
     <div className={styles.layout}>
       {children}
@@ -16,6 +20,7 @@ const Layout = ({children, handleLogout = () => {}, restricted = false, ...props
 
 Layout.propTypes = {
   handleLogout: PropTypes.func,
+  toggleShortcutModal: PropTypes.func,
   restricted: PropTypes.bool // hide elements from a user that's logged out
 };
 

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

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import Layout from '../components/ui/Layout';
 import {checkLogin, handleLogin, logout, requestPasswordReset} from '../actions/auth';
+import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {fetchConfig} from '../actions/config';
 import {FullLoading} from '../components/FullLoading';
 import AdminLogin from '../components/AdminLogin';
@@ -23,7 +24,7 @@ class LayoutContainer extends Component {
       passwordRequestSuccess
     } = this.props.auth;
 
-    const {handleLogout, TALK_RECAPTCHA_PUBLIC} = this.props;
+    const {handleLogout, toggleShortcutModal, TALK_RECAPTCHA_PUBLIC} = this.props;
     if (loadingUser) { return <FullLoading />; }
     if (!isAdmin) {
       return <AdminLogin
@@ -34,7 +35,9 @@ class LayoutContainer extends Component {
         recaptchaPublic={TALK_RECAPTCHA_PUBLIC}
         errorMessage={loginError} />;
     }
-    if (isAdmin && loggedIn) { return <Layout handleLogout={handleLogout} {...this.props} />; }
+    if (isAdmin && loggedIn) {
+      return <Layout handleLogout={handleLogout} toggleShortcutModal={toggleShortcutModal} {...this.props} />;
+    }
     return <FullLoading />;
   }
 }
@@ -49,6 +52,7 @@ const mapDispatchToProps = dispatch => ({
   fetchConfig: () => dispatch(fetchConfig()),
   handleLogin: (username, password, recaptchaResponse) => dispatch(handleLogin(username, password, recaptchaResponse)),
   requestPasswordReset: email => dispatch(requestPasswordReset(email)),
+  toggleShortcutModal: toggle => dispatch(toggleShortcutModal(toggle)),
   handleLogout: () => dispatch(logout())
 });
 

client/coral-admin/src/translations.json

@@ -79,6 +79,8 @@
       "copy": "Copy to Clipboard"
     },
     "configure": {
+      "sign-out": "Sign Out",
+      "shortcuts": "Shortcuts",
       "closed-stream-settings": "Closed Stream Message",
       "open-stream-configuration": "This comment stream is currently open. By closing this comment stream, no new comments may be submitted and all previous comments will still be displayed.",
       "close-stream-configuration": "This comment stream is currently closed. By opening this comment stream, new comments may be submitted and displayed",
@@ -257,6 +259,8 @@
       "username_flags": "marcas para este nombre de usuario"
     },
     "configure": {
+      "sign-out": "Desconectar",
+      "shortcuts": "Atajos",
       "closed-stream-settings": "Mensaje a enviar cuando los comentarios están cerrados en el artículo",
       "open-stream-configuration": "Este hilo de comentarios esta abierto. Al cerrarlo, ningún nuevo comentario será publicado y todos los comentarios anteriores serán mostrados.",
       "close-stream-configuration": "Este hilo de comentario está en este momento cerrado. Al abrirlo, nuevos comentarios serán publicaods y mostrados.",