From 59876439e7641d2f0aff282c76109823188df52a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 27 Apr 2021 22:35:25 +0200
Subject: [PATCH] Add StickyBar.svelte WithTheming.svelte

---
 ts/editor-toolbar/ButtonGroup.svelte          |  9 ++++--
 ...upButton.svelte => ButtonGroupItem.svelte} |  0
 ts/editor-toolbar/EditorToolbar.svelte        | 31 +++++--------------
 ts/editor-toolbar/IconButton.svelte           | 22 ++++---------
 ts/editor-toolbar/LabelButton.svelte          |  6 ++--
 ts/editor-toolbar/NoteTypeButtons.svelte      |  4 +--
 ts/editor-toolbar/StickyBar.svelte            | 26 ++++++++++++++++
 ts/editor-toolbar/WithTheming.svelte          | 17 ++++++++++
 ts/editor/toolbar.ts                          |  4 ++-
 9 files changed, 71 insertions(+), 48 deletions(-)
 rename ts/editor-toolbar/{ButtonGroupButton.svelte => ButtonGroupItem.svelte} (100%)
 create mode 100644 ts/editor-toolbar/StickyBar.svelte
 create mode 100644 ts/editor-toolbar/WithTheming.svelte

diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 053dca2fa..bad832a90 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -25,9 +25,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return { order: index };
     }
 
-    setContext(buttonGroupKey, Object.assign(api, {
-        registerButton,
-    }))
+    setContext(
+        buttonGroupKey,
+        Object.assign(api, {
+            registerButton,
+        })
+    );
 </script>
 
 <style lang="scss">
diff --git a/ts/editor-toolbar/ButtonGroupButton.svelte b/ts/editor-toolbar/ButtonGroupItem.svelte
similarity index 100%
rename from ts/editor-toolbar/ButtonGroupButton.svelte
rename to ts/editor-toolbar/ButtonGroupItem.svelte
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 4dd74b557..dfd4a6cc2 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -18,18 +18,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="typescript">
-    import type { Identifier } from "./identifiable";
-    import type { ToolbarItem, IterableToolbarItem } from "./types";
-
-    import { setContext, onMount } from "svelte";
+    import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
-    import { add, insert, updateRecursive } from "./identifiable";
-    import { showComponent, hideComponent, toggleComponent } from "./hideable";
 
+    import WithTheming from "./WithTheming.svelte";
+    import StickyBar from "./StickyBar.svelte";
     import NoteTypeButtons from "./NoteTypeButtons.svelte";
 
-    let api = {};
-
     export let nightMode: boolean;
 
     setContext(nightModeKey, nightMode);
@@ -43,18 +38,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }`;
 </script>
 
-<style lang="scss">
-    nav {
-        position: sticky;
-        top: 0;
-        left: 0;
-        z-index: 10;
-
-        background-color: var(--window-bg);
-        border-bottom: 1px solid var(--border);
-    }
-</style>
-
-<nav {style} class="pb-1">
-    <NoteTypeButtons />
-</nav>
+<WithTheming {style}>
+    <StickyBar>
+        <NoteTypeButtons />
+    </StickyBar>
+</WithTheming>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index fd33f69fe..5db161f44 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -3,28 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import SquareButton from "./SquareButton.svelte";
 
     export let id: string;
-    export let className = "";
+    let className = "";
+    export { className as class };
+
     export let tooltip: string | undefined;
-    export let shortcutLabel: string | undefined;
-    export let icon: string;
-
-    export let onClick: (event: MouseEvent) => void;
-
     export let disables = true;
     export let dropdownToggle = false;
 </script>
 
-<SquareButton
-    {id}
-    {className}
-    {tooltip}
-    {shortcutLabel}
-    {onClick}
-    {disables}
-    {dropdownToggle}
-    on:mount>
-    {@html icon}
+<SquareButton {id} {className} {tooltip} {disables} {dropdownToggle} on:click on:mount>
+    <slot />
 </SquareButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index fc031e733..a999d4b61 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import ButtonGroupButton from "./ButtonGroupButton.svelte";
+    import ButtonGroupItem from "./ButtonGroupItem.svelte";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
@@ -51,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @include button.btn-night;
 </style>
 
-<ButtonGroupButton let:order={order}>
+<ButtonGroupItem let:order>
     <button
         bind:this={buttonRef}
         {id}
@@ -68,4 +68,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:mousedown|preventDefault>
         <slot />
     </button>
-</ButtonGroupButton>
+</ButtonGroupItem>
diff --git a/ts/editor-toolbar/NoteTypeButtons.svelte b/ts/editor-toolbar/NoteTypeButtons.svelte
index a50095dc5..d2653d01b 100644
--- a/ts/editor-toolbar/NoteTypeButtons.svelte
+++ b/ts/editor-toolbar/NoteTypeButtons.svelte
@@ -17,7 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <LabelButton
         disables={false}
         tooltip={tr.editingCustomizeFields()}
-        on:click={() => bridgeCommand("fields")}>
+        on:click={() => bridgeCommand('fields')}>
         {tr.editingFields()}...
     </LabelButton>
 
@@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <LabelButton
             disables={false}
             tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
-            on:click={() => bridgeCommand("cards")}
+            on:click={() => bridgeCommand('cards')}
             on:mount={createShortcut}>
             {tr.editingCards()}...
         </LabelButton>
diff --git a/ts/editor-toolbar/StickyBar.svelte b/ts/editor-toolbar/StickyBar.svelte
new file mode 100644
index 000000000..1e37c5547
--- /dev/null
+++ b/ts/editor-toolbar/StickyBar.svelte
@@ -0,0 +1,26 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    export let id: string | undefined;
+    let className: string | undefined;
+    export { className as class };
+</script>
+
+<style lang="scss">
+    nav {
+        position: sticky;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+
+        background: var(--window-bg);
+        border-bottom: 1px solid var(--border);
+    }
+</style>
+
+<nav {id} class="pb-1 {className}">
+    <slot />
+</nav>
diff --git a/ts/editor-toolbar/WithTheming.svelte b/ts/editor-toolbar/WithTheming.svelte
new file mode 100644
index 000000000..2beae19aa
--- /dev/null
+++ b/ts/editor-toolbar/WithTheming.svelte
@@ -0,0 +1,17 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    export let style: string;
+</script>
+
+<style lang="scss">
+    div {
+        display: contents;
+    }
+</style>
+
+<div {style}>
+    <slot />
+</div>
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index 86bf8dfd0..d27051317 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -27,7 +27,9 @@ export function initToolbar(i18n: Promise<void>) {
                 // getTemplateGroup(),
             ];
 
-            const menus = [/*...getFormatBlockMenus(), ...getTemplateMenus()*/];
+            const menus = [
+                /*...getFormatBlockMenus(), ...getTemplateMenus()*/
+            ];
 
             toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
         });