-
+
+
)
}
diff --git a/src/renderer/apps/reader/keyboard-shortcuts-panel.tsx b/src/renderer/apps/reader/keyboard-shortcuts-panel.tsx
new file mode 100644
index 0000000..4d21dfe
--- /dev/null
+++ b/src/renderer/apps/reader/keyboard-shortcuts-panel.tsx
@@ -0,0 +1,131 @@
+import { observer } from 'mobx-react-lite'
+import intl from 'react-intl-universal'
+import { store } from '@/renderer/store'
+import {
+ Dialog,
+ DialogSurface,
+ DialogBody,
+ DialogTitle,
+ DialogContent,
+ makeStyles,
+ tokens,
+} from '@fluentui/react-components'
+
+const { readerStore } = store
+
+const useStyles = makeStyles({
+ key: {
+ color: tokens.colorPaletteMarigoldForeground3,
+ fontWeight: tokens.fontWeightBold,
+ },
+})
+
+function KeyboardShortcutsPanel() {
+ const { showKeyboardPanel } = readerStore
+ const styles = useStyles()
+
+ const shortcuts = [
+ {
+ keys: ['?'],
+ text: intl.get('reader.keyboard.keys.sw'),
+ },
+ {
+ keys: ['g', 'i'],
+ text: intl.get('reader.keyboard.keys.gi'),
+ },
+ {
+ keys: ['g', 's'],
+ text: intl.get('reader.keyboard.keys.gs'),
+ },
+ {
+ keys: ['g', 'a'],
+ text: intl.get('reader.keyboard.keys.ga'),
+ },
+ {
+ keys: ['*', 'a'],
+ text: intl.get('reader.keyboard.keys.selectAll'),
+ },
+ {
+ keys: ['*', 'n'],
+ text: intl.get('reader.keyboard.keys.deselect'),
+ },
+ {
+ keys: ['x'],
+ text: intl.get('reader.keyboard.keys.x'),
+ },
+ {
+ keys: ['s'],
+ text: intl.get('reader.keyboard.keys.s'),
+ },
+ {
+ keys: ['j'],
+ text: intl.get('reader.keyboard.keys.j'),
+ },
+ {
+ keys: ['k'],
+ text: intl.get('reader.keyboard.keys.k'),
+ },
+ {
+ keys: ['o'],
+ text: intl.get('reader.keyboard.keys.o'),
+ },
+ {
+ keys: ['u'],
+ text: intl.get('reader.keyboard.keys.u'),
+ },
+ {
+ keys: ['v'],
+ text: intl.get('reader.keyboard.keys.v'),
+ },
+ ].map((item) => {
+ const keys = item.keys.map((k, index, v) => (
+
+
+ {k}
+
+ {index !== v.length - 1 ? then : null}
+
+ ))
+ return (
+
+
+ {keys}
+
+ {' '}
+ :
+ {' '}
+ {item.text}
+
+ )
+ })
+
+ return (
+
+ )
+}
+
+export default observer(KeyboardShortcutsPanel)
diff --git a/src/renderer/apps/reader/use-keyboard.ts b/src/renderer/apps/reader/use-keyboard.ts
index 36ad543..d70900a 100644
--- a/src/renderer/apps/reader/use-keyboard.ts
+++ b/src/renderer/apps/reader/use-keyboard.ts
@@ -1,4 +1,4 @@
-import { makeKeyboard } from '@/renderer/hooks/keyboard'
+import { makeKeyboard, Handler } from '@/renderer/hooks/keyboard'
import { store } from '@/renderer/store'
import { openExternal } from '@/utils/browser/shell'
@@ -8,22 +8,38 @@ const { useKeyboard, register } = makeKeyboard({ app: 'reader' })
export default useKeyboard
-register(['j'], () => readerStore.moveNext())
-register(['k'], () => readerStore.movePrev())
+const iregister = (k: string[], fn: Handler) => {
+ const isLocked = () => readerStore.showKeyboardPanel
-register(['o'], () => readerStore.open())
-register(['u'], () => readerStore.fold())
-register(['s'], () => readerStore.toggleStarred())
-register(['v'], () => {
+ const handler: Handler = (event, ks) => {
+ if (isLocked()) {
+ return
+ }
+
+ fn(event, ks)
+ }
+
+ register(k, handler)
+}
+
+register(['shift', '?'], () => readerStore.toggleKeyboardPanel())
+
+iregister(['j'], () => readerStore.moveNext())
+iregister(['k'], () => readerStore.movePrev())
+
+iregister(['o'], () => readerStore.open())
+iregister(['u'], () => readerStore.fold())
+iregister(['s'], () => readerStore.toggleStarred())
+iregister(['v'], () => {
if (readerStore.opened) {
openExternal(readerStore.activeArticle?.url!)
}
})
-register(['x'], () => readerStore.toggleSelected())
-register(['*', 'a'], () => readerStore.selectAll())
-register(['*', 'n'], () => readerStore.deselectAll())
+iregister(['x'], () => readerStore.toggleSelected())
+iregister(['*', 'a'], () => readerStore.selectAll())
+iregister(['*', 'n'], () => readerStore.deselectAll())
-register(['g', 's'], () => readerStore.changeTab('starred'))
-register(['g', 'a'], () => readerStore.changeTab('all'))
-register(['g', 'i'], () => readerStore.changeTab('unread'))
+iregister(['g', 's'], () => readerStore.changeTab('starred'))
+iregister(['g', 'a'], () => readerStore.changeTab('all'))
+iregister(['g', 'i'], () => readerStore.changeTab('unread'))
diff --git a/src/renderer/hooks/keyboard.ts b/src/renderer/hooks/keyboard.ts
index ec44619..55a9f96 100644
--- a/src/renderer/hooks/keyboard.ts
+++ b/src/renderer/hooks/keyboard.ts
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
import { store } from '@/renderer/store'
import { Apps } from '@/types/common'
-type Handler = (event: KeyboardEvent, k: string[]) => any
+export type Handler = (event: KeyboardEvent, k: string[]) => any
const equal = (a: string[], b: string[]) => {
if (!a.length || !b.length || a.length !== b.length) {
diff --git a/src/renderer/store/reader.ts b/src/renderer/store/reader.ts
index 42f2104..545cea1 100644
--- a/src/renderer/store/reader.ts
+++ b/src/renderer/store/reader.ts
@@ -25,6 +25,8 @@ export class ReaderStore {
opened = false
+ showKeyboardPanel = false
+
constructor(rootStore: RootStore) {
makeAutoObservable(this, {
rootStore: false,
@@ -319,4 +321,16 @@ export class ReaderStore {
this.opened = false
setTimeout(() => this.scrollIntoView())
}
+
+ openKeyboardPanel() {
+ this.showKeyboardPanel = true
+ }
+
+ closeKeyboardPanel() {
+ this.showKeyboardPanel = false
+ }
+
+ toggleKeyboardPanel() {
+ this.showKeyboardPanel = !this.showKeyboardPanel
+ }
}