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

Add shortcuts to shortcut modal 

Fixes #16.
This commit is contained in:
Jen Kagan 2016-09-28 15:17:29 -04:00
parent 7cacb4bf7c
commit 19f0915350
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/modules/IDE/components/KeyboardShortcutModal.js
View File

@ -28,17 +28,34 @@ class KeyboardShortcutModal extends React.Component {
<span>Save</span> <span>Save</span>
</li> </li>
<li className="keyboard-shortcut-item"> <li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">Command + [</span> <span className="keyboard-shortcut__command">
<span>Indent Code Right</span> {this.isMac ? 'Command + [' : 'Control + ['}
</li> </span>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">Command + ]</span>
<span>Indent Code Left</span> <span>Indent Code Left</span>
</li> </li>
<li className="keyboard-shortcut-item"> <li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">Command + /</span> <span className="keyboard-shortcut__command">
{this.isMac ? 'Command + ]' : 'Control + ]'}
</span>
<span>Indent Code Right</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{this.isMac ? 'Command + /' : 'Control + /'}
</span>
<span>Comment Line</span> <span>Comment Line</span>
</li> </li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{this.isMac ? 'Command + Enter' : 'Control + Enter'}</span>
<span>Start Sketch</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{this.isMac ? 'Command + Shift + Enter' : 'Control + Shift + Enter'}
</span>
<span>Stop Sketch</span>
</li>
</ul> </ul>
</section> </section>
); );

4
client/styles/components/_modal.scss
View File

@ -80,7 +80,7 @@
.keyboard-shortcuts { .keyboard-shortcuts {
@extend %modal; @extend %modal;
padding: #{20 / $base-font-size}rem; padding: #{20 / $base-font-size}rem;
width: #{400 / $base-font-size}rem; width: #{450 / $base-font-size}rem;
} }
.keyboard-shortcuts__header { .keyboard-shortcuts__header {
@ -104,7 +104,7 @@
} }
.keyboard-shortcut__command { .keyboard-shortcut__command {
width: 40%; width: 50%;
font-weight: bold; font-weight: bold;
text-align: right; text-align: right;
padding-right: #{10 / $base-font-size}rem; padding-right: #{10 / $base-font-size}rem;