Add better better shortcutLabel support for buttons

This commit is contained in:
Henrik Giesel 2021-04-22 14:18:48 +02:00
parent 4a264cd8b7
commit 3cf7db8557
9 changed files with 78 additions and 40 deletions

View File

@ -48,6 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let id: string; export let id: string;
export let className = ""; export let className = "";
export let tooltip: string; export let tooltip: string;
export let shortcutLabel: string | undefined;
export let icon: string; export let icon: string;
export let command: string; export let command: string;
@ -80,6 +81,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{id} {id}
{className} {className}
{tooltip} {tooltip}
{shortcutLabel}
{active} {active}
{disables} {disables}
{dropdownToggle} {dropdownToggle}

View File

@ -9,10 +9,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let id: string; export let id: string;
export let className = ""; export let className = "";
export let tooltip: string; export let tooltip: string;
export let label: string;
export let shortcutLabel: string | undefined;
export let onClick: (event: MouseEvent) => void; export let onClick: (event: MouseEvent) => void;
export let label: string;
export let endLabel: string;
const nightMode = getContext(nightModeKey); const nightMode = getContext(nightModeKey);
</script> </script>
@ -66,6 +66,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
title={tooltip} title={tooltip}
on:click={onClick} on:click={onClick}
on:mousedown|preventDefault> on:mousedown|preventDefault>
<span class:me-3={endLabel}>{label}</span> <span class:me-3={shortcutLabel}>{label}</span>
{#if endLabel}<span class="monospace">{endLabel}</span>{/if} {#if shortcutLabel}<span class="monospace">{shortcutLabel}</span>{/if}
</button> </button>

View File

@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let id: string; export let id: string;
export let className = ""; export let className = "";
export let tooltip: string; export let tooltip: string;
export let shortcutLabel: string | undefined;
export let icon: string; export let icon: string;
export let onClick: (event: MouseEvent) => void; 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; export let dropdownToggle = false;
</script> </script>
<SquareButton {id} {className} {tooltip} {onClick} {disables} {dropdownToggle} on:mount> <SquareButton
{id}
{className}
{tooltip}
{shortcutLabel}
{onClick}
{disables}
{dropdownToggle}
on:mount>
{@html icon} {@html icon}
</SquareButton> </SquareButton>

View File

@ -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 type { Readable } from "svelte/store";
import { onMount, createEventDispatcher, getContext } from "svelte"; import { onMount, createEventDispatcher, getContext } from "svelte";
import { disabledKey, nightModeKey } from "./contextKeys"; import { disabledKey, nightModeKey } from "./contextKeys";
import { mergeTooltipAndShortcut } from "./helpers";
export let id: string; export let id: string;
export let className = ""; export let className = "";
export let tooltip: string | undefined;
export let shortcutLabel: string | undefined;
export let label: string; export let label: string;
export let tooltip: string;
$: title = mergeTooltipAndShortcut(tooltip, shortcutLabel);
export let onClick: (event: MouseEvent) => void; export let onClick: (event: MouseEvent) => void;
export let disables = true; export let disables = true;
export let dropdownToggle = false; 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} class:btn-night={nightMode}
tabindex="-1" tabindex="-1"
disabled={_disabled} disabled={_disabled}
title={tooltip} {title}
{...extraProps} {...extraProps}
on:click={onClick} on:click={onClick}
on:mousedown|preventDefault> on:mousedown|preventDefault>

View File

@ -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 type { Readable } from "svelte/store";
import { getContext, onMount, createEventDispatcher } from "svelte"; import { getContext, onMount, createEventDispatcher } from "svelte";
import { disabledKey, nightModeKey } from "./contextKeys"; import { disabledKey, nightModeKey } from "./contextKeys";
import { mergeTooltipAndShortcut } from "./helpers";
export let id: string; export let id: string;
export let className = ""; 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 onClick: (event: MouseEvent) => void;
export let active = false; 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-day={!nightMode}
class:btn-night={nightMode} class:btn-night={nightMode}
tabindex="-1" tabindex="-1"
title={tooltip} {title}
disabled={_disabled} disabled={_disabled}
{...extraProps} {...extraProps}
on:click={onClick} on:click={onClick}

View File

@ -12,18 +12,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let button: ToolbarItem; export let button: ToolbarItem;
export let shortcuts: string[]; export let shortcuts: string[];
function extend({ function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
tooltip, const shortcutLabel = getPlatformString(shortcuts[0]);
...rest
}: DynamicSvelteComponent): DynamicSvelteComponent {
const platformShortcut = getPlatformString(shortcuts[0]);
if (tooltip) {
tooltip = `${tooltip} (${platformShortcut})`;
}
return { return {
tooltip, shortcutLabel,
...rest, ...rest,
}; };
} }
@ -32,6 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function createShortcut({ detail }: CustomEvent): void { function createShortcut({ detail }: CustomEvent): void {
const mounted: HTMLButtonElement = detail.button; const mounted: HTMLButtonElement = detail.button;
console.log(mounted);
deregisters = shortcuts.map((shortcut: string): (() => void) => deregisters = shortcuts.map((shortcut: string): (() => void) =>
registerShortcut((event) => { registerShortcut((event) => {
mounted.dispatchEvent(new MouseEvent("click")); mounted.dispatchEvent(new MouseEvent("click"));

View File

@ -0,0 +1,12 @@
export function mergeTooltipAndShortcut(
tooltip: string | undefined,
shortcutLabel: string | undefined
): string | undefined {
return tooltip
? shortcutLabel
? `${tooltip} (${shortcutLabel})`
: tooltip
: shortcutLabel
? `(${shortcutLabel})`
: undefined;
}

View File

@ -6,7 +6,11 @@ import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
import { bridgeCommand } from "anki/bridgecommand"; import { bridgeCommand } from "anki/bridgecommand";
import * as tr from "anki/i18n"; 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<typeof ButtonGroup> & export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
ButtonGroupProps { ButtonGroupProps {
@ -17,11 +21,14 @@ export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
tooltip: tr.editingCustomizeFields(), tooltip: tr.editingCustomizeFields(),
}); });
const cardsButton = labelButton({ const cardsButton = withShortcuts({
shortcuts: ["Control+KeyL"],
button: labelButton({
onClick: () => bridgeCommand("cards"), onClick: () => bridgeCommand("cards"),
disables: false, disables: false,
label: `${tr.editingCards()}...`, label: `${tr.editingCards()}...`,
tooltip: tr.editingCustomizeCardTemplates(), tooltip: tr.editingCustomizeCardTemplates(),
}),
}); });
return buttonGroup({ return buttonGroup({

View File

@ -47,7 +47,7 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
button: iconButton({ button: iconButton({
icon: paperclipIcon, icon: paperclipIcon,
onClick: onAttachment, onClick: onAttachment,
tooltip: tr.editingAttachPicturesaudiovideoF3(), tooltip: tr.editingAttachPicturesaudiovideo(),
}), }),
}); });
@ -56,7 +56,7 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
button: iconButton({ button: iconButton({
icon: micIcon, icon: micIcon,
onClick: onRecord, onClick: onRecord,
tooltip: tr.editingRecordAudioF5(), tooltip: tr.editingRecordAudio(),
}), }),
}); });
@ -93,20 +93,26 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> & export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> &
DropdownMenuProps)[] { DropdownMenuProps)[] {
const mathjaxMenuItems = [ const mathjaxMenuItems = [
dropdownItem({ withShortcuts({
shortcuts: ["Control+KeyM, KeyM"],
button: dropdownItem({
onClick: () => wrap("\\(", "\\)"), onClick: () => wrap("\\(", "\\)"),
label: tr.editingMathjaxInline(), label: tr.editingMathjaxInline(),
endLabel: "Ctrl+M, M",
}), }),
dropdownItem({ }),
withShortcuts({
shortcuts: ["Control+KeyM, KeyE"],
button: dropdownItem({
onClick: () => wrap("\\[", "\\]"), onClick: () => wrap("\\[", "\\]"),
label: tr.editingMathjaxBlock(), label: tr.editingMathjaxBlock(),
endLabel: "Ctrl+M, E",
}), }),
dropdownItem({ }),
withShortcuts({
shortcuts: ["Control+KeyM, KeyC"],
button: dropdownItem({
onClick: () => wrap("\\(\\ce{", "}\\)"), onClick: () => wrap("\\(\\ce{", "}\\)"),
label: tr.editingMathjaxChemistry(), label: tr.editingMathjaxChemistry(),
endLabel: "Ctrl+M, C", }),
}), }),
]; ];