Merge buttons to one OuterButtonGroup

- keeping up the concept of left / right buttons might not be necessary anymore
- This might make it easier to display them on mobile, and simplifies the logic
This commit is contained in:
Henrik Giesel 2021-03-29 23:58:48 +02:00
parent 8c931af17c
commit 773f431bb8
3 changed files with 7 additions and 19 deletions

View file

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

View file

@ -1,6 +1,7 @@
<style lang="scss">
li {
display: inline;
display: inline-block;
margin-bottom: 2px;
}
</style>

View file

@ -22,14 +22,11 @@
} from "./format";
import { forecolorButton, colorpickerButton } from "./color";
export let leftButtons = [
export let buttons = [
[
{ component: LabelButton, label: "Fields..." },
{ component: LabelButton, label: "Cards..." },
],
];
export let rightButtons = [
[
boldButton,
italicButton,
@ -53,20 +50,10 @@
<ButtonBarOuter>
<ButtonBar>
{#each leftButtons as leftGroup}
{#each buttons as group}
<ButtonGroup>
{#each leftGroup as leftButton}
<svelte:component this={leftButton.component} {...leftButton} />
{/each}
</ButtonGroup>
{/each}
</ButtonBar>
<ButtonBar>
{#each rightButtons as rightGroup}
<ButtonGroup>
{#each rightGroup as rightButton}
<svelte:component this={rightButton.component} {...rightButton} />
{#each group as button}
<svelte:component this={button.component} {...button} />
{/each}
</ButtonGroup>
{/each}