Simplify structure of EditorToolbar and ButtonGroup in editor HTML file

qt/aqt/editor.py

@@ -76,18 +76,9 @@ audio = (
 )
 
 _html = """
-<style>
+<div id="fields"></div>
-:root {
+<div id="dupes" class="is-inactive">
-    --bg-color: %s;
-}
-</style>
-<div>
-    <div id="editorToolbar"></div>
-    <div id="fields">
-    </div>
-    <div id="dupes" class="is-inactive">
     <a href="#" onclick="pycmd('dupes');return false;">%s</a>
-    </div>
 </div>
 """
 
@@ -135,10 +126,9 @@ class Editor:
         self.web.set_bridge_command(self.onBridgeCmd, self)
         self.outerLayout.addWidget(self.web, 1)
 
-        bgcol = self.mw.app.palette().window().color().name()  # type: ignore
         # then load page
         self.web.stdHtml(
-            _html % (bgcol, tr.editing_show_duplicates()),
+            _html % tr.editing_show_duplicates(),
             css=[
                 "css/editor.css",
             ],

ts/editor-toolbar/ButtonDropdown.svelte

@@ -17,13 +17,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <style>
-    :global(ul.btn-dropdown-menu) {
+    :global(.dropdown-menu.btn-dropdown-menu) {
         display: none;
         background-color: var(--window-bg);
         border-color: var(--medium-border);
     }
 
-    :global(ul.btn-dropdown-menu.show) {
+    :global(.dropdown-menu.btn-dropdown-menu.show) {
         display: flex;
     }
 </style>

ts/editor-toolbar/ButtonGroup.svelte

@@ -19,16 +19,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <style lang="scss">
-    ul {
+    div {
         display: flex;
         justify-items: start;
 
         flex-wrap: var(--toolbar-wrap);
-        overflow-y: auto;
 
         padding: calc(var(--toolbar-size) / 10);
         margin: 0;
 
+        > :global(button),
+        > :global(select) {
+            border-radius: calc(var(--toolbar-size) / 7.5);
+
+            &:not(:nth-of-type(1)) {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(:nth-last-of-type(1)) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
         &.border-overlap-group {
             :global(button),
             :global(select) {
@@ -43,43 +57,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             }
         }
     }
-
-    li {
-        display: contents;
-
-        > :global(button),
-        > :global(select) {
-            border-radius: 0;
-        }
-
-        &:nth-child(1) {
-            > :global(button),
-            > :global(select) {
-                border-top-left-radius: calc(var(--toolbar-size) / 7.5);
-                border-bottom-left-radius: calc(var(--toolbar-size) / 7.5);
-            }
-        }
-
-        &:nth-last-child(1) {
-            > :global(button),
-            > :global(select) {
-                border-top-right-radius: calc(var(--toolbar-size) / 7.5);
-                border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
-            }
-        }
-    }
 </style>
 
-<ul
+<div
     {id}
     class={className}
     class:border-overlap-group={!nightMode}
-    class:gap-group={nightMode}>
+    class:gap-group={nightMode}
+    div="ltr">
     {#each items as button}
         {#if !button.hidden}
-            <li>
             <svelte:component this={button.component} {...filterHidden(button)} />
-            </li>
         {/if}
     {/each}
-</ul>
+</div>

ts/editor-toolbar/DropdownMenu.svelte

@@ -4,29 +4,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import type { ToolbarItem } from "./types";
-    import { getContext } from "svelte";
-    import { nightModeKey } from "./contextKeys";
 
     export let id: string;
     export let items: ToolbarItem[];
-
-    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
 <style lang="scss">
-    @use 'ts/sass/button_mixins' as button;
-
     ul {
-        background-color: white;
+        background-color: var(--frame-bg);
         border-color: var(--medium-border);
     }
-
-    .night-mode {
-        background-color: var(--bg-color);
-    }
 </style>
 
-<ul {id} class="dropdown-menu" class:night-mode={nightMode}>
+<ul {id} class="dropdown-menu">
     {#each items as menuItem}
         <li>
             <svelte:component this={menuItem.component} {...menuItem} />

ts/editor-toolbar/EditorToolbar.svelte

@@ -121,17 +121,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         left: 0;
         z-index: 10;
 
-        background: var(--bg-color);
+        background-color: var(--window-bg);
         border-bottom: 1px solid var(--border);
     }
 </style>
 
-<div {style}>
+<nav {style}>
     {#each menus as menu}
         <svelte:component this={menu.component} {...menu} />
     {/each}
-</div>
 
-<nav {style}>
     <ButtonGroup items={buttons} className="p-0 mb-1" />
 </nav>

ts/editor-toolbar/index.ts

@@ -7,13 +7,22 @@ export { default as EditorToolbar } from "./EditorToolbar.svelte";
 
 import "./bootstrap.css";
 
-export function editorToolbar(
+interface EditorToolbarArgs {
-    target: HTMLElement,
+    target: HTMLElement;
-    buttons: IterableToolbarItem[] = [],
+    anchor?: HTMLElement;
-    menus: ToolbarItem[] = []
+    buttons?: IterableToolbarItem[];
-): EditorToolbar {
+    menus?: ToolbarItem[];
+}
+
+export function editorToolbar({
+    target,
+    anchor = undefined,
+    buttons = [],
+    menus = [],
+}: EditorToolbarArgs): EditorToolbar {
     return new EditorToolbar({
         target,
+        anchor,
         props: {
             buttons,
             menus,

ts/editor/fields.scss

@@ -33,7 +33,7 @@
     bottom: 0;
 
     text-align: center;
-    background-color: var(--bg-color);
+    background-color: var(--window-bg);
 
     &.is-inactive {
         display: none;
@@ -59,7 +59,3 @@
         opacity: 0.5;
     }
 }
-
-.flex-basis-100 {
-    flex-basis: 100%;
-}

ts/editor/toolbar.ts

@@ -16,7 +16,8 @@ export function initToolbar(i18n: Promise<void>) {
 
     document.addEventListener("DOMContentLoaded", () => {
         i18n.then(() => {
-            const target = document.getElementById("editorToolbar")!;
+            const target = document.body;
+            const anchor = document.getElementById("fields")!;
 
             const buttons = [
                 getNotetypeGroup(),
@@ -28,7 +29,7 @@ export function initToolbar(i18n: Promise<void>) {
 
             const menus = [...getFormatBlockMenus(), ...getTemplateMenus()];
 
-            toolbarResolve(editorToolbar(target, buttons, menus));
+            toolbarResolve(editorToolbar({ target, anchor, buttons, menus }));
         });
     });
 

ts/sass/base.scss

@@ -9,6 +9,15 @@ $link-hover-decoration: none;
 @import "ts/sass/bootstrap/bootstrap-reboot";
 @import "ts/sass/bootstrap/bootstrap-utilities";
 
+/* Bootstrap "extensions" */
+.flex-basis-100 {
+    flex-basis: 100%;
+}
+
+.flex-basis-75 {
+    flex-basis: 75%;
+}
+
 body,
 html {
     overscroll-behavior: none;