langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add better better shortcutLabel support for buttons

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ts/editor-toolbar/CommandIconButton.svelte
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 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}

8
ts/editor-toolbar/DropdownItem.svelte
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 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);
</script>
@ -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>
<span class:me-3={endLabel}>{label}</span>
{#if endLabel}<span class="monospace">{endLabel}</span>{/if}
<span class:me-3={shortcutLabel}>{label}</span>
{#if shortcutLabel}<span class="monospace">{shortcutLabel}</span>{/if}
</button>

11
ts/editor-toolbar/IconButton.svelte
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 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;
</script>
<SquareButton {id} {className} {tooltip} {onClick} {disables} {dropdownToggle} on:mount>
<SquareButton
{id}
{className}
{tooltip}
{shortcutLabel}
{onClick}
{disables}
{dropdownToggle}
on:mount>
{@html icon}
</SquareButton>

10
ts/editor-toolbar/LabelButton.svelte
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 { 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>

8
ts/editor-toolbar/SquareButton.svelte
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 { 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}

14
ts/editor-toolbar/WithShortcuts.svelte
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 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"));

12
ts/editor-toolbar/helpers.ts Normal file
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;
}

19
ts/editor/notetype.ts
View File

@ -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<typeof ButtonGroup> &
ButtonGroupProps {
@ -17,11 +21,14 @@ export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
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({

34
ts/editor/template.ts
View File

@ -47,7 +47,7 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
button: iconButton({
icon: paperclipIcon,
onClick: onAttachment,
tooltip: tr.editingAttachPicturesaudiovideoF3(),
tooltip: tr.editingAttachPicturesaudiovideo(),
}),
});
@ -56,7 +56,7 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
button: iconButton({
icon: micIcon,
onClick: onRecord,
tooltip: tr.editingRecordAudioF5(),
tooltip: tr.editingRecordAudio(),
}),
});
@ -93,20 +93,26 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> &
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(),
}),
}),
];