Keyboard shortcuts help sheet

This commit is contained in:
Lim Chee Aun 2023-09-06 22:54:05 +08:00
parent 167fa70fd5
commit 0d090eb555
7 changed files with 175 additions and 2 deletions

View file

@ -23,6 +23,7 @@ import Compose from './components/compose';
import ComposeButton from './components/compose-button';
import Drafts from './components/drafts';
import { ICONS } from './components/icon';
import KeyboardShortcutsHelp from './components/keyboard-shortcuts-help';
import Loader from './components/loader';
import MediaModal from './components/media-modal';
import Modal from './components/modal';
@ -192,7 +193,8 @@ function App() {
snapStates.showAccount ||
snapStates.showDrafts ||
snapStates.showMediaModal ||
snapStates.showShortcutsSettings;
snapStates.showShortcutsSettings ||
snapStates.showKeyboardShortcutsHelp;
useEffect(() => {
if (!showModal) focusDeck();
}, [showModal]);
@ -433,6 +435,7 @@ function App() {
<NotificationService />
<BackgroundService isLoggedIn={isLoggedIn} />
<SearchCommand onClose={focusDeck} />
<KeyboardShortcutsHelp />
</>
);
}

View file

@ -97,6 +97,7 @@ export const ICONS = {
clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
};
function Icon({

View file

@ -0,0 +1,22 @@
#keyboard-shortcuts-help-container {
table {
th {
font-weight: normal;
text-align: start;
padding: 0.25em 0;
line-height: 1;
}
td {
padding: 0.25em 1em;
}
}
kbd {
border-radius: 4px;
display: inline-block;
padding: 0.3em;
line-height: 1;
border: 1px solid var(--outline-color);
background-color: var(--bg-faded-color);
}
}

View file

@ -0,0 +1,136 @@
import './keyboard-shortcuts-help.css';
import { useHotkeys } from 'react-hotkeys-hook';
import { useSnapshot } from 'valtio';
import states from '../utils/states';
import Icon from './icon';
import Modal from './modal';
export default function KeyboardShortcutsHelp() {
const snapStates = useSnapshot(states);
function onClose() {
states.showKeyboardShortcutsHelp = false;
}
useHotkeys(
'?, shift+?',
(e) => {
console.log('help');
states.showKeyboardShortcutsHelp = true;
},
{
ignoreEventWhen: (e) => {
const hasModal = !!document.querySelector('#modal-container > *');
return hasModal;
},
},
);
const escRef = useHotkeys('esc', onClose, []);
return (
!!snapStates.showKeyboardShortcutsHelp && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
onClose();
}
}}
>
<div
id="keyboard-shortcuts-help-container"
class="sheet"
tabindex="-1"
ref={escRef}
>
<button type="button" class="sheet-close" onClick={onClose}>
<Icon icon="x" />
</button>
<header>
<h2>Keyboard shortcuts</h2>
</header>
<main>
<table>
{[
{
action: 'Keyboard shortcuts help',
keys: <kbd>?</kbd>,
},
{
action: 'Next post',
keys: <kbd>j</kbd>,
},
{
action: 'Previous post',
keys: <kbd>k</kbd>,
},
{
action: 'Skip carousel to next post',
keys: (
<>
<kbd>Shift</kbd> + <kbd>j</kbd>
</>
),
},
{
action: 'Skip carousel to previous post',
keys: (
<>
<kbd>Shift</kbd> + <kbd>k</kbd>
</>
),
},
{
action: 'Search',
keys: <kbd>/</kbd>,
},
{
action: 'Compose new post',
keys: <kbd>c</kbd>,
},
{
action: 'Send post',
keys: (
<>
<kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd></kbd> +{' '}
<kbd>Enter</kbd>
</>
),
},
{
action: 'Open post details',
keys: (
<>
<kbd>Enter</kbd> or <kbd>o</kbd>
</>
),
},
{
action: 'Toggle expanded/collapsed thread',
keys: <kbd>x</kbd>,
},
{
action: 'Close post or dialogs',
keys: (
<>
<kbd>Esc</kbd> or <kbd>Backspace</kbd>
</>
),
},
].map(({ action, keys }) => (
<tr key={action}>
<th>{action}</th>
<td>{keys}</td>
</tr>
))}
</table>
</main>
</div>
</Modal>
)
);
}

View file

@ -204,6 +204,14 @@ function NavMenu(props) {
>
<Icon icon="group" size="l" /> <span>Accounts&hellip;</span>
</MenuItem>
<MenuItem
onClick={() => {
states.showKeyboardShortcutsHelp = true;
}}
>
<Icon icon="keyboard" size="l" />{' '}
<span>Keyboard shortcuts</span>
</MenuItem>
<MenuItem
onClick={() => {
states.showShortcutsSettings = true;

View file

@ -315,7 +315,8 @@ pre {
tab-size: 2;
}
pre code,
code {
code,
kbd {
font-size: 90%;
font-family: var(--monospace-font);
}

View file

@ -38,6 +38,7 @@ const states = proxy({
showDrafts: false,
showMediaModal: false,
showShortcutsSettings: false,
showKeyboardShortcutsHelp: false,
// Shortcuts
shortcuts: store.account.get('shortcuts') ?? [],
// Settings
@ -137,6 +138,7 @@ export function hideAllModals() {
states.showDrafts = false;
states.showMediaModal = false;
states.showShortcutsSettings = false;
states.showKeyboardShortcutsHelp = false;
}
export function statusKey(id, instance) {