add keyboard shortcuts modal

client/constants.js

@@ -76,6 +76,8 @@ export const SHOW_SHARE_MODAL = 'SHOW_SHARE_MODAL';
 export const CLOSE_SHARE_MODAL = 'CLOSE_SHARE_MODAL';
 export const SHOW_EDITOR_OPTIONS = 'SHOW_EDITOR_OPTIONS';
 export const CLOSE_EDITOR_OPTIONS = 'CLOSE_EDITOR_OPTIONS';
+export const SHOW_KEYBOARD_SHORTCUT_MODAL = 'SHOW_KEYBOARD_SHORTCUT_MODAL';
+export const CLOSE_KEYBOARD_SHORTCUT_MODAL = 'CLOSE_KEYBOARD_SHORTCUT_MODAL';
 
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/ide.js

@@ -150,3 +150,16 @@ export function closeEditorOptions() {
     type: ActionTypes.CLOSE_EDITOR_OPTIONS
   };
 }
+
+export function showKeyboardShortcutModal() {
+  return {
+    type: ActionTypes.SHOW_KEYBOARD_SHORTCUT_MODAL
+  };
+}
+
+export function closeKeyboardShortcutModal() {
+  return {
+    type: ActionTypes.CLOSE_KEYBOARD_SHORTCUT_MODAL
+  };
+}
+

client/modules/IDE/components/Editor.js

@@ -154,7 +154,7 @@ class Editor extends React.Component {
             <a onClick={this.tidyCode}>Tidy</a>
           </li>
           <li>
-            <a>Keyboard Shortcuts</a>
+            <a onClick={this.props.showKeyboardShortcutModal}>Keyboard Shortcuts</a>
           </li>
         </ul>
         <div ref="container" className="editor-holder" tabIndex="0">
@@ -185,7 +185,8 @@ Editor.propTypes = {
   }),
   editorOptionsVisible: PropTypes.bool.isRequired,
   showEditorOptions: PropTypes.func.isRequired,
-  closeEditorOptions: PropTypes.func.isRequired
+  closeEditorOptions: PropTypes.func.isRequired,
+  showKeyboardShortcutModal: PropTypes.func.isRequired
 };
 
 export default Editor;

client/modules/IDE/components/KeyboardShortcutModal.js

@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+
+function KeyboardShortcutModal(props) {
+  return (
+    <section className="keyboard-shortcuts">
+      <header className="keyboard-shortcuts__header">
+        <h2>Keyboard Shortcuts</h2>
+        <button className="keyboard-shortcuts__close" onClick={props.closeModal}>
+          <InlineSVG src={exitUrl} alt="Close Keyboard Shortcuts Overlay" />
+        </button>
+      </header>
+      <ul>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">Shift + Tab</span>
+          <span>Tidy</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">Command + [</span>
+          <span>Indent Code Right</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">Command + ]</span>
+          <span>Indent Code Left</span>
+        </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">Command + /</span>
+          <span>Comment Line</span>
+        </li>
+      </ul>
+    </section>
+  );
+}
+
+KeyboardShortcutModal.propTypes = {
+  closeModal: PropTypes.func.isRequired
+};
+
+export default KeyboardShortcutModal;

client/modules/IDE/pages/IDEView.js

@@ -8,6 +8,7 @@ import Preferences from '../components/Preferences';
 import NewFileModal from '../components/NewFileModal';
 import NewFolderModal from '../components/NewFolderModal';
 import ShareModal from '../components/ShareModal';
+import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
 import Nav from '../../../components/Nav';
 import Console from '../components/Console';
 import { bindActionCreators } from 'redux';
@@ -217,6 +218,7 @@ class IDEView extends React.Component {
                   editorOptionsVisible={this.props.ide.editorOptionsVisible}
                   showEditorOptions={this.props.showEditorOptions}
                   closeEditorOptions={this.props.closeEditorOptions}
+                  showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
                 />
                 <Console
                   consoleEvent={this.props.ide.consoleEvent}
@@ -310,6 +312,17 @@ class IDEView extends React.Component {
             );
           }
         })()}
+        {(() => { // eslint-disable-line
+          if (this.props.ide.keyboardShortcutVisible) {
+            return (
+              <Overlay>
+                <KeyboardShortcutModal
+                  closeModal={this.props.closeKeyboardShortcutModal}
+                />
+              </Overlay>
+            );
+          }
+        })()}
       </div>
 
     );
@@ -342,7 +355,8 @@ IDEView.propTypes = {
     projectOptionsVisible: PropTypes.bool.isRequired,
     newFolderModalVisible: PropTypes.bool.isRequired,
     shareModalVisible: PropTypes.bool.isRequired,
-    editorOptionsVisible: PropTypes.bool.isRequired
+    editorOptionsVisible: PropTypes.bool.isRequired,
+    keyboardShortcutVisible: PropTypes.bool.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -418,7 +432,9 @@ IDEView.propTypes = {
   showShareModal: PropTypes.func.isRequired,
   closeShareModal: PropTypes.func.isRequired,
   showEditorOptions: PropTypes.func.isRequired,
-  closeEditorOptions: PropTypes.func.isRequired
+  closeEditorOptions: PropTypes.func.isRequired,
+  showKeyboardShortcutModal: PropTypes.func.isRequired,
+  closeKeyboardShortcutModal: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -14,7 +14,8 @@ const initialState = {
   projectOptionsVisible: false,
   newFolderModalVisible: false,
   shareModalVisible: false,
-  editorOptionsVisible: false
+  editorOptionsVisible: false,
+  keyboardShortcutVisible: false
 };
 
 const ide = (state = initialState, action) => {
@@ -65,6 +66,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { editorOptionsVisible: true });
     case ActionTypes.CLOSE_EDITOR_OPTIONS:
       return Object.assign({}, state, { editorOptionsVisible: false });
+    case ActionTypes.SHOW_KEYBOARD_SHORTCUT_MODAL:
+      return Object.assign({}, state, { keyboardShortcutVisible: true });
+    case ActionTypes.CLOSE_KEYBOARD_SHORTCUT_MODAL:
+      return Object.assign({}, state, { keyboardShortcutVisible: false });
     default:
       return state;
   }

client/styles/components/_modal.scss

@@ -74,3 +74,34 @@
 .share-modal__input {
   flex: 1;
 }
+
+.keyboard-shortcuts {
+  @extend %modal;
+  padding: #{20 / $base-font-size}rem;
+  width: #{400 / $base-font-size}rem;
+}
+
+.keyboard-shortcuts__header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: #{20 / $base-font-size}rem;
+}
+
+.keyboard-shortcuts__close {
+  @extend %icon;
+}
+
+.keyboard-shortcut-item {
+  display: flex;
+  & + & {
+    margin-top: #{10 / $base-font-size}rem;
+  }
+  align-items: baseline;
+}
+
+.keyboard-shortcut__command {
+  width: 40%;
+  font-weight: bold;
+  text-align: right;
+  padding-right: #{10 / $base-font-size}rem;
+}