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

Add ButtonGroup for grouping of toolbar items

Browse source
This commit is contained in:
Henrik Giesel 2021-03-29 21:48:31 +02:00
parent ccb7c5d68a
commit 9563da37d3
3 changed files with 66 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/editor-toolbar/ButtonBar.svelte
View file

@ -1,6 +1,6 @@
<style lang="scss">
ul {
padding-left: 0;
padding-inline-start: 0;
margin-bottom: 2px;
}
</style>

33
ts/editor-toolbar/ButtonGroup.svelte Normal file
View file

@ -0,0 +1,33 @@
<script lang="typescript">
import ButtonItem from "./ButtonItem.svelte";
</script>
<style lang="scss">
ul {
padding-inline-start: 0;
margin-left: 0.25rem;
margin-right: 0.25rem;
& :global(button) {
margin-left: -1px;
}
& > :global(li:nth-child(1) button) {
margin-left: 0px;
border-top-left-radius: 0.35rem;
border-bottom-left-radius: 0.35rem;
}
& > :global(li:nth-last-child(1) button) {
border-top-right-radius: 0.35rem;
border-bottom-right-radius: 0.35rem;
}
}
</style>
<ButtonItem>
<ul>
<slot />
</ul>
</ButtonItem>

52
ts/editor-toolbar/EditorToolbar.svelte
View file

@ -1,6 +1,7 @@
<script lang="typescript">
import ButtonBarOuter from "./ButtonBarOuter.svelte";
import ButtonBar from "./ButtonBar.svelte";
import ButtonGroup from "./ButtonGroup.svelte";
import LabelButton from "./LabelButton.svelte";
import IconButton from "./IconButton.svelte";
@ -22,25 +23,28 @@
import { forecolorButton, colorpickerButton } from "./color";
export let leftButtons = [
{ component: LabelButton, label: "Fields..." },
{ component: LabelButton, label: "Cards..." },
[
{ component: LabelButton, label: "Fields..." },
{ component: LabelButton, label: "Cards..." },
],
];
export let rightButtons = [
boldButton,
italicButton,
underlineButton,
superscriptButton,
subscriptButton,
eraserButton,
forecolorButton,
colorpickerButton,
{ component: IconButton, icon: bracketsIcon },
{ component: IconButton, icon: paperclipIcon },
{ component: IconButton, icon: micIcon },
{ component: IconButton, icon: threeDotsIcon },
[
boldButton,
italicButton,
underlineButton,
superscriptButton,
subscriptButton,
eraserButton,
],
[forecolorButton, colorpickerButton],
[
{ component: IconButton, icon: bracketsIcon },
{ component: IconButton, icon: paperclipIcon },
{ component: IconButton, icon: micIcon },
{ component: IconButton, icon: threeDotsIcon },
],
];
export let nightMode: boolean;
@ -49,14 +53,22 @@
<ButtonBarOuter>
<ButtonBar>
{#each leftButtons as leftButton}
<svelte:component this={leftButton.component} {...leftButton} />
{#each leftButtons as leftGroup}
<ButtonGroup>
{#each leftGroup as leftButton}
<svelte:component this={leftButton.component} {...leftButton} />
{/each}
</ButtonGroup>
{/each}
</ButtonBar>
<ButtonBar>
{#each rightButtons as rightButton}
<svelte:component this={rightButton.component} {...rightButton} />
{#each rightButtons as rightGroup}
<ButtonGroup>
{#each rightGroup as rightButton}
<svelte:component this={rightButton.component} {...rightButton} />
{/each}
</ButtonGroup>
{/each}
</ButtonBar>
</ButtonBarOuter>