Merge branch 'master' into i18n-refactor

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

@@ -1,9 +1,11 @@
 import I18n from 'coral-i18n/modules/i18n/i18n';
 import translations from '../translations.json';
-import React from 'react';
+import React, {PropTypes} 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,50 @@ 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 {
 
-const lang = new I18n(translations);
+  static propTypes = {
+    hideShortcutsNote: PropTypes.func.isRequired,
+    shortcutsNoteVisible: PropTypes.string.isRequired
+  }
+
+  render () {
+    const {open, onClose, hideShortcutsNote, shortcutsNoteVisible} = this.props;
+    return (
+      <div>
+        <div className={styles.callToAction} style={{display: shortcutsNoteVisible === 'show' ? 'block' : 'none'}}>
+          <div onClick={hideShortcutsNote} 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>
+    );
+  }
+}