Wrap Mathjax buttons into toolbar

This commit is contained in:
Henrik Giesel 2021-08-07 20:48:02 +02:00
parent f76cf24e9d
commit 6856850a0f
2 changed files with 28 additions and 14 deletions

View file

@ -3,8 +3,10 @@ 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 { tick } from "svelte";
import WithDropdown from "components/WithDropdown.svelte"; import WithDropdown from "components/WithDropdown.svelte";
import ButtonDropdown from "components/ButtonDropdown.svelte"; import ButtonToolbar from "components/ButtonToolbar.svelte";
import DropdownMenu from "components/DropdownMenu.svelte"; import DropdownMenu from "components/DropdownMenu.svelte";
import Item from "components/Item.svelte"; import Item from "components/Item.svelte";
@ -67,16 +69,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
setTimeout(dropdownObject.update); setTimeout(dropdownObject.update);
}} }}
/> />
<div <div class="margin-x">
on:click={() => { <ButtonToolbar>
updateSelection(); <Item>
dropdownObject.update(); <MathjaxHandleInlineBlock
}} {activeImage}
> {isRtl}
<Item> on:click={async () => {
<MathjaxHandleInlineBlock {activeImage} {isRtl} /> await tick();
</Item> updateSelection();
</div> dropdownObject.update();
</DropdownMenu> }}
/>
</Item>
</ButtonToolbar>
<div />
</div></DropdownMenu
>
{/if} {/if}
</WithDropdown> </WithDropdown>
<style lang="scss">
.margin-x {
margin: 0 0.125rem;
}
</style>

View file

@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tooltip={tr.editingMathjaxInline()} tooltip={tr.editingMathjaxInline()}
active={activeImage.getAttribute("block") === "true"} active={activeImage.getAttribute("block") === "true"}
on:click={() => mathjaxElement.setAttribute("block", "false")} on:click={() => mathjaxElement.setAttribute("block", "false")}
>{@html inlineIcon}</IconButton on:click>{@html inlineIcon}</IconButton
> >
</ButtonGroupItem> </ButtonGroupItem>
@ -32,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tooltip={tr.editingMathjaxBlock()} tooltip={tr.editingMathjaxBlock()}
active={activeImage.getAttribute("block") === "false"} active={activeImage.getAttribute("block") === "false"}
on:click={() => mathjaxElement.setAttribute("block", "true")} on:click={() => mathjaxElement.setAttribute("block", "true")}
>{@html blockIcon}</IconButton on:click>{@html blockIcon}</IconButton
> >
</ButtonGroupItem> </ButtonGroupItem>
</ButtonGroup> </ButtonGroup>