mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Added keyboard shortcut section to post settings menu (#18409)
Refs https://github.com/TryGhost/Product/issues/3725 --------- Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
This commit is contained in:
Sanne de Vries
GitHub
parent
991beb4d70
commit
76c9f04013
8 changed files with 452 additions and 3 deletions
|
|
@ -593,3 +593,5 @@ add|ember-template-lint|no-action|2|45|2|45|55b33496610b2f4ef6b9fe62713f4b4ddee3
|
|||
add|ember-template-lint|no-invalid-interactive|2|45|2|45|918fdec8490009c6197091e319d6ec52ee95b983|1695340800000|1705712400000|1710896400000|app/components/gh-fullscreen-modal.hbs
|
||||
remove|ember-template-lint|no-action|2|45|2|45|a9d29fae15800842d0e7b8f32b035ee22a23f4cb|1688342400000|1698714000000|1703898000000|app/components/gh-fullscreen-modal.hbs
|
||||
remove|ember-template-lint|no-invalid-interactive|2|45|2|45|b6693259da29d433264b59abc9a7c7ac846a4bf6|1688342400000|1698714000000|1703898000000|app/components/gh-fullscreen-modal.hbs
|
||||
add|ember-template-lint|no-action|213|50|213|50|693211baf08c011e77284b483c30e28ecaf63520|1696204800000|1706576400000|1711760400000|app/components/gh-post-settings-menu.hbs
|
||||
add|ember-template-lint|no-action|785|168|785|168|0145b67f0faef0aad141c6a4269c35c6ef8f0a47|1696204800000|1706576400000|1711760400000|app/components/gh-post-settings-menu.hbs
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="settings-menu-container {{if this.isViewingSubview "settings-menu-container-wide"}}"
|
||||
class="settings-menu-container {{if (or (eq this.subview "codeinjection") (eq this.subview "meta-data") (eq this.subview "twitter-data") (eq this.subview "facebook-data")) "settings-menu-container-wide"}}"
|
||||
{{did-insert this.setSidebarWidthFromElement}}
|
||||
{{did-update this.setSidebarWidthFromElement this.isViewingSubview}}
|
||||
>
|
||||
|
|
@ -209,6 +209,12 @@
|
|||
</button>
|
||||
{{svg-jar "arrow-right" class="arrow-right"}}
|
||||
</li>
|
||||
<li class="nav-list-item">
|
||||
<button type="button" {{action "showSubview" "keyboard-shortcuts"}} data-test-button="keyboard-shortcuts">
|
||||
<span>{{svg-jar "keyboard"}} Keyboard shortcuts</span>
|
||||
</button>
|
||||
{{svg-jar "arrow-right" class="arrow-right"}}
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
{{#unless this.post.isNew}}
|
||||
|
|
@ -222,8 +228,349 @@
|
|||
</div>{{! .post-settings-menu }}
|
||||
|
||||
{{#if this.isViewingSubview}}
|
||||
<div class="settings-menu settings-menu-pane settings-menu-pane-wide">
|
||||
<div class="settings-menu settings-menu-pane {{if (or (eq this.subview "codeinjection") (eq this.subview "meta-data") (eq this.subview "twitter-data") (eq this.subview "facebook-data")) "settings-menu-pane-wide"}}">
|
||||
<div class="active">
|
||||
{{#if (eq this.subview "keyboard-shortcuts")}}
|
||||
<div class="settings-menu-header subview">
|
||||
<button aria-label="Close Facebook card panel" class="back settings-menu-header-action" data-test-button="close-psm-subview" type="button" {{action "closeSubview"}}>{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||||
<h4>Keyboard shortcuts</h4>
|
||||
<div style="width:23px;"></div>
|
||||
</div>
|
||||
|
||||
<div class="settings-menu-content keyboard-shortcuts">
|
||||
<form class="gh-post-settings">
|
||||
<GhFormGroup>
|
||||
<label>Formatting</label>
|
||||
<div class="gh-shortcut">
|
||||
<div><strong>Bold</strong></div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key mono">B</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div><em>Emphasize</em></div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key mono">I</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div><u>Underline</u></div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key mono">U</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div><s>Strike through</s></div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key mono">X</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div class="link">Link</div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key mono">K</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div class="code">Inline code</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key" data-tooltip="Control">⌃</span>
|
||||
<span class="gh-key" data-tooltip="Shift">⇧</span>
|
||||
<span class="gh-key mono">K</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>List</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key" data-tooltip="Control">⌃</span>
|
||||
<span class="gh-key mono">L</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Ordered list</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key" data-tooltip="Control">⌃</span>
|
||||
<GhPostSettingsMenu::OptionOrAlt />
|
||||
<span class="gh-key mono">L</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Quote</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key" data-tooltip="Control">⌃</span>
|
||||
<span class="gh-key mono">Q</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>H2</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key" data-tooltip="Control">⌃</span>
|
||||
<span class="gh-key mono">H</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>H3</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key" data-tooltip="Control">⌃</span>
|
||||
<span class="gh-key mono">H</span>
|
||||
<span class="gh-key mono clear">2x</span>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup>
|
||||
<label>Editing</label>
|
||||
<div class="gh-shortcut">
|
||||
<div>Toggle card edit mode</div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key" data-tooltip="Return">↩</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Indent</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">tab</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Unindent</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key" data-tooltip="Shift">⇧</span>
|
||||
<span class="gh-key mono">tab</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Line break</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key" data-tooltip="Shift">⇧</span>
|
||||
<span class="gh-key" data-tooltip="Return">↩</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Undo</div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key mono">Z</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Redo</div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key" data-tooltip="Shift">⇧</span>
|
||||
<span class="gh-key mono">Z</span>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup>
|
||||
<label>Application</label>
|
||||
<div class="gh-shortcut">
|
||||
<div>Save</div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key mono">S</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Preview</div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key mono">P</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Publish</div>
|
||||
<div class="gh-keys">
|
||||
<GhPostSettingsMenu::CtrlOrCmd />
|
||||
<span class="gh-key" data-tooltip="Shift">⇧</span>
|
||||
<span class="gh-key mono">P</span>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup>
|
||||
<label>Inserting</label>
|
||||
<div class="gh-shortcut">
|
||||
<div>Code block</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">```</span>
|
||||
<span class="gh-key" data-tooltip="Return">↩</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Language code block</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">```html</span>
|
||||
<span class="gh-key" data-tooltip="Return">↩</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Image</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/image</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Markdown</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/md</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>HTML</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/html</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Gallery</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/gallery</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Divider</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">---</span>
|
||||
<span class="gh-key mono clear">or</span>
|
||||
<span class="gh-key mono">/hr</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Bookmark</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/bookmark [url]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Public preview</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/paywall</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Button</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/button</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Callout</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/callout</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Toggle</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/toggle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Video</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/video</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Audio</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/audio</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>File</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/file</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Product</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/product</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Header</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/header</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>GIF</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/gif</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Signup</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/signup</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>YouTube</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/youtube [url]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Twitter</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/twitter [url]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Unsplash</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/unsplash</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Vimeo</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/vimeo [url]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>CodePen</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/codepen [url]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Spotify</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/spotify [url]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>SoundCloud</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/soundcloud [url]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-shortcut">
|
||||
<div>Other embed</div>
|
||||
<div class="gh-keys">
|
||||
<span class="gh-key mono">/embed [url]</span>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</form>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
||||
|
||||
{{#if (eq this.subview "meta-data")}}
|
||||
<div class="settings-menu-header subview">
|
||||
<button aria-label="Close meta data panel" class="back settings-menu-header-action" data-test-button="close-psm-subview" type="button" {{action "closeSubview"}}>{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<span class="gh-key {{this.class}}" data-tooltip={{this.tooltip}}>{{this.character}}</span>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {htmlSafe} from '@ember/template';
|
||||
|
||||
const isMac = window.navigator.platform.startsWith('Mac');
|
||||
|
||||
export default class CtrlOrCmd extends Component {
|
||||
get tooltip() {
|
||||
return isMac ? 'Command' : '';
|
||||
}
|
||||
|
||||
get character() {
|
||||
const character = isMac ? '⌘' : 'Ctrl';
|
||||
return htmlSafe(character);
|
||||
}
|
||||
|
||||
get class() {
|
||||
return isMac ? '' : 'mono';
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<span class="gh-key {{this.class}}" data-tooltip={{this.tooltip}}>{{this.character}}</span>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {htmlSafe} from '@ember/template';
|
||||
|
||||
const isMac = window.navigator.platform.startsWith('Mac');
|
||||
|
||||
export default class CtrlOrCmd extends Component {
|
||||
get tooltip() {
|
||||
return isMac ? 'Option' : '';
|
||||
}
|
||||
|
||||
get character() {
|
||||
const character = isMac ? '⌥' : 'Alt';
|
||||
return htmlSafe(character);
|
||||
}
|
||||
|
||||
get class() {
|
||||
return isMac ? '' : 'mono';
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
max-width: 419px;
|
||||
overflow: auto;
|
||||
background-color: var(--white);
|
||||
opacity: 1;
|
||||
|
|
@ -428,6 +428,63 @@ li.nav-list-item .for-switch.x-small label {
|
|||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.settings-menu-content.keyboard-shortcuts .form-group {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.settings-menu-content.keyboard-shortcuts label {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--whitegrey-d1);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.settings-menu-content .gh-shortcut {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--whitegrey-d1);
|
||||
}
|
||||
|
||||
.settings-menu-content .gh-shortcut .link {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.settings-menu-content .gh-shortcut .code {
|
||||
font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
font-size: .95em;
|
||||
}
|
||||
|
||||
.gh-shortcut .gh-keys {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.gh-shortcut .gh-key {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
background: var(--whitegrey);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.gh-shortcut .gh-key.mono {
|
||||
font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.gh-shortcut .gh-key.mono.clear {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Background
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
|||
3
ghost/admin/public/assets/icons/keyboard.svg
Normal file
3
ghost/admin/public/assets/icons/keyboard.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 5H3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM5 10h2m4 0h2m4 0h2M5 15h2m4 0h8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 286 B |
Loading…
Add table
Reference in a new issue