diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte index b78025274..144dc8817 100644 --- a/ts/editor-toolbar/CommandIconButton.svelte +++ b/ts/editor-toolbar/CommandIconButton.svelte @@ -48,6 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let id: string; export let className = ""; export let tooltip: string; + export let shortcutLabel: string | undefined; export let icon: string; export let command: string; @@ -80,6 +81,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {id} {className} {tooltip} + {shortcutLabel} {active} {disables} {dropdownToggle} diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte index 21cce2d19..e9d494926 100644 --- a/ts/editor-toolbar/DropdownItem.svelte +++ b/ts/editor-toolbar/DropdownItem.svelte @@ -9,10 +9,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let id: string; export let className = ""; export let tooltip: string; + export let label: string; + export let shortcutLabel: string | undefined; export let onClick: (event: MouseEvent) => void; - export let label: string; - export let endLabel: string; const nightMode = getContext(nightModeKey); @@ -66,6 +66,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html title={tooltip} on:click={onClick} on:mousedown|preventDefault> - {label} - {#if endLabel}{endLabel}{/if} + {label} + {#if shortcutLabel}{shortcutLabel}{/if} diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte index 849b33575..b01ceb4e7 100644 --- a/ts/editor-toolbar/IconButton.svelte +++ b/ts/editor-toolbar/IconButton.svelte @@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let id: string; export let className = ""; export let tooltip: string; + export let shortcutLabel: string | undefined; export let icon: string; export let onClick: (event: MouseEvent) => void; @@ -16,6 +17,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let dropdownToggle = false; - + {@html icon} diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte index 0b838ce2e..1de49442c 100644 --- a/ts/editor-toolbar/LabelButton.svelte +++ b/ts/editor-toolbar/LabelButton.svelte @@ -6,12 +6,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import type { Readable } from "svelte/store"; import { onMount, createEventDispatcher, getContext } from "svelte"; import { disabledKey, nightModeKey } from "./contextKeys"; + import { mergeTooltipAndShortcut } from "./helpers"; export let id: string; export let className = ""; - + export let tooltip: string | undefined; + export let shortcutLabel: string | undefined; export let label: string; - export let tooltip: string; + + $: title = mergeTooltipAndShortcut(tooltip, shortcutLabel); + export let onClick: (event: MouseEvent) => void; export let disables = true; export let dropdownToggle = false; @@ -61,7 +65,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html class:btn-night={nightMode} tabindex="-1" disabled={_disabled} - title={tooltip} + {title} {...extraProps} on:click={onClick} on:mousedown|preventDefault> diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte index f0fc17e1b..ae0ac2bdb 100644 --- a/ts/editor-toolbar/SquareButton.svelte +++ b/ts/editor-toolbar/SquareButton.svelte @@ -6,10 +6,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import type { Readable } from "svelte/store"; import { getContext, onMount, createEventDispatcher } from "svelte"; import { disabledKey, nightModeKey } from "./contextKeys"; + import { mergeTooltipAndShortcut } from "./helpers"; export let id: string; export let className = ""; - export let tooltip: string; + export let tooltip: string | undefined; + export let shortcutLabel: string | undefined; + + $: title = mergeTooltipAndShortcut(tooltip, shortcutLabel); export let onClick: (event: MouseEvent) => void; export let active = false; @@ -79,7 +83,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html class:btn-day={!nightMode} class:btn-night={nightMode} tabindex="-1" - title={tooltip} + {title} disabled={_disabled} {...extraProps} on:click={onClick} diff --git a/ts/editor-toolbar/WithShortcuts.svelte b/ts/editor-toolbar/WithShortcuts.svelte index b7c3e4624..547e3d9b7 100644 --- a/ts/editor-toolbar/WithShortcuts.svelte +++ b/ts/editor-toolbar/WithShortcuts.svelte @@ -12,18 +12,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let button: ToolbarItem; export let shortcuts: string[]; - function extend({ - tooltip, - ...rest - }: DynamicSvelteComponent): DynamicSvelteComponent { - const platformShortcut = getPlatformString(shortcuts[0]); - - if (tooltip) { - tooltip = `${tooltip} (${platformShortcut})`; - } + function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent { + const shortcutLabel = getPlatformString(shortcuts[0]); return { - tooltip, + shortcutLabel, ...rest, }; } @@ -32,6 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html function createShortcut({ detail }: CustomEvent): void { const mounted: HTMLButtonElement = detail.button; + console.log(mounted); deregisters = shortcuts.map((shortcut: string): (() => void) => registerShortcut((event) => { mounted.dispatchEvent(new MouseEvent("click")); diff --git a/ts/editor-toolbar/helpers.ts b/ts/editor-toolbar/helpers.ts new file mode 100644 index 000000000..33fa31bec --- /dev/null +++ b/ts/editor-toolbar/helpers.ts @@ -0,0 +1,12 @@ +export function mergeTooltipAndShortcut( + tooltip: string | undefined, + shortcutLabel: string | undefined +): string | undefined { + return tooltip + ? shortcutLabel + ? `${tooltip} (${shortcutLabel})` + : tooltip + : shortcutLabel + ? `(${shortcutLabel})` + : undefined; +} diff --git a/ts/editor/notetype.ts b/ts/editor/notetype.ts index 4978aeea9..5192c97fe 100644 --- a/ts/editor/notetype.ts +++ b/ts/editor/notetype.ts @@ -6,7 +6,11 @@ import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent"; import { bridgeCommand } from "anki/bridgecommand"; import * as tr from "anki/i18n"; -import { labelButton, buttonGroup } from "editor-toolbar/dynamicComponents"; +import { + labelButton, + buttonGroup, + withShortcuts, +} from "editor-toolbar/dynamicComponents"; export function getNotetypeGroup(): DynamicSvelteComponent & ButtonGroupProps { @@ -17,11 +21,14 @@ export function getNotetypeGroup(): DynamicSvelteComponent & tooltip: tr.editingCustomizeFields(), }); - const cardsButton = labelButton({ - onClick: () => bridgeCommand("cards"), - disables: false, - label: `${tr.editingCards()}...`, - tooltip: tr.editingCustomizeCardTemplates(), + const cardsButton = withShortcuts({ + shortcuts: ["Control+KeyL"], + button: labelButton({ + onClick: () => bridgeCommand("cards"), + disables: false, + label: `${tr.editingCards()}...`, + tooltip: tr.editingCustomizeCardTemplates(), + }), }); return buttonGroup({ diff --git a/ts/editor/template.ts b/ts/editor/template.ts index b31ebb377..ba1dff07d 100644 --- a/ts/editor/template.ts +++ b/ts/editor/template.ts @@ -47,7 +47,7 @@ export function getTemplateGroup(): DynamicSvelteComponent & button: iconButton({ icon: paperclipIcon, onClick: onAttachment, - tooltip: tr.editingAttachPicturesaudiovideoF3(), + tooltip: tr.editingAttachPicturesaudiovideo(), }), }); @@ -56,7 +56,7 @@ export function getTemplateGroup(): DynamicSvelteComponent & button: iconButton({ icon: micIcon, onClick: onRecord, - tooltip: tr.editingRecordAudioF5(), + tooltip: tr.editingRecordAudio(), }), }); @@ -93,20 +93,26 @@ export function getTemplateGroup(): DynamicSvelteComponent & export function getTemplateMenus(): (DynamicSvelteComponent & DropdownMenuProps)[] { const mathjaxMenuItems = [ - dropdownItem({ - onClick: () => wrap("\\(", "\\)"), - label: tr.editingMathjaxInline(), - endLabel: "Ctrl+M, M", + withShortcuts({ + shortcuts: ["Control+KeyM, KeyM"], + button: dropdownItem({ + onClick: () => wrap("\\(", "\\)"), + label: tr.editingMathjaxInline(), + }), }), - dropdownItem({ - onClick: () => wrap("\\[", "\\]"), - label: tr.editingMathjaxBlock(), - endLabel: "Ctrl+M, E", + withShortcuts({ + shortcuts: ["Control+KeyM, KeyE"], + button: dropdownItem({ + onClick: () => wrap("\\[", "\\]"), + label: tr.editingMathjaxBlock(), + }), }), - dropdownItem({ - onClick: () => wrap("\\(\\ce{", "}\\)"), - label: tr.editingMathjaxChemistry(), - endLabel: "Ctrl+M, C", + withShortcuts({ + shortcuts: ["Control+KeyM, KeyC"], + button: dropdownItem({ + onClick: () => wrap("\\(\\ce{", "}\\)"), + label: tr.editingMathjaxChemistry(), + }), }), ];