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