From 358794c911dc14deb71a0fd313cf903ca104a172 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 27 May 2021 17:13:36 +0200
Subject: [PATCH 1/2] Uniformly use variables to Button{Toolbar,Group} for
 setting button properties

Instead of using WithTheming around ButtonToolbar/ButtonGroup
---
 ts/components/ButtonDropdown.svelte  | 21 +++++------
 ts/components/ButtonGroup.svelte     | 18 ++++++++-
 ts/components/ButtonGroupItem.svelte |  2 +-
 ts/components/ButtonToolbar.svelte   | 23 ++++++++++--
 ts/components/ColorPicker.svelte     |  4 +-
 ts/components/DropdownItem.svelte    |  2 +-
 ts/components/IconButton.svelte      |  4 +-
 ts/components/LabelButton.svelte     |  4 +-
 ts/components/SelectButton.svelte    |  2 +-
 ts/components/WithLabel.svelte       |  2 +-
 ts/deckoptions/ConfigSelector.svelte | 55 +++++++++++++---------------
 ts/editor/EditorToolbar.svelte       | 49 +++++++++++--------------
 ts/editor/legacy.scss                | 14 +++----
 ts/sass/button_mixins.scss           |  2 +-
 14 files changed, 110 insertions(+), 92 deletions(-)

diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte
index 622ac521d..4e95fe673 100644
--- a/ts/components/ButtonDropdown.svelte
+++ b/ts/components/ButtonDropdown.svelte
@@ -6,7 +6,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext } from "svelte";
     import { dropdownKey } from "./contextKeys";
 
-    import WithTheming from "./WithTheming.svelte";
     import ButtonToolbar from "./ButtonToolbar.svelte";
 
     export let id: string;
@@ -18,22 +17,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     setContext(dropdownKey, null);
 </script>
 
-<WithTheming style="--toolbar-wrap: nowrap; ">
-    <ButtonToolbar
-        {id}
-        class={`dropdown-menu btn-dropdown-menu ${className}`}
-        nowrap={true}
-        {api}
-    >
-        <slot />
-    </ButtonToolbar>
-</WithTheming>
+<ButtonToolbar
+    {id}
+    class={`dropdown-menu btn-dropdown-menu ${className}`}
+    wrap={false}
+    {api}
+>
+    <slot />
+</ButtonToolbar>
 
 <style lang="scss">
     :global(.dropdown-menu.btn-dropdown-menu) {
         display: none;
         min-width: 0;
-        padding: calc(var(--toolbar-size) / 10) 0;
+        padding: calc(var(--buttons-size) / 10) 0;
 
         background-color: var(--window-bg);
         border-color: var(--medium-border);
diff --git a/ts/components/ButtonGroup.svelte b/ts/components/ButtonGroup.svelte
index 9ce4b3f25..41c03267a 100644
--- a/ts/components/ButtonGroup.svelte
+++ b/ts/components/ButtonGroup.svelte
@@ -18,6 +18,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className: string = "";
     export { className as class };
 
+    export let size: number | undefined = undefined;
+    export let wrap: boolean | undefined = undefined;
+
+    $: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
+    let buttonWrap: string;
+    $: if (wrap === undefined) {
+        buttonWrap = "";
+    } else {
+        buttonWrap = wrap ? `--buttons-wrap: wrap; ` : `--buttons-wrap: nowrap; `;
+    }
+
+    $: style = buttonSize + buttonWrap;
+
     function makeRegistration(): ButtonRegistration {
         const detach = writable(false);
         const position = writable(ButtonPosition.Standalone);
@@ -77,6 +90,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={buttonGroupRef}
     {id}
     class={`btn-group ${className}`}
+    {style}
     dir="ltr"
     role="group"
 >
@@ -90,8 +104,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <style lang="scss">
     div {
-        flex-wrap: var(--toolbar-wrap);
-        padding: calc(var(--toolbar-size) / 10);
+        flex-wrap: var(--buttons-wrap);
+        padding: calc(var(--buttons-size) / 10);
         margin: 0;
     }
 </style>
diff --git a/ts/components/ButtonGroupItem.svelte b/ts/components/ButtonGroupItem.svelte
index 6d4ea0f97..9f0656ea4 100644
--- a/ts/components/ButtonGroupItem.svelte
+++ b/ts/components/ButtonGroupItem.svelte
@@ -20,7 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let position_: ButtonPosition;
     let style: string;
 
-    const radius = "calc(var(--toolbar-size) / 7.5)";
+    const radius = "calc(var(--buttons-size) / 7.5)";
 
     $: {
         switch (position_) {
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index 8b43a1480..f1685cfb0 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -17,7 +17,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className: string = "";
     export { className as class };
 
-    export let nowrap = false;
+    export let size: number | undefined = undefined;
+    export let wrap: boolean | undefined = undefined;
+
+    $: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
+    let buttonWrap: string;
+    $: if (wrap === undefined) {
+        buttonWrap = "";
+    } else {
+        buttonWrap = wrap ? `--buttons-wrap: wrap; ` : `--buttons-wrap: nowrap; `;
+    }
+
+    $: style = buttonSize + buttonWrap;
 
     function makeRegistration(): ButtonGroupRegistration {
         const detach = writable(false);
@@ -64,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div
     bind:this={buttonToolbarRef}
     {id}
-    class={`btn-toolbar ${className}`}
-    class:flex-nowrap={nowrap}
+    class={`btn-toolbar wrap-variable ${className}`}
+    {style}
     role="toolbar"
 >
     <slot />
@@ -75,3 +86,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </ButtonToolbarItem>
     {/each}
 </div>
+
+<style lang="scss">
+    .wrap-variable {
+        flex-wrap: var(--buttons-wrap);
+    }
+</style>
diff --git a/ts/components/ColorPicker.svelte b/ts/components/ColorPicker.svelte
index d29c88fe0..3fe35acde 100644
--- a/ts/components/ColorPicker.svelte
+++ b/ts/components/ColorPicker.svelte
@@ -46,8 +46,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @import "ts/sass/bootstrap/variables";
 
     button {
-        width: calc(var(--toolbar-size) - 0px);
-        height: calc(var(--toolbar-size) - 0px);
+        width: calc(var(--buttons-size) - 0px);
+        height: calc(var(--buttons-size) - 0px);
 
         padding: 4px;
         overflow: hidden;
diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte
index 03b31518c..7ccae8405 100644
--- a/ts/components/DropdownItem.svelte
+++ b/ts/components/DropdownItem.svelte
@@ -40,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         display: flex;
         justify-content: space-between;
 
-        font-size: calc(var(--toolbar-size) / 2.3);
+        font-size: calc(var(--buttons-size) / 2.3);
 
         background: none;
         box-shadow: none;
diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index a63c89ecc..42a7527c9 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -63,8 +63,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         vertical-align: middle;
 
         /* constrain icon */
-        width: calc(var(--toolbar-size) - 2px);
-        height: calc(var(--toolbar-size) - 2px);
+        width: calc(var(--buttons-size) - 2px);
+        height: calc(var(--buttons-size) - 2px);
 
         & > :global(svg),
         & > :global(img) {
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index 74c1c78ee..d0a3b5df1 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -56,9 +56,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @use "ts/sass/button_mixins" as button;
 
     button {
-        padding: 0 calc(var(--toolbar-size) / 3);
+        padding: 0 calc(var(--buttons-size) / 3);
         width: auto;
-        height: var(--toolbar-size);
+        height: var(--buttons-size);
 
         @include button.btn-border-radius;
     }
diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index 35f33f058..79b6ab3dc 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -45,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @use "ts/sass/button_mixins" as button;
 
     select {
-        height: var(--toolbar-size);
+        height: var(--buttons-size);
     }
 
     @include button.btn-day($with-hover: false);
diff --git a/ts/components/WithLabel.svelte b/ts/components/WithLabel.svelte
index ac1218942..97f9a1e11 100644
--- a/ts/components/WithLabel.svelte
+++ b/ts/components/WithLabel.svelte
@@ -22,6 +22,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     label {
         display: flex;
-        padding: 0 calc(var(--toolbar-size) / 10);
+        padding: 0 calc(var(--buttons-size) / 10);
     }
 </style>
diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deckoptions/ConfigSelector.svelte
index 6a81b47e9..524717d49 100644
--- a/ts/deckoptions/ConfigSelector.svelte
+++ b/ts/deckoptions/ConfigSelector.svelte
@@ -11,7 +11,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import TextInputModal from "./TextInputModal.svelte";
     import StickyBar from "components/StickyBar.svelte";
-    import WithTheming from "components/WithTheming.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
     import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
@@ -89,33 +88,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <StickyBar>
-    <WithTheming style="--toolbar-size: 2.3rem; --toolbar-wrap: nowrap">
-        <ButtonToolbar class="justify-content-between">
-            <ButtonToolbarItem>
-                <ButtonGroup class="flex-grow-1">
-                    <ButtonGroupItem>
-                        <SelectButton class="flex-grow-1" on:change={blur}>
-                            {#each $configList as entry}
-                                <SelectOption
-                                    value={String(entry.idx)}
-                                    selected={entry.current}
-                                >
-                                    {configLabel(entry)}
-                                </SelectOption>
-                            {/each}
-                        </SelectButton>
-                    </ButtonGroupItem>
-                </ButtonGroup>
-            </ButtonToolbarItem>
+    <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
+        <ButtonToolbarItem>
+            <ButtonGroup class="flex-grow-1">
+                <ButtonGroupItem>
+                    <SelectButton class="flex-grow-1" on:change={blur}>
+                        {#each $configList as entry}
+                            <SelectOption
+                                value={String(entry.idx)}
+                                selected={entry.current}
+                            >
+                                {configLabel(entry)}
+                            </SelectOption>
+                        {/each}
+                    </SelectButton>
+                </ButtonGroupItem>
+            </ButtonGroup>
+        </ButtonToolbarItem>
 
-            <ButtonToolbarItem>
-                <SaveButton
-                    {state}
-                    on:add={promptToAdd}
-                    on:clone={promptToClone}
-                    on:rename={promptToRename}
-                />
-            </ButtonToolbarItem>
-        </ButtonToolbar>
-    </WithTheming>
+        <ButtonToolbarItem>
+            <SaveButton
+                {state}
+                on:add={promptToAdd}
+                on:clone={promptToClone}
+                on:rename={promptToRename}
+            />
+        </ButtonToolbarItem>
+    </ButtonToolbar>
 </StickyBar>
diff --git a/ts/editor/EditorToolbar.svelte b/ts/editor/EditorToolbar.svelte
index 577948c86..51c926188 100644
--- a/ts/editor/EditorToolbar.svelte
+++ b/ts/editor/EditorToolbar.svelte
@@ -30,7 +30,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="typescript">
-    import WithTheming from "components/WithTheming.svelte";
     import StickyBar from "components/StickyBar.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
     import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
@@ -48,36 +47,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export const colorButtons = {};
     export const templateButtons = {};
 
-    export let size: number = 2;
-    export let wraps: boolean = true;
-
-    $: style = `--toolbar-size: ${size}rem; --toolbar-wrap: ${
-        wraps ? "wrap" : "nowrap"
-    }`;
+    export let size = 2;
+    export let wrap = true;
 </script>
 
-<WithTheming {style}>
-    <StickyBar>
-        <ButtonToolbar api={toolbar}>
-            <ButtonToolbarItem id="notetype">
-                <NoteTypeButtons api={notetypeButtons} />
-            </ButtonToolbarItem>
+<StickyBar>
+    <ButtonToolbar {size} {wrap} api={toolbar}>
+        <ButtonToolbarItem id="notetype">
+            <NoteTypeButtons api={notetypeButtons} />
+        </ButtonToolbarItem>
 
-            <ButtonToolbarItem id="inlineFormatting">
-                <FormatInlineButtons api={formatInlineButtons} />
-            </ButtonToolbarItem>
+        <ButtonToolbarItem id="inlineFormatting">
+            <FormatInlineButtons api={formatInlineButtons} />
+        </ButtonToolbarItem>
 
-            <ButtonToolbarItem id="blockFormatting">
-                <FormatBlockButtons api={formatBlockButtons} />
-            </ButtonToolbarItem>
+        <ButtonToolbarItem id="blockFormatting">
+            <FormatBlockButtons api={formatBlockButtons} />
+        </ButtonToolbarItem>
 
-            <ButtonToolbarItem id="color">
-                <ColorButtons api={colorButtons} />
-            </ButtonToolbarItem>
+        <ButtonToolbarItem id="color">
+            <ColorButtons api={colorButtons} />
+        </ButtonToolbarItem>
 
-            <ButtonToolbarItem id="template">
-                <TemplateButtons api={templateButtons} />
-            </ButtonToolbarItem>
-        </ButtonToolbar>
-    </StickyBar>
-</WithTheming>
+        <ButtonToolbarItem id="template">
+            <TemplateButtons api={templateButtons} />
+        </ButtonToolbarItem>
+    </ButtonToolbar>
+</StickyBar>
diff --git a/ts/editor/legacy.scss b/ts/editor/legacy.scss
index d7bbca787..a8c7bac9d 100644
--- a/ts/editor/legacy.scss
+++ b/ts/editor/legacy.scss
@@ -1,7 +1,7 @@
 .linkb {
     display: inline-block;
-    min-width: calc(var(--toolbar-size) - 2px);
-    min-height: calc(var(--toolbar-size) - 2px);
+    min-width: calc(var(--buttons-size) - 2px);
+    min-height: calc(var(--buttons-size) - 2px);
 
     background-color: white;
     border: 1px solid var(--medium-border);
@@ -22,7 +22,7 @@
     &:active,
     &:active:hover {
         background-color: white;
-        box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
+        box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
             rgba(0, 0, 0, 0.25);
     }
 
@@ -36,8 +36,8 @@
 
         &:active,
         &:active:hover {
-            box-shadow: inset 0 calc(var(--toolbar-size) / 15)
-                calc(var(--toolbar-size) / 5) rgba(0, 0, 0, 0.35);
+            box-shadow: inset 0 calc(var(--buttons-size) / 15)
+                calc(var(--buttons-size) / 5) rgba(0, 0, 0, 0.35);
             border-color: #525252;
         }
     }
@@ -46,8 +46,8 @@
 .topbut {
     display: inline-block;
     vertical-align: middle;
-    width: calc(var(--toolbar-size) - 12px);
-    height: calc(var(--toolbar-size) - 12px);
+    width: calc(var(--buttons-size) - 12px);
+    height: calc(var(--buttons-size) - 12px);
 }
 
 .nightMode img.topbut {
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index a4c62c956..5313b140b 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -113,7 +113,7 @@ $btn-base-color-night: #666;
 $focus-color: $blue;
 
 @mixin impressed-shadow($intensity) {
-    box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
+    box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
         rgba(black, $intensity);
 }
 

From 91b16a67d6d460a575d63110fec43f36e715ccfa Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 28 May 2021 21:33:34 +0200
Subject: [PATCH 2/2] Add overflow-x: hidden for SelectButton

---
 ts/components/SelectButton.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index 79b6ab3dc..adfb198e8 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -46,6 +46,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     select {
         height: var(--buttons-size);
+        /* Long option name can create overflow */
+        overflow-x: hidden;
     }
 
     @include button.btn-day($with-hover: false);