From d2ca94a29d13f48c07cdd5c8d1ed8182664468c8 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Thu, 22 Apr 2021 03:25:31 +0200 Subject: [PATCH] Move other buttons to WithShortcut --- qt/aqt/editor.py | 16 -------- .../{WithShortcut.d.ts => WithShortcuts.d.ts} | 4 +- ...thShortcut.svelte => WithShortcuts.svelte} | 16 ++++---- ts/editor-toolbar/dynamicComponents.ts | 8 ++-- ts/editor/cloze.ts | 23 ++++++----- ts/editor/color.ts | 31 +++++++++----- ts/editor/formatInline.ts | 40 +++++++++++-------- ts/editor/template.ts | 35 ++++++++++------ 8 files changed, 94 insertions(+), 79 deletions(-) rename ts/editor-toolbar/{WithShortcut.d.ts => WithShortcuts.d.ts} (76%) rename ts/editor-toolbar/{WithShortcut.svelte => WithShortcuts.svelte} (67%) diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py index 64f12bfbb..808cdf86c 100644 --- a/qt/aqt/editor.py +++ b/qt/aqt/editor.py @@ -311,22 +311,6 @@ $editorToolbar.addButtonGroup({{ def setupShortcuts(self) -> None: # if a third element is provided, enable shortcut even when no field selected cuts: List[Tuple] = [ - ("Ctrl+L", self.onCardLayout, True), - ("Ctrl++", self.toggleSuper), - ("Ctrl+=", self.toggleSub), - ("F7", self.onForeground), - ("F8", self.onChangeCol), - ("Ctrl+Shift+C", self.onCloze), - ("Ctrl+Shift+Alt+C", self.onCloze), - ("F3", self.onAddMedia), - ("F5", self.onRecSound), - ("Ctrl+T, T", self.insertLatex), - ("Ctrl+T, E", self.insertLatexEqn), - ("Ctrl+T, M", self.insertLatexMathEnv), - ("Ctrl+M, M", self.insertMathjaxInline), - ("Ctrl+M, E", self.insertMathjaxBlock), - ("Ctrl+M, C", self.insertMathjaxChemistry), - ("Ctrl+Shift+X", self.onHtmlEdit), ("Ctrl+Shift+T", self.onFocusTags, True), ] gui_hooks.editor_did_init_shortcuts(cuts, self) diff --git a/ts/editor-toolbar/WithShortcut.d.ts b/ts/editor-toolbar/WithShortcuts.d.ts similarity index 76% rename from ts/editor-toolbar/WithShortcut.d.ts rename to ts/editor-toolbar/WithShortcuts.d.ts index 624622767..2b8a19a86 100644 --- a/ts/editor-toolbar/WithShortcut.d.ts +++ b/ts/editor-toolbar/WithShortcuts.d.ts @@ -2,7 +2,7 @@ // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import type { ToolbarItem } from "./types"; -export interface WithShortcutProps { +export interface WithShortcutsProps { button: ToolbarItem; - shortcut: string; + shortcuts: string[]; } diff --git a/ts/editor-toolbar/WithShortcut.svelte b/ts/editor-toolbar/WithShortcuts.svelte similarity index 67% rename from ts/editor-toolbar/WithShortcut.svelte rename to ts/editor-toolbar/WithShortcuts.svelte index fdf30456f..2823e6a76 100644 --- a/ts/editor-toolbar/WithShortcut.svelte +++ b/ts/editor-toolbar/WithShortcuts.svelte @@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { registerShortcut } from "anki/shortcuts"; export let button: ToolbarItem; - export let shortcut: string; + export let shortcuts: string[]; function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent { return { @@ -18,17 +18,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html }; } - let deregister; + let deregister: (() => void)[]; function createShortcut({ detail }: CustomEvent): void { const mounted: HTMLButtonElement = detail.button; - deregister = registerShortcut((event) => { - mounted.dispatchEvent(new MouseEvent("click")); - event.preventDefault(); - }, shortcut); + deregisters = shortcuts.map((shortcut: string): (() => void) => + registerShortcut((event) => { + mounted.dispatchEvent(new MouseEvent("click")); + event.preventDefault(); + }, shortcut) + ); } - onDestroy(() => deregister()); + onDestroy(() => deregisters.map((dereg) => dereg())); (WithDropdownMenu); -export const withShortcut = dynamicComponent( - WithShortcut +export const withShortcuts = dynamicComponent( + WithShortcuts ); diff --git a/ts/editor/cloze.ts b/ts/editor/cloze.ts index 8a3a6491a..c40fc551b 100644 --- a/ts/editor/cloze.ts +++ b/ts/editor/cloze.ts @@ -1,11 +1,11 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -import type IconButton from "editor-toolbar/IconButton.svelte"; -import type { IconButtonProps } from "editor-toolbar/IconButton"; +import type WithShortcuts from "editor-toolbar/WithShortcuts.svelte"; +import type { WithShortcutsProps } from "editor-toolbar/WithShortcuts"; import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent"; import * as tr from "anki/i18n"; -import { iconButton } from "editor-toolbar/dynamicComponents"; +import { iconButton, withShortcuts } from "editor-toolbar/dynamicComponents"; import bracketsIcon from "./code-brackets.svg"; @@ -40,12 +40,15 @@ function onCloze(event: MouseEvent): void { wrap(`{{c${highestCloze}::`, "}}"); } -export function getClozeButton(): DynamicSvelteComponent & - IconButtonProps { - return iconButton({ - id: "cloze", - icon: bracketsIcon, - onClick: onCloze, - tooltip: tr.editingClozeDeletionCtrlandshiftandc(), +export function getClozeButton(): DynamicSvelteComponent & + WithShortcutsProps { + return withShortcuts({ + shortcuts: ["Control+Shift+KeyC", "Control+Alt+Shift+KeyC"], + button: iconButton({ + id: "cloze", + icon: bracketsIcon, + onClick: onCloze, + tooltip: tr.editingClozeDeletionCtrlandshiftandc(), + }), }); } diff --git a/ts/editor/color.ts b/ts/editor/color.ts index 2e3a36d55..1c2dca19f 100644 --- a/ts/editor/color.ts +++ b/ts/editor/color.ts @@ -4,7 +4,12 @@ import type ButtonGroup from "editor-toolbar/ButtonGroup.svelte"; import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup"; import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent"; -import { iconButton, colorPicker, buttonGroup } from "editor-toolbar/dynamicComponents"; +import { + iconButton, + colorPicker, + buttonGroup, + withShortcuts, +} from "editor-toolbar/dynamicComponents"; import * as tr from "anki/i18n"; import squareFillIcon from "./square-fill.svg"; @@ -26,17 +31,23 @@ function wrapWithForecolor(color: string): void { export function getColorGroup(): DynamicSvelteComponent & ButtonGroupProps { - const forecolorButton = iconButton({ - icon: squareFillIcon, - className: "forecolor", - onClick: () => wrapWithForecolor(getForecolor()), - tooltip: tr.editingSetForegroundColourF7(), + const forecolorButton = withShortcuts({ + shortcuts: ["F7"], + button: iconButton({ + icon: squareFillIcon, + className: "forecolor", + onClick: () => wrapWithForecolor(getForecolor()), + tooltip: tr.editingSetForegroundColourF7(), + }), }); - const colorpickerButton = colorPicker({ - onChange: ({ currentTarget }) => - setForegroundColor((currentTarget as HTMLInputElement).value), - tooltip: tr.editingChangeColourF8(), + const colorpickerButton = withShortcuts({ + shortcuts: ["F8"], + button: colorPicker({ + onChange: ({ currentTarget }) => + setForegroundColor((currentTarget as HTMLInputElement).value), + tooltip: tr.editingChangeColourF8(), + }), }); return buttonGroup({ diff --git a/ts/editor/formatInline.ts b/ts/editor/formatInline.ts index 3052e1066..6907945b3 100644 --- a/ts/editor/formatInline.ts +++ b/ts/editor/formatInline.ts @@ -9,7 +9,7 @@ import { commandIconButton, iconButton, buttonGroup, - withShortcut, + withShortcuts, } from "editor-toolbar/dynamicComponents"; import boldIcon from "./type-bold.svg"; @@ -21,8 +21,8 @@ import eraserIcon from "./eraser.svg"; export function getFormatInlineGroup(): DynamicSvelteComponent & ButtonGroupProps { - const boldButton = withShortcut({ - shortcut: "Control+KeyB", + const boldButton = withShortcuts({ + shortcuts: ["Control+KeyB"], button: commandIconButton({ icon: boldIcon, tooltip: tr.editingBoldTextCtrlandb(), @@ -30,8 +30,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent & ButtonGroupProps { - const attachmentButton = iconButton({ - icon: paperclipIcon, - onClick: onAttachment, - tooltip: tr.editingAttachPicturesaudiovideoF3(), + const attachmentButton = withShortcuts({ + shortcuts: ["F3"], + button: iconButton({ + icon: paperclipIcon, + onClick: onAttachment, + tooltip: tr.editingAttachPicturesaudiovideoF3(), + }), }); - const recordButton = iconButton({ - icon: micIcon, - onClick: onRecord, - tooltip: tr.editingRecordAudioF5(), + const recordButton = withShortcuts({ + shortcuts: ["F5"], + button: iconButton({ + icon: micIcon, + onClick: onRecord, + tooltip: tr.editingRecordAudioF5(), + }), }); const mathjaxButton = iconButton({ icon: functionIcon, - foo: 5, }); const mathjaxButtonWithMenu = withDropdownMenu({ @@ -63,10 +69,13 @@ export function getTemplateGroup(): DynamicSvelteComponent & menuId: mathjaxMenuId, }); - const htmlButton = iconButton({ - icon: xmlIcon, - onClick: onHtmlEdit, - tooltip: tr.editingHtmlEditor, + const htmlButton = withShortcuts({ + shortcuts: ["Control+Shift+KeyX"], + button: iconButton({ + icon: xmlIcon, + onClick: onHtmlEdit, + tooltip: tr.editingHtmlEditor(), + }), }); return buttonGroup({