From e9430fde3b166980f20f06b55f11eb0ec2543c6e Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Wed, 23 Nov 2022 07:18:29 +0100
Subject: [PATCH] Give OptionsButton its own ButtonGroup and move it to more
 prominent position (#2207)

and give it some padding
---
 ts/components/IconButton.svelte               |  2 +-
 ts/editor/editor-toolbar/EditorToolbar.svelte | 11 +++----
 ts/editor/editor-toolbar/OptionsButton.svelte |  1 +
 .../editor-toolbar/OptionsButtons.svelte      | 30 +++++++++++++++++++
 4 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 ts/editor/editor-toolbar/OptionsButtons.svelte

diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index 8be4ee757..deafe53ef 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -46,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
         @include button.border-radius;
 
-        padding: 0;
+        padding: 0 var(--padding-inline, 0);
         font-size: var(--base-font-size);
         height: var(--buttons-size);
         min-width: calc(var(--buttons-size) * 0.75);
diff --git a/ts/editor/editor-toolbar/EditorToolbar.svelte b/ts/editor/editor-toolbar/EditorToolbar.svelte
index b00c78dfc..00b0c01ae 100644
--- a/ts/editor/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor/editor-toolbar/EditorToolbar.svelte
@@ -57,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import BlockButtons from "./BlockButtons.svelte";
     import InlineButtons from "./InlineButtons.svelte";
     import NotetypeButtons from "./NotetypeButtons.svelte";
-    import OptionsButton from "./OptionsButton.svelte";
+    import OptionsButtons from "./OptionsButtons.svelte";
     import RichTextClozeButtons from "./RichTextClozeButtons.svelte";
     import TemplateButtons from "./TemplateButtons.svelte";
 
@@ -66,6 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const toolbar = {} as DefaultSlotInterface;
     const notetypeButtons = {} as DefaultSlotInterface;
+    const optionsButtons = {} as DefaultSlotInterface;
     const inlineButtons = {} as DefaultSlotInterface;
     const blockButtons = {} as DefaultSlotInterface;
     const templateButtons = {} as DefaultSlotInterface;
@@ -100,6 +101,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </NotetypeButtons>
             </Item>
 
+            <Item id="settings">
+                <OptionsButtons api={optionsButtons} />
+            </Item>
+
             <Item id="inlineFormatting">
                 <InlineButtons api={inlineButtons} />
             </Item>
@@ -115,10 +120,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <Item id="cloze">
                 <RichTextClozeButtons />
             </Item>
-
-            <Item id="options">
-                <OptionsButton />
-            </Item>
         </DynamicallySlottable>
     </ButtonToolbar>
 </div>
diff --git a/ts/editor/editor-toolbar/OptionsButton.svelte b/ts/editor/editor-toolbar/OptionsButton.svelte
index 089a8029e..a0be426a9 100644
--- a/ts/editor/editor-toolbar/OptionsButton.svelte
+++ b/ts/editor/editor-toolbar/OptionsButton.svelte
@@ -41,6 +41,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tooltip={tr.actionsOptions()}
         --border-left-radius="5px"
         --border-right-radius="5px"
+        --padding-inline="8px"
         on:click={() => (showFloating = !showFloating)}
     >
         {@html cogIcon}
diff --git a/ts/editor/editor-toolbar/OptionsButtons.svelte b/ts/editor/editor-toolbar/OptionsButtons.svelte
new file mode 100644
index 000000000..c6adbc374
--- /dev/null
+++ b/ts/editor/editor-toolbar/OptionsButtons.svelte
@@ -0,0 +1,30 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import ButtonGroup from "../../components/ButtonGroup.svelte";
+    import ButtonGroupItem, {
+        createProps,
+        setSlotHostContext,
+        updatePropsList,
+    } from "../../components/ButtonGroupItem.svelte";
+    import DynamicallySlottable from "../../components/DynamicallySlottable.svelte";
+    import OptionsButton from "./OptionsButton.svelte";
+
+    export let api = {};
+</script>
+
+<ButtonGroup>
+    <DynamicallySlottable
+        slotHost={ButtonGroupItem}
+        {createProps}
+        {updatePropsList}
+        {setSlotHostContext}
+        {api}
+    >
+        <ButtonGroupItem id="options">
+            <OptionsButton />
+        </ButtonGroupItem>
+    </DynamicallySlottable>
+</ButtonGroup>