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

Add keyboard shortcut note

Browse source
This commit is contained in:
Tirta Rachman 2020-05-26 17:48:47 -04:00
parent c1ab2b3a6a
commit 081b1abc85
2 changed files with 83 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

163
client/modules/IDE/components/KeyboardShortcutModal.jsx
View file

@ -3,91 +3,84 @@ import { metaKeyName, } from '../../../utils/metaKey';
function KeyboardShortcutModal() { function KeyboardShortcutModal() {
return ( return (
<ul className="keyboard-shortcuts" title="keyboard shortcuts"> <div className="keyboard-shortcuts">
<li className="keyboard-shortcut-item"> <div className="keyboard-shortcuts-note">
<span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span> <strong>Note:</strong> our keyboard shortcuts follow <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">Sublime Text shortcuts</a>
<span>Tidy</span> </div>
</li> <ul title="keyboard shortcuts">
<li className="keyboard-shortcut-item"> <li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command"> <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
{metaKeyName} + S <span>Tidy</span>
</span> </li>
<span>Save</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + S
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + F <span>Save</span>
</span> </li>
<span>Find Text</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + F
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + G <span>Find Text</span>
</span> </li>
<span>Find Next Text Match</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + G
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + {'\u21E7'} + G <span>Find Next Text Match</span>
</span> </li>
<span>Find Previous Text Match</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + {'\u21E7'} + G
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + [ <span>Find Previous Text Match</span>
</span> </li>
<span>Indent Code Left</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + [
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + ] <span>Indent Code Left</span>
</span> </li>
<span>Indent Code Right</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + ]
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + / <span>Indent Code Right</span>
</span> </li>
<span>Comment Line</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + /
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + Enter <span>Comment Line</span>
</span> </li>
<span>Start Sketch</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + Enter
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + {'\u21E7'} + Enter <span>Start Sketch</span>
</span> </li>
<span>Stop Sketch</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + {'\u21E7'} + Enter
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + {'\u21E7'} + 1 <span>Stop Sketch</span>
</span> </li>
<span>Turn on Accessible Output</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + {'\u21E7'} + 1
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + {'\u21E7'} + 2 <span>Turn on Accessible Output</span>
</span> </li>
<span>Turn off Accessible Output</span> <li className="keyboard-shortcut-item">
</li> <span className="keyboard-shortcut__command">
<li className="keyboard-shortcut-item"> {metaKeyName} + {'\u21E7'} + 2
<span className="keyboard-shortcut__command"> </span>
{metaKeyName} + B <span>Turn off Accessible Output</span>
</span> </li>
<span>Toggle Sidebar</span> </ul>
</li> </div>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
Ctrl + `
</span>
<span>Toggle Console</span>
</li>
</ul>
); );
} }
export default KeyboardShortcutModal; export default KeyboardShortcutModal;

5
client/styles/components/_keyboard-shortcuts.scss
View file

@ -4,6 +4,11 @@
width: #{450 / $base-font-size}rem; width: #{450 / $base-font-size}rem;
} }
.keyboard-shortcuts-note {
text-align: center;
margin-bottom: 24px;
}
.keyboard-shortcut-item { .keyboard-shortcut-item {
display: flex; display: flex;
& + & { & + & {