From 773f431bb8bb6469b3119cec034354a796c1cc61 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 23:58:48 +0200
Subject: [PATCH] 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
---
 ts/editor-toolbar/ButtonBar.svelte     |  2 +-
 ts/editor-toolbar/ButtonItem.svelte    |  3 ++-
 ts/editor-toolbar/EditorToolbar.svelte | 21 ++++-----------------
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
index 0a7610475..50e1d9601 100644
--- a/ts/editor-toolbar/ButtonBar.svelte
+++ b/ts/editor-toolbar/ButtonBar.svelte
@@ -1,7 +1,7 @@
 <style lang="scss">
     ul {
         padding-inline-start: 0;
-        margin-bottom: 2px;
+        margin-bottom: 0;
     }
 </style>
 
diff --git a/ts/editor-toolbar/ButtonItem.svelte b/ts/editor-toolbar/ButtonItem.svelte
index e3894af49..82eeda646 100644
--- a/ts/editor-toolbar/ButtonItem.svelte
+++ b/ts/editor-toolbar/ButtonItem.svelte
@@ -1,6 +1,7 @@
 <style lang="scss">
     li {
-        display: inline;
+        display: inline-block;
+        margin-bottom: 2px;
     }
 </style>
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 92b927617..2d4d2f758 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -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}