Add better better shortcutLabel support for buttons
This commit is contained in:
parent
4a264cd8b7
commit
3cf7db8557
@ -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}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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}
|
||||||
|
@ -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"));
|
||||||
|
12
ts/editor-toolbar/helpers.ts
Normal file
12
ts/editor-toolbar/helpers.ts
Normal 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;
|
||||||
|
}
|
@ -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({
|
||||||
|
@ -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",
|
}),
|
||||||
}),
|
}),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user