Skip to content

Commit

Permalink
Merge pull request #1438 from tirtawr/add-keyboard-shortcut-note
Browse files Browse the repository at this point in the history 
Add keyboard shortcut note
  • Loading branch information
@catarak
catarak committed May 28, 2020
2 parents 7a97c91 + 6384c63 commit b2877f4
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 86 deletions.
165 changes: 81 additions & 84 deletions client/modules/IDE/components/KeyboardShortcutModal.jsx
View file
Expand Up @@ -3,90 +3,87 @@ import { metaKeyName, } from '../../../utils/metaKey';

function KeyboardShortcutModal() {
return (
<ul className="keyboard-shortcuts" title="keyboard shortcuts">
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
<span>Tidy</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + S
</span>
<span>Save</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + F
</span>
<span>Find Text</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + G
</span>
<span>Find Next Text Match</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + G
</span>
<span>Find Previous Text Match</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + [
</span>
<span>Indent Code Left</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + ]
</span>
<span>Indent Code Right</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + /
</span>
<span>Comment Line</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + Enter
</span>
<span>Start Sketch</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + Enter
</span>
<span>Stop Sketch</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + 1
</span>
<span>Turn on Accessible Output</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + 2
</span>
<span>Turn off Accessible Output</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + B
</span>
<span>Toggle Sidebar</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
Ctrl + `
</span>
<span>Toggle Console</span>
</li>
</ul>
<div className="keyboard-shortcuts">
<h3 className="keyboard-shortcuts__title">Code Editing</h3>
<p className="keyboard-shortcuts__description">
Code editing keyboard shortcuts follow <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">Sublime Text shortcuts</a>.
</p>
<ul className="keyboard-shortcuts__list">
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
<span>Tidy</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + F
</span>
<span>Find Text</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + G
</span>
<span>Find Next Text Match</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + G
</span>
<span>Find Previous Text Match</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + [
</span>
<span>Indent Code Left</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + ]
</span>
<span>Indent Code Right</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + /
</span>
<span>Comment Line</span>
</li>
</ul>
<h3 className="keyboard-shortcuts__title">General</h3>
<ul className="keyboard-shortcuts__list">
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + S
</span>
<span>Save</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + Enter
</span>
<span>Start Sketch</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + Enter
</span>
<span>Stop Sketch</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + 1
</span>
<span>Turn on Accessible Output</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + {'\u21E7'} + 2
</span>
<span>Turn off Accessible Output</span>
</li>
</ul>
</div>
);
}

Expand Down
1 change: 1 addition & 0 deletions client/styles/base/_base.scss
View file
Expand Up @@ -74,6 +74,7 @@ h2 {

h3 {
font-weight: normal;
font-size: #{16 / $base-font-size}rem;
}
h4 {
font-weight: normal;
Expand Down
32 changes: 30 additions & 2 deletions client/styles/components/_keyboard-shortcuts.scss
View file
Expand Up @@ -4,6 +4,11 @@
width: #{450 / $base-font-size}rem;
}

.keyboard-shortcuts-note {
text-align: center;
margin-bottom: 24px;
}

.keyboard-shortcut-item {
display: flex;
& + & {
Expand All @@ -13,8 +18,31 @@
}

.keyboard-shortcut__command {
width: 50%;
font-weight: bold;
text-align: right;
padding-right: #{10 / $base-font-size}rem;
margin-right: #{10 / $base-font-size}rem;
padding: #{3 / $base-font-size}rem;
@include themify {
border: 1px solid getThemifyVariable("button-border-color");
border-radius: 3px;
}
}

.keyboard-shortcuts__title {
padding-bottom: #{10 / $base-font-size}rem;
}

.keyboard-shortcuts__description {
padding-bottom: #{10 / $base-font-size}rem;
}

.keyboard-shortcuts__list:not(:last-of-type) {
padding-bottom: #{10 / $base-font-size}rem;
}

.keyboard-shortcuts__title:not(:first-of-type) {
@include themify() {
border-top: 1px dashed getThemifyVariable("button-border-color");
padding-top: #{10 / $base-font-size}rem;
}
}

0 comments on commit b2877f4

Please sign in to comment.