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

Fixes #1386 - Add headers to keyboard shortcut modal, add styling to keyboard commands in list

This commit is contained in:
Cassie Tarakajian 2020-05-28 16:44:00 -04:00
parent 081b1abc85
commit 6384c63348
3 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/modules/IDE/components/KeyboardShortcutModal.jsx
View File

@ -4,20 +4,15 @@ import { metaKeyName, } from '../../../utils/metaKey';
function KeyboardShortcutModal() {
return (
<div className="keyboard-shortcuts">
<div className="keyboard-shortcuts-note">
<strong>Note:</strong> our keyboard shortcuts follow <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">Sublime Text shortcuts</a>
</div>
<ul title="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} + S
</span>
<span>Save</span>
</li>
<li className="keyboard-shortcut-item">
<span className="keyboard-shortcut__command">
{metaKeyName} + F
@ -54,6 +49,15 @@ function KeyboardShortcutModal() {
</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
@ -83,4 +87,4 @@ function KeyboardShortcutModal() {
);
}
export default KeyboardShortcutModal;
export default KeyboardShortcutModal;

1
client/styles/base/_base.scss
View File

@ -74,6 +74,7 @@ h2 {
h3 {
font-weight: normal;
font-size: #{16 / $base-font-size}rem;
}
h4 {
font-weight: normal;

27
client/styles/components/_keyboard-shortcuts.scss
View File

@ -18,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;
}
}