Add lefttopbtns as AddonButtons

qt/aqt/editor.py

@@ -145,7 +145,7 @@ class Editor:
         gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
 
         lefttopbtns_defs = [
-            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.addButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));"
+            f"$editorToolbar.then(({{ notetypeButtons }}) => notetypeButtons.appendButton({{ component: editorToolbar.Raw, props: {{ html: `{button}` }} }}, -1));"
             for button in lefttopbtns
         ]
         lefttopbtns_js = "\n".join(lefttopbtns_defs)
@@ -155,21 +155,21 @@ class Editor:
         # legacy filter
         righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
 
-        righttopbtns_defs = "\n".join(
-            [f"editorToolbar.Raw({{ html: `{button}` }})," for button in righttopbtns]
-        )
+        righttopbtns_defs = ", ".join([f"`{button}`" for button in righttopbtns])
         righttopbtns_js = (
             f"""
-$editorToolbar.then(({{ addButton }}) => addButton(editorToolbar.buttonGroup({{
-  id: "addons",
-  items: [ {righttopbtns_defs} ]
-}}), -1));
+$editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{
+    component: editorToolbar.AddonButtons,
+    id: "addons",
+    props: {{ buttons: [ {righttopbtns_defs} ] }},
+}}));
 """
-            if righttopbtns_defs
+            if len(righttopbtns) > 0
             else ""
         )
 
-        self.web.eval(f"{lefttopbtns_js}")
+        print(righttopbtns_js)
+        self.web.eval(f"{lefttopbtns_js} {righttopbtns_js}")
 
     # Top buttons
     ######################################################################

ts/components/ButtonToolbar.svelte

@@ -38,10 +38,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             buttonToolbarRef
         );
 
-        const insertGroup = (button: SvelteComponent, position: Identifier = 0) =>
-            addComponent(button, (added, parent) => insert(added, parent, position));
-        const appendGroup = (button: SvelteComponent, position: Identifier = -1) =>
-            addComponent(button, (added, parent) => add(added, parent, position));
+        const insertGroup = (group: SvelteComponent, position: Identifier = 0) =>
+            addComponent(group, (added, parent) => insert(added, parent, position));
+        const appendGroup = (group: SvelteComponent, position: Identifier = -1) =>
+            addComponent(group, (added, parent) => add(added, parent, position));
 
         const showGroup = (id: Identifier) =>
             updateRegistration(({ detach }) => detach.set(false), id);

ts/components/IconButton.svelte

@@ -34,12 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     button {
         padding: 0;
-
-        border-top-left-radius: var(--border-left-radius);
-        border-bottom-left-radius: var(--border-left-radius);
-
-        border-top-right-radius: var(--border-right-radius);
-        border-bottom-right-radius: var(--border-right-radius);
+        @include button.btn-border-radius;
     }
 
     @include button.btn-day;

ts/components/LabelButton.svelte

@@ -37,11 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         width: auto;
         height: var(--toolbar-size);
 
-        border-top-left-radius: var(--border-left-radius);
-        border-bottom-left-radius: var(--border-left-radius);
-
-        border-top-right-radius: var(--border-right-radius);
-        border-bottom-right-radius: var(--border-right-radius);
+        @include button.btn-border-radius;
     }
 
     @include button.btn-day;

ts/components/Raw.svelte

@@ -1,9 +0,0 @@
-<!--
-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 html: string;
-</script>
-
-{@html html}

ts/editor/AddonButtons.svelte

@@ -0,0 +1,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 ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+
+    export let buttons: string[];
+</script>
+
+<ButtonGroup>
+    {#each buttons as button}
+        <ButtonGroupItem>
+            {@html button}
+        </ButtonGroupItem>
+    {/each}
+</ButtonGroup>

ts/editor/EditorToolbar.svelte

@@ -28,16 +28,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     /* Export components */
+    import AddonButtons from "./AddonButtons.svelte";
     import PreviewButton from "./PreviewButton.svelte";
     import LabelButton from "components/LabelButton.svelte";
     import IconButton from "components/IconButton.svelte";
-    import Raw from "components/Raw.svelte";
 
     export const editorToolbar = {
+        AddonButtons,
         PreviewButton,
         LabelButton,
         IconButton,
-        Raw,
     };
 </script>
 

ts/editor/legacy.scss

@@ -1,5 +1,8 @@
+@use "ts/sass/button_mixins" as button;
+
 .linkb {
     display: inline-block;
+    @include button.btn-border-radius;
 }
 
 .topbut {

ts/sass/button_mixins.scss

@@ -1,6 +1,14 @@
 @import "ts/sass/bootstrap/functions";
 @import "ts/sass/bootstrap/variables";
 
+@mixin btn-border-radius {
+    border-top-left-radius: var(--border-left-radius);
+    border-bottom-left-radius: var(--border-left-radius);
+
+    border-top-right-radius: var(--border-right-radius);
+    border-bottom-right-radius: var(--border-right-radius);
+}
+
 $btn-base-color-day: white;
 
 @mixin btn-day-base {