r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add keyboard shortcuts modal

Browse source
This commit is contained in:
catarak 2016-09-07 17:47:22 -04:00
parent 4799a26652
commit f1ead9f124
7 changed files with 114 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/constants.js
View file

@ -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';

13
client/modules/IDE/actions/ide.js
View file

@ -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
};
}

5
client/modules/IDE/components/Editor.js
View file

@ -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;

40
client/modules/IDE/components/KeyboardShortcutModal.js Normal file
View file

@ -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;

20
client/modules/IDE/pages/IDEView.js
View file

@ -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) {

7
client/modules/IDE/reducers/ide.js
View file

@ -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;
}

31
client/styles/components/_modal.scss
View file

@ -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;
}