From 9563da37d3b22ffa659ffe94b69b51e204bcb5ab Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 29 Mar 2021 21:48:31 +0200
Subject: [PATCH] Add ButtonGroup for grouping of toolbar items

---
 ts/editor-toolbar/ButtonBar.svelte     |  2 +-
 ts/editor-toolbar/ButtonGroup.svelte   | 33 ++++++++++++++++
 ts/editor-toolbar/EditorToolbar.svelte | 52 ++++++++++++++++----------
 3 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 ts/editor-toolbar/ButtonGroup.svelte

diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
index 8dc94e964..0a7610475 100644
--- a/ts/editor-toolbar/ButtonBar.svelte
+++ b/ts/editor-toolbar/ButtonBar.svelte
@@ -1,6 +1,6 @@
 <style lang="scss">
     ul {
-        padding-left: 0;
+        padding-inline-start: 0;
         margin-bottom: 2px;
     }
 </style>
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
new file mode 100644
index 000000000..0d9b7f9a2
--- /dev/null
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -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>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 7de984a03..92b927617 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -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>