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"> <style lang="scss">
ul { ul {
padding-left: 0; padding-inline-start: 0;
margin-bottom: 2px; margin-bottom: 2px;
} }
</style> </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"> <script lang="typescript">
import ButtonBarOuter from "./ButtonBarOuter.svelte"; import ButtonBarOuter from "./ButtonBarOuter.svelte";
import ButtonBar from "./ButtonBar.svelte"; import ButtonBar from "./ButtonBar.svelte";
import ButtonGroup from "./ButtonGroup.svelte";
import LabelButton from "./LabelButton.svelte"; import LabelButton from "./LabelButton.svelte";
import IconButton from "./IconButton.svelte"; import IconButton from "./IconButton.svelte";
@ -22,25 +23,28 @@
import { forecolorButton, colorpickerButton } from "./color"; import { forecolorButton, colorpickerButton } from "./color";
export let leftButtons = [ export let leftButtons = [
{ component: LabelButton, label: "Fields..." }, [
{ component: LabelButton, label: "Cards..." }, { component: LabelButton, label: "Fields..." },
{ component: LabelButton, label: "Cards..." },
],
]; ];
export let rightButtons = [ export let rightButtons = [
boldButton, [
italicButton, boldButton,
underlineButton, italicButton,
superscriptButton, underlineButton,
subscriptButton, superscriptButton,
eraserButton, subscriptButton,
eraserButton,
forecolorButton, ],
colorpickerButton, [forecolorButton, colorpickerButton],
[
{ component: IconButton, icon: bracketsIcon }, { component: IconButton, icon: bracketsIcon },
{ component: IconButton, icon: paperclipIcon }, { component: IconButton, icon: paperclipIcon },
{ component: IconButton, icon: micIcon }, { component: IconButton, icon: micIcon },
{ component: IconButton, icon: threeDotsIcon }, { component: IconButton, icon: threeDotsIcon },
],
]; ];
export let nightMode: boolean; export let nightMode: boolean;
@ -49,14 +53,22 @@
<ButtonBarOuter> <ButtonBarOuter>
<ButtonBar> <ButtonBar>
{#each leftButtons as leftButton} {#each leftButtons as leftGroup}
<svelte:component this={leftButton.component} {...leftButton} /> <ButtonGroup>
{#each leftGroup as leftButton}
<svelte:component this={leftButton.component} {...leftButton} />
{/each}
</ButtonGroup>
{/each} {/each}
</ButtonBar> </ButtonBar>
<ButtonBar> <ButtonBar>
{#each rightButtons as rightButton} {#each rightButtons as rightGroup}
<svelte:component this={rightButton.component} {...rightButton} /> <ButtonGroup>
{#each rightGroup as rightButton}
<svelte:component this={rightButton.component} {...rightButton} />
{/each}
</ButtonGroup>
{/each} {/each}
</ButtonBar> </ButtonBar>
</ButtonBarOuter> </ButtonBarOuter>