Fix CommandIconButton (#1648)

- It did not respect shortcuts
This commit is contained in:
Henrik Giesel 2022-02-08 05:13:18 +01:00 committed by GitHub
parent 16e9e56ad8
commit c0d47e18b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 12 deletions

View File

@ -89,7 +89,7 @@ if (isApplePlatform()) {
} }
export function preventBuiltinContentEditableShortcuts(editable: HTMLElement): void { export function preventBuiltinContentEditableShortcuts(editable: HTMLElement): void {
for (const keyCombination of ["Control+B", "Control+U", "Control+I", "Control+R"]) { for (const keyCombination of ["Control+B", "Control+U", "Control+I"]) {
registerShortcut(preventDefault, keyCombination, editable); registerShortcut(preventDefault, keyCombination, editable);
} }
} }

View File

@ -6,15 +6,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import IconButton from "../../components/IconButton.svelte"; import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte"; import Shortcut from "../../components/Shortcut.svelte";
import WithState from "../../components/WithState.svelte"; import WithState from "../../components/WithState.svelte";
import { getPlatformString } from "../../lib/shortcuts";
import { execCommand, queryCommandState } from "../helpers"; import { execCommand, queryCommandState } from "../helpers";
import { context as noteEditorContext } from "../NoteEditor.svelte"; import { context as noteEditorContext } from "../NoteEditor.svelte";
import { editingInputIsRichText } from "../rich-text-input"; import { editingInputIsRichText } from "../rich-text-input";
export let key: string; export let key: string;
export let tooltip: string; export let tooltip: string;
export let shortcut: string = ""; export let shortcut: string | null = null;
$: theTooltip = shortcut ? `${tooltip} (${getPlatformString(shortcut)})` : tooltip;
export let withoutShortcut = false;
export let withoutState = false; export let withoutState = false;
const { focusedInput } = noteEditorContext.get(); const { focusedInput } = noteEditorContext.get();
@ -27,12 +29,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
{#if withoutState} {#if withoutState}
<IconButton {tooltip} {disabled} on:click={action}> <IconButton tooltip={theTooltip} {disabled} on:click={action}>
<slot /> <slot />
</IconButton> </IconButton>
{#if !withoutShortcut} {#if shortcut}
<Shortcut keyCombination={shortcut} on:click={action} /> <Shortcut keyCombination={shortcut} on:action={action} />
{/if} {/if}
{:else} {:else}
<WithState <WithState
@ -42,7 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let:updateState let:updateState
> >
<IconButton <IconButton
{tooltip} tooltip={theTooltip}
{active} {active}
{disabled} {disabled}
on:click={(event) => { on:click={(event) => {
@ -53,7 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<slot /> <slot />
</IconButton> </IconButton>
{#if !withoutShortcut} {#if shortcut}
<Shortcut <Shortcut
keyCombination={shortcut} keyCombination={shortcut}
on:action={(event) => { on:action={(event) => {

View File

@ -97,7 +97,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<CommandIconButton <CommandIconButton
key="justifyLeft" key="justifyLeft"
tooltip={tr.editingAlignLeft()} tooltip={tr.editingAlignLeft()}
withoutShortcut
--border-left-radius="5px" --border-left-radius="5px"
>{@html justifyLeftIcon}</CommandIconButton >{@html justifyLeftIcon}</CommandIconButton
> >
@ -105,21 +104,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<CommandIconButton <CommandIconButton
key="justifyCenter" key="justifyCenter"
tooltip={tr.editingCenter()} tooltip={tr.editingCenter()}
withoutShortcut
>{@html justifyCenterIcon}</CommandIconButton >{@html justifyCenterIcon}</CommandIconButton
> >
<CommandIconButton <CommandIconButton
key="justifyRight" key="justifyRight"
tooltip={tr.editingAlignRight()} tooltip={tr.editingAlignRight()}
withoutShortcut
>{@html justifyRightIcon}</CommandIconButton >{@html justifyRightIcon}</CommandIconButton
> >
<CommandIconButton <CommandIconButton
key="justifyFull" key="justifyFull"
tooltip={tr.editingJustify()} tooltip={tr.editingJustify()}
withoutShortcut
--border-right-radius="5px" --border-right-radius="5px"
>{@html justifyFullIcon}</CommandIconButton >{@html justifyFullIcon}</CommandIconButton
> >