Fix reversed float left/right icons

Closes #2713
This commit is contained in:
Damien Elmes 2023-10-13 13:04:29 +10:00
parent a230c754b9
commit fc80793983

View File

@ -3,12 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import { directionKey } from "@tslib/context-keys";
import * as tr from "@tslib/ftl"; import * as tr from "@tslib/ftl";
import { removeStyleProperties } from "@tslib/styling"; import { removeStyleProperties } from "@tslib/styling";
import { getContext } from "svelte";
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import type { Readable } from "svelte/store";
import ButtonGroup from "../../components/ButtonGroup.svelte"; import ButtonGroup from "../../components/ButtonGroup.svelte";
import IconButton from "../../components/IconButton.svelte"; import IconButton from "../../components/IconButton.svelte";
@ -18,12 +15,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: floatStyle = getComputedStyle(image).float; $: floatStyle = getComputedStyle(image).float;
const direction = getContext<Readable<"ltr" | "rtl">>(directionKey);
const [inlineStartIcon, inlineEndIcon] =
$direction === "ltr"
? [floatLeftIcon, floatRightIcon]
: [floatRightIcon, floatLeftIcon];
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
</script> </script>
@ -31,20 +22,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<IconButton <IconButton
tooltip={tr.editingFloatLeft()} tooltip={tr.editingFloatLeft()}
active={floatStyle === "left"} active={floatStyle === "left"}
flipX={$direction === "rtl"}
on:click={() => { on:click={() => {
image.style.float = "left"; image.style.float = "left";
setTimeout(() => dispatch("update")); setTimeout(() => dispatch("update"));
}} }}
--border-left-radius="5px" --border-left-radius="5px"
> >
{@html inlineStartIcon} {@html floatLeftIcon}
</IconButton> </IconButton>
<IconButton <IconButton
tooltip={tr.editingFloatNone()} tooltip={tr.editingFloatNone()}
active={floatStyle === "none"} active={floatStyle === "none"}
flipX={$direction === "rtl"}
on:click={() => { on:click={() => {
// We shortly set to none, because simply unsetting float will not // We shortly set to none, because simply unsetting float will not
// trigger floatStyle being reset // trigger floatStyle being reset
@ -59,13 +48,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<IconButton <IconButton
tooltip={tr.editingFloatRight()} tooltip={tr.editingFloatRight()}
active={floatStyle === "right"} active={floatStyle === "right"}
flipX={$direction === "rtl"}
on:click={() => { on:click={() => {
image.style.float = "right"; image.style.float = "right";
setTimeout(() => dispatch("update")); setTimeout(() => dispatch("update"));
}} }}
--border-right-radius="5px" --border-right-radius="5px"
> >
{@html inlineEndIcon} {@html floatRightIcon}
</IconButton> </IconButton>
</ButtonGroup> </ButtonGroup>