Skip to content

Commit b2877f4

Browse files
catarakcatarak
authored
Merge pull request #1438 from tirtawr/add-keyboard-shortcut-note
Add keyboard shortcut note
2 parents 7a97c91 + 6384c63 commit b2877f4

File tree

3 files changed

+112
-86
lines changed

3 files changed

+112
-86
lines changed

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

+81-84
Original file line numberDiff line numberDiff line change
@@ -3,90 +3,87 @@ 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+
<h3 className="keyboard-shortcuts__title">Code Editing</h3>
8+
<p className="keyboard-shortcuts__description">
9+
Code editing keyboard shortcuts follow <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">Sublime Text shortcuts</a>.
10+
</p>
11+
<ul className="keyboard-shortcuts__list">
12+
<li className="keyboard-shortcut-item">
13+
<span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
14+
<span>Tidy</span>
15+
</li>
16+
<li className="keyboard-shortcut-item">
17+
<span className="keyboard-shortcut__command">
18+
{metaKeyName} + F
19+
</span>
20+
<span>Find Text</span>
21+
</li>
22+
<li className="keyboard-shortcut-item">
23+
<span className="keyboard-shortcut__command">
24+
{metaKeyName} + G
25+
</span>
26+
<span>Find Next Text Match</span>
27+
</li>
28+
<li className="keyboard-shortcut-item">
29+
<span className="keyboard-shortcut__command">
30+
{metaKeyName} + {'\u21E7'} + G
31+
</span>
32+
<span>Find Previous Text Match</span>
33+
</li>
34+
<li className="keyboard-shortcut-item">
35+
<span className="keyboard-shortcut__command">
36+
{metaKeyName} + [
37+
</span>
38+
<span>Indent Code Left</span>
39+
</li>
40+
<li className="keyboard-shortcut-item">
41+
<span className="keyboard-shortcut__command">
42+
{metaKeyName} + ]
43+
</span>
44+
<span>Indent Code Right</span>
45+
</li>
46+
<li className="keyboard-shortcut-item">
47+
<span className="keyboard-shortcut__command">
48+
{metaKeyName} + /
49+
</span>
50+
<span>Comment Line</span>
51+
</li>
52+
</ul>
53+
<h3 className="keyboard-shortcuts__title">General</h3>
54+
<ul className="keyboard-shortcuts__list">
55+
<li className="keyboard-shortcut-item">
56+
<span className="keyboard-shortcut__command">
57+
{metaKeyName} + S
58+
</span>
59+
<span>Save</span>
60+
</li>
61+
<li className="keyboard-shortcut-item">
62+
<span className="keyboard-shortcut__command">
63+
{metaKeyName} + Enter
64+
</span>
65+
<span>Start Sketch</span>
66+
</li>
67+
<li className="keyboard-shortcut-item">
68+
<span className="keyboard-shortcut__command">
69+
{metaKeyName} + {'\u21E7'} + Enter
70+
</span>
71+
<span>Stop Sketch</span>
72+
</li>
73+
<li className="keyboard-shortcut-item">
74+
<span className="keyboard-shortcut__command">
75+
{metaKeyName} + {'\u21E7'} + 1
76+
</span>
77+
<span>Turn on Accessible Output</span>
78+
</li>
79+
<li className="keyboard-shortcut-item">
80+
<span className="keyboard-shortcut__command">
81+
{metaKeyName} + {'\u21E7'} + 2
82+
</span>
83+
<span>Turn off Accessible Output</span>
84+
</li>
85+
</ul>
86+
</div>
9087
);
9188
}
9289

‎client/styles/base/_base.scss

+1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ h2 {
7474

7575
h3 {
7676
font-weight: normal;
77+
font-size: #{16 / $base-font-size}rem;
7778
}
7879
h4 {
7980
font-weight: normal;

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

+30-2
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
& + & {
@@ -13,8 +18,31 @@
1318
}
1419

1520
.keyboard-shortcut__command {
16-
width: 50%;
1721
font-weight: bold;
1822
text-align: right;
19-
padding-right: #{10 / $base-font-size}rem;
23+
margin-right: #{10 / $base-font-size}rem;
24+
padding: #{3 / $base-font-size}rem;
25+
@include themify {
26+
border: 1px solid getThemifyVariable("button-border-color");
27+
border-radius: 3px;
28+
}
29+
}
30+
31+
.keyboard-shortcuts__title {
32+
padding-bottom: #{10 / $base-font-size}rem;
33+
}
34+
35+
.keyboard-shortcuts__description {
36+
padding-bottom: #{10 / $base-font-size}rem;
37+
}
38+
39+
.keyboard-shortcuts__list:not(:last-of-type) {
40+
padding-bottom: #{10 / $base-font-size}rem;
41+
}
42+
43+
.keyboard-shortcuts__title:not(:first-of-type) {
44+
@include themify() {
45+
border-top: 1px dashed getThemifyVariable("button-border-color");
46+
padding-top: #{10 / $base-font-size}rem;
47+
}
2048
}

0 commit comments

Comments
 (0)