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';
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>
);
class KeyboardShortcutModal extends React.Component {
componentDidMount() {
this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
}
render() {
return (
<section className="keyboard-shortcuts">
<header className="keyboard-shortcuts__header">
<h2>Keyboard Shortcuts</h2>
<button className="keyboard-shortcuts__close" onClick={this.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">
{this.isMac ? 'Command + S' : 'Control + S'}
</span>
<span>Save</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 = {

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

@ -32,6 +32,7 @@ class IDEView extends React.Component {
super(props);
this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
this.handleGlobalKeydown = this.handleGlobalKeydown.bind(this);
}
componentDidMount() {
@ -51,6 +52,9 @@ class IDEView extends React.Component {
this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 20;
this.forceUpdate();
this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
document.addEventListener('keydown', this.handleGlobalKeydown, false);
}
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() {
return (
<div className="ide">