add a little keyboard shortcut widget

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

@@ -18,3 +18,47 @@
   border-radius: 4px;
   border: 1px solid #999;
 }
+
+.callToAction {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  width: 280px;
+  height: 200px;
+  background: white;
+  padding: 15px;
+  box-sizing: border-box;
+  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+
+  .ctaHeader {
+    font-size: 16px;
+    margin-bottom: 5px;
+  }
+
+  ul {
+    padding-left: 0;
+    list-style: none;
+    margin: 0 0 10px 0;
+  }
+
+  p, li {
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  li span:first-child, p:last-child span:first-child {
+    display: inline-block;
+    width: 120px;
+  }
+}
+
+.closeButton {
+  float: right;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.smallKey {
+  padding: 5px;
+  border: 1px solid #ccc;
+}

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

@@ -4,6 +4,8 @@ import React from 'react';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
 
+const lang = new I18n(translations);
+
 const shortcuts = [
   {
     title: 'modqueue.navigation',
@@ -23,29 +25,72 @@ const shortcuts = [
   }
 ];
 
-export default ({open, onClose}) => (
-  <Modal open={open} onClose={onClose}>
-    <h3>{lang.t('modqueue.shortcuts')}</h3>
-    <div className={styles.container}>
-      {shortcuts.map((shortcut, i) => (
-        <table className={styles.table} key={i}>
-          <thead>
-            <tr>
-              <th>{lang.t(shortcut.title)}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {Object.keys(shortcut.shortcuts).map(key => (
-              <tr key={`${key  }tr`}>
-                <td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
-                <td>{lang.t(shortcut.shortcuts[key])}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ))}
-    </div>
-  </Modal>
-);
+export default class ModerationKeysModal extends React.Component {
+  constructor (props) {
+    super(props);
+    try {
+      if (window.localStorage.getItem('coral:shortcutsNote') === null) {
+        window.localStorage.setItem('coral:shortcutsNote', 'show');
+      }
+    } catch (e) {
 
-const lang = new I18n(translations);
+      // above will fail in Private Mode in some browsers.
+    }
+    this.state = {
+      shortcutsNote: window.localStorage.getItem('coral:shortcutsNote') || 'show'
+    };
+  }
+
+  closeCallToAction = () => {
+    try {
+      window.localStorage.setItem('coral:shortcutsNote', 'hide');
+      this.setState({foo: Math.random()}); // apparently this.forceUpdate() is bad, but we need a re-render
+    } catch (e) {
+
+      // when setItem fails in Safari Private mode
+      this.setState({shortcutsNote: 'hide'});
+    }
+  }
+
+  render () {
+    const {open, onClose} = this.props;
+    const hideShortcutsNote = window.localStorage.getItem('coral:shortcutsNote') === 'hide' ||
+      this.state.dashboardNote === 'hide'; // for Safari Incognito
+    return (
+      <div>
+        <div className={styles.callToAction} style={{display: hideShortcutsNote ? 'none' : 'block'}}>
+          <div onClick={this.closeCallToAction} className={styles.closeButton}>×</div>
+          <p className={styles.ctaHeader}>{lang.t('modqueue.mod-faster')}</p>
+          <p><strong>{lang.t('modqueue.try-these')}:</strong></p>
+          <ul>
+            <li><span>{lang.t('modqueue.approve')}</span> <span className={styles.smallKey}>t</span></li>
+            <li><span>{lang.t('modqueue.reject')}</span> <span className={styles.smallKey}>r</span></li>
+          </ul>
+          <p><span>{lang.t('modqueue.view-more-shortcuts')}</span> <span className={styles.smallKey}>{lang.t('modqueue.shift-key')}</span> + <span className={styles.smallKey}>/</span></p>
+        </div>
+        <Modal open={open} onClose={onClose}>
+          <h3>{lang.t('modqueue.shortcuts')}</h3>
+          <div className={styles.container}>
+            {shortcuts.map((shortcut, i) => (
+              <table className={styles.table} key={i}>
+                <thead>
+                  <tr>
+                    <th>{lang.t(shortcut.title)}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {Object.keys(shortcut.shortcuts).map(key => (
+                    <tr key={`${key  }tr`}>
+                      <td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
+                      <td>{lang.t(shortcut.shortcuts[key])}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ))}
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}

client/coral-admin/src/translations.json

@@ -44,6 +44,10 @@
       "close": "Close",
       "actions": "Actions",
       "navigation": "Navigation",
+      "mod-faster": "Moderate faster with keyboard shortcuts",
+      "try-these": "Try these",
+      "view-more-shortcuts": "View more shortcuts",
+      "shift-key": "⇧",
       "approve": "Approve comment",
       "reject": "Reject comment",
       "nextcomment": "Go to the next comment",
@@ -226,6 +230,10 @@
       "rejected": "rechazado",
       "flagged": "marcado",
       "shortcuts": "Atajos de teclado",
+      "mod-faster": "Moderar más rápido con atajos del teclado",
+      "try-these": "Intenta estos",
+      "view-more-shortcuts": "Ver más atajos",
+      "shift-key": "⇧",
       "close": "Cerrar",
       "emptyqueue": "No se encontro ningún usuario. Están escondidos.",
       "showshortcuts": "Mostrar atajos",