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

add command + s for save, detect os for control + s, add to keyboard shortcut list

Browse source
This commit is contained in:
catarak 2016-09-07 21:48:45 -04:00
parent 41e6ce1c78
commit 12c0581ee0
2 changed files with 54 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
client/modules/IDE/components/KeyboardShortcutModal.js
View file

@ -2,35 +2,47 @@ import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg'; import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg'); const exitUrl = require('../../../images/exit.svg');
function KeyboardShortcutModal(props) { class KeyboardShortcutModal extends React.Component {
return ( componentDidMount() {
<section className="keyboard-shortcuts"> this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
<header className="keyboard-shortcuts__header"> }
<h2>Keyboard Shortcuts</h2>
<button className="keyboard-shortcuts__close" onClick={props.closeModal}> render() {
<InlineSVG src={exitUrl} alt="Close Keyboard Shortcuts Overlay" /> return (
</button> <section className="keyboard-shortcuts">
</header> <header className="keyboard-shortcuts__header">
<ul> <h2>Keyboard Shortcuts</h2>
<li className="keyboard-shortcut-item"> <button className="keyboard-shortcuts__close" onClick={this.props.closeModal}>
<span className="keyboard-shortcut__command">Shift + Tab</span> <InlineSVG src={exitUrl} alt="Close Keyboard Shortcuts Overlay" />
<span>Tidy</span> </button>
</li> </header>
<li className="keyboard-shortcut-item"> <ul>
<span className="keyboard-shortcut__command">Command + [</span> <li className="keyboard-shortcut-item">
<span>Indent Code Right</span> <span className="keyboard-shortcut__command">Shift + Tab</span>
</li> <span>Tidy</span>
<li className="keyboard-shortcut-item"> </li>
<span className="keyboard-shortcut__command">Command + ]</span> <li className="keyboard-shortcut-item">
<span>Indent Code Left</span> <span className="keyboard-shortcut__command">
</li> {this.isMac ? 'Command + S' : 'Control + S'}
<li className="keyboard-shortcut-item"> </span>
<span className="keyboard-shortcut__command">Command + /</span> <span>Save</span>
<span>Comment Line</span> </li>
</li> <li className="keyboard-shortcut-item">
</ul> <span className="keyboard-shortcut__command">Command + [</span>
</section> <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 = { KeyboardShortcutModal.propTypes = {

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

@ -32,6 +32,7 @@ class IDEView extends React.Component {
super(props); super(props);
this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this); this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this); this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
this.handleGlobalKeydown = this.handleGlobalKeydown.bind(this);
} }
componentDidMount() { componentDidMount() {
@ -51,6 +52,9 @@ class IDEView extends React.Component {
this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29; this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 20; this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 20;
this.forceUpdate(); this.forceUpdate();
this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
document.addEventListener('keydown', this.handleGlobalKeydown, false);
} }
componentWillUpdate(nextProps) { componentWillUpdate(nextProps) {
@ -113,6 +117,15 @@ class IDEView extends React.Component {
}); });
} }
handleGlobalKeydown(e) {
if (e.key === 's' && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
console.log('about to save project');
e.preventDefault();
e.stopPropagation();
this.props.saveProject();
}
}
render() { render() {
return ( return (
<div className="ide"> <div className="ide">