diff --git a/client/constants.js b/client/constants.js index fd9a53e8..12769f4a 100644 --- a/client/constants.js +++ b/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'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index f498c351..d56ae836 100644 --- a/client/modules/IDE/actions/ide.js +++ b/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 + }; +} + diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index b969b991..3ae43ed1 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -154,7 +154,7 @@ class Editor extends React.Component { Tidy
  • - Keyboard Shortcuts + Keyboard Shortcuts
    • @@ -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; diff --git a/client/modules/IDE/components/KeyboardShortcutModal.js b/client/modules/IDE/components/KeyboardShortcutModal.js new file mode 100644 index 00000000..3fc62e3c --- /dev/null +++ b/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 ( +
    +
    +

    Keyboard Shortcuts

    + +
    + +
    + ); +} + +KeyboardShortcutModal.propTypes = { + closeModal: PropTypes.func.isRequired +}; + +export default KeyboardShortcutModal; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 401ab272..1fcb6148 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/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} /> { // eslint-disable-line + if (this.props.ide.keyboardShortcutVisible) { + return ( + + + + ); + } + })()}
    ); @@ -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) { diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js index 8021635c..8d6d3a64 100644 --- a/client/modules/IDE/reducers/ide.js +++ b/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; } diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss index b66994e2..44b8e80f 100644 --- a/client/styles/components/_modal.scss +++ b/client/styles/components/_modal.scss @@ -73,4 +73,35 @@ .share-modal__input { flex: 1; -} \ No newline at end of file +} + +.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; +}