GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 14:02:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Fix visual behavior of modal buttons in editor (#3009)

Browse source 
* Fix behavior of justification buttons

* Make list buttons update each other when clicked
This commit is contained in:
Lucas Scharenbroch 2024-02-14 04:35:37 -06:00 committed by GitHub
parent 2b4cb2992b
commit b80057440e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ts/editor/editor-toolbar/BlockButtons.svelte
View file

@ -77,6 +77,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
const rtl = window.getComputedStyle(document.body).direction === "rtl";
const justificationKeys = [
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull",
];
const listKeys = ["insertUnorderedList", "insertOrderedList"];
</script>
<ButtonGroup>
@ -92,6 +101,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
key="insertUnorderedList"
tooltip={tr.editingUnorderedList()}
shortcut="Control+,"
modeVariantKeys={listKeys}
>
{@html ulIcon}
</CommandIconButton>
@ -102,6 +112,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
key="insertOrderedList"
tooltip={tr.editingOrderedList()}
shortcut="Control+."
modeVariantKeys={listKeys}
>
{@html olIcon}
</CommandIconButton>
@ -138,6 +149,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<CommandIconButton
key="justifyLeft"
tooltip={tr.editingAlignLeft()}
modeVariantKeys={justificationKeys}
>
{@html justifyLeftIcon}
</CommandIconButton>
@ -147,6 +159,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<CommandIconButton
key="justifyCenter"
tooltip={tr.editingCenter()}
modeVariantKeys={justificationKeys}
>
{@html justifyCenterIcon}
</CommandIconButton>
@ -156,6 +169,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<CommandIconButton
key="justifyRight"
tooltip={tr.editingAlignRight()}
modeVariantKeys={justificationKeys}
>
{@html justifyRightIcon}
</CommandIconButton>
@ -165,6 +179,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<CommandIconButton
key="justifyFull"
tooltip={tr.editingJustify()}
modeVariantKeys={justificationKeys}
>
{@html justifyFullIcon}
</CommandIconButton>

13
ts/editor/editor-toolbar/CommandIconButton.svelte
View file

@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import IconButton from "../../components/IconButton.svelte";
import Shortcut from "../../components/Shortcut.svelte";
import WithState from "../../components/WithState.svelte";
import { updateStateByKey } from "../../components/WithState.svelte";
import { execCommand, queryCommandState } from "../../domlib";
import { context as noteEditorContext } from "../NoteEditor.svelte";
import { editingInputIsRichText } from "../rich-text-input";
@ -15,6 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let key: string;
export let tooltip: string;
export let shortcut: string | null = null;
export let modeVariantKeys: string[] = [key];
$: theTooltip = shortcut ? `${tooltip} (${getPlatformString(shortcut)})` : tooltip;
@ -38,19 +40,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<Shortcut keyCombination={shortcut} on:action={action} />
{/if}
{:else}
<WithState
{key}
update={async () => queryCommandState(key)}
let:state={active}
let:updateState
>
<WithState {key} update={async () => queryCommandState(key)} let:state={active}>
<IconButton
tooltip={theTooltip}
{active}
{disabled}
on:click={(event) => {
action();
updateState(event);
modeVariantKeys.map((key) => updateStateByKey(key, event));
}}
>
<slot />
@ -61,7 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
keyCombination={shortcut}
on:action={(event) => {
action();
updateState(event);
modeVariantKeys.map((key) => updateStateByKey(key, event));
}}
/>
{/if}