Skip to content

Commit 081b1ab

Browse files
tirtawrtirtawr
committed
Add keyboard shortcut note
1 parent c1ab2b3 commit 081b1ab

File tree

2 files changed

+83
-85
lines changed

2 files changed

+83
-85
lines changed

‎client/modules/IDE/components/KeyboardShortcutModal.jsx

Lines changed: 78 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -3,91 +3,84 @@ import { metaKeyName, } from '../../../utils/metaKey';
33

44
function KeyboardShortcutModal() {
55
return (
6-
<ul className="keyboard-shortcuts" title="keyboard shortcuts">
7-
<li className="keyboard-shortcut-item">
8-
<span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
9-
<span>Tidy</span>
10-
</li>
11-
<li className="keyboard-shortcut-item">
12-
<span className="keyboard-shortcut__command">
13-
{metaKeyName} + S
14-
</span>
15-
<span>Save</span>
16-
</li>
17-
<li className="keyboard-shortcut-item">
18-
<span className="keyboard-shortcut__command">
19-
{metaKeyName} + F
20-
</span>
21-
<span>Find Text</span>
22-
</li>
23-
<li className="keyboard-shortcut-item">
24-
<span className="keyboard-shortcut__command">
25-
{metaKeyName} + G
26-
</span>
27-
<span>Find Next Text Match</span>
28-
</li>
29-
<li className="keyboard-shortcut-item">
30-
<span className="keyboard-shortcut__command">
31-
{metaKeyName} + {'\u21E7'} + G
32-
</span>
33-
<span>Find Previous Text Match</span>
34-
</li>
35-
<li className="keyboard-shortcut-item">
36-
<span className="keyboard-shortcut__command">
37-
{metaKeyName} + [
38-
</span>
39-
<span>Indent Code Left</span>
40-
</li>
41-
<li className="keyboard-shortcut-item">
42-
<span className="keyboard-shortcut__command">
43-
{metaKeyName} + ]
44-
</span>
45-
<span>Indent Code Right</span>
46-
</li>
47-
<li className="keyboard-shortcut-item">
48-
<span className="keyboard-shortcut__command">
49-
{metaKeyName} + /
50-
</span>
51-
<span>Comment Line</span>
52-
</li>
53-
<li className="keyboard-shortcut-item">
54-
<span className="keyboard-shortcut__command">
55-
{metaKeyName} + Enter
56-
</span>
57-
<span>Start Sketch</span>
58-
</li>
59-
<li className="keyboard-shortcut-item">
60-
<span className="keyboard-shortcut__command">
61-
{metaKeyName} + {'\u21E7'} + Enter
62-
</span>
63-
<span>Stop Sketch</span>
64-
</li>
65-
<li className="keyboard-shortcut-item">
66-
<span className="keyboard-shortcut__command">
67-
{metaKeyName} + {'\u21E7'} + 1
68-
</span>
69-
<span>Turn on Accessible Output</span>
70-
</li>
71-
<li className="keyboard-shortcut-item">
72-
<span className="keyboard-shortcut__command">
73-
{metaKeyName} + {'\u21E7'} + 2
74-
</span>
75-
<span>Turn off Accessible Output</span>
76-
</li>
77-
<li className="keyboard-shortcut-item">
78-
<span className="keyboard-shortcut__command">
79-
{metaKeyName} + B
80-
</span>
81-
<span>Toggle Sidebar</span>
82-
</li>
83-
<li className="keyboard-shortcut-item">
84-
<span className="keyboard-shortcut__command">
85-
Ctrl + `
86-
</span>
87-
<span>Toggle Console</span>
88-
</li>
89-
</ul>
6+
<div className="keyboard-shortcuts">
7+
<div className="keyboard-shortcuts-note">
8+
<strong>Note:</strong> our keyboard shortcuts follow <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">Sublime Text shortcuts</a>
9+
</div>
10+
<ul title="keyboard shortcuts">
11+
<li className="keyboard-shortcut-item">
12+
<span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
13+
<span>Tidy</span>
14+
</li>
15+
<li className="keyboard-shortcut-item">
16+
<span className="keyboard-shortcut__command">
17+
{metaKeyName} + S
18+
</span>
19+
<span>Save</span>
20+
</li>
21+
<li className="keyboard-shortcut-item">
22+
<span className="keyboard-shortcut__command">
23+
{metaKeyName} + F
24+
</span>
25+
<span>Find Text</span>
26+
</li>
27+
<li className="keyboard-shortcut-item">
28+
<span className="keyboard-shortcut__command">
29+
{metaKeyName} + G
30+
</span>
31+
<span>Find Next Text Match</span>
32+
</li>
33+
<li className="keyboard-shortcut-item">
34+
<span className="keyboard-shortcut__command">
35+
{metaKeyName} + {'\u21E7'} + G
36+
</span>
37+
<span>Find Previous Text Match</span>
38+
</li>
39+
<li className="keyboard-shortcut-item">
40+
<span className="keyboard-shortcut__command">
41+
{metaKeyName} + [
42+
</span>
43+
<span>Indent Code Left</span>
44+
</li>
45+
<li className="keyboard-shortcut-item">
46+
<span className="keyboard-shortcut__command">
47+
{metaKeyName} + ]
48+
</span>
49+
<span>Indent Code Right</span>
50+
</li>
51+
<li className="keyboard-shortcut-item">
52+
<span className="keyboard-shortcut__command">
53+
{metaKeyName} + /
54+
</span>
55+
<span>Comment Line</span>
56+
</li>
57+
<li className="keyboard-shortcut-item">
58+
<span className="keyboard-shortcut__command">
59+
{metaKeyName} + Enter
60+
</span>
61+
<span>Start Sketch</span>
62+
</li>
63+
<li className="keyboard-shortcut-item">
64+
<span className="keyboard-shortcut__command">
65+
{metaKeyName} + {'\u21E7'} + Enter
66+
</span>
67+
<span>Stop Sketch</span>
68+
</li>
69+
<li className="keyboard-shortcut-item">
70+
<span className="keyboard-shortcut__command">
71+
{metaKeyName} + {'\u21E7'} + 1
72+
</span>
73+
<span>Turn on Accessible Output</span>
74+
</li>
75+
<li className="keyboard-shortcut-item">
76+
<span className="keyboard-shortcut__command">
77+
{metaKeyName} + {'\u21E7'} + 2
78+
</span>
79+
<span>Turn off Accessible Output</span>
80+
</li>
81+
</ul>
82+
</div>
9083
);
9184
}
9285

93-
export default KeyboardShortcutModal;
86+
export default KeyboardShortcutModal;

‎client/styles/components/_keyboard-shortcuts.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
width: #{450 / $base-font-size}rem;
55
}
66

7+
.keyboard-shortcuts-note {
8+
text-align: center;
9+
margin-bottom: 24px;
10+
}
11+
712
.keyboard-shortcut-item {
813
display: flex;
914
& + & {

0 commit comments

Comments
 (0)