Add mostly working addcards topbar

qt/aqt/addcards.py

@@ -68,21 +68,31 @@ class AddCards(QDialog):
 
             editor.web.eval(
                 f"""
-const notetypeChooser = editorToolbar.labelButton({{
-    label: `Choose note type`,
-    onClick: () => bridgeCommand("choosenotetype"),
-    disables: false,
+const notetypeChooser = editorToolbar.withLabel({{
+    label: `{tr.notetypes_type()}`,
+    className: "flex-grow-1",
+    button: editorToolbar.labelButton({{
+        label: `Choose note type`,
+        className: "flex-grow-1",
+        onClick: () => bridgeCommand("choosenotetype"),
+        disables: false,
+    }})
 }});
 
-const deckChooser = editorToolbar.labelButton({{
-    label: `Choose deck`,
-    onClick: () => bridgeCommand("choosedeck"),
-    disables: false,
+const deckChooser = editorToolbar.withLabel({{
+    label: `{tr.decks_deck()}`,
+    className: "flex-grow-1",
+    button: editorToolbar.labelButton({{
+        label: `Choose deck`,
+        className: "flex-grow-1",
+        onClick: () => bridgeCommand("choosedeck"),
+        disables: false,
+    }})
 }});
 
 $editorToolbar.insertButton(editorToolbar.buttonGroup({{
     id: "choosers",
-    fullWidth: true,
+    className: "flex-basis-100",
     items: [notetypeChooser, deckChooser],
 }}), 0);
 """

ts/editor-toolbar/ButtonGroup.d.ts

@@ -6,4 +6,5 @@ export interface ButtonGroupProps {
     id: string;
     className?: string;
     items: ToolbarItem[];
+    fullWidth?: boolean;
 }

ts/editor-toolbar/DropdownMenu.svelte

@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
     import { getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
 

ts/editor-toolbar/EditorToolbar.svelte

@@ -24,7 +24,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     import ButtonGroup from "./ButtonGroup.svelte";
-    import type { ButtonGroupProps } from "./ButtonGroup";
 
     export let buttons: Readable<IterableToolbarItem>[];
     export let menus: Readable<ToolbarItem[]>;

ts/editor-toolbar/WithLabel.d.ts

@@ -3,6 +3,9 @@
 import type { ToolbarItem } from "./types";
 
 export interface WithLabelProps {
+    id?: string;
+    className?: string;
+
     button: ToolbarItem;
     label: string;
 }

ts/editor-toolbar/WithLabel.svelte

@@ -3,20 +3,25 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import type { ToolbarItem } from "./types";
-    import type { Modifier } from "lib/shortcuts";
 
-    import { onDestroy } from "svelte";
-    import { registerShortcut, getPlatformString } from "lib/shortcuts";
+    export let id: string;
+    export let className = "";
 
-    export let button: ToolbarItem;
     export let label: string;
+    export let button: ToolbarItem;
 </script>
 
+<style lang="scss">
+    label {
+        display: flex;
+        padding: 0 calc(var(--toolbar-size) / 10);
+    }
+</style>
+
 <!-- svelte-ignore a11y-label-has-associated-control -->
 
-<label>
-    {label}
+<label {id} class={className}>
+    <span class="me-1">{label}</span>
     <svelte:component this={button.component} {...button} />
 </label>

ts/editor/addons.ts

@@ -9,10 +9,12 @@ import {
     iconButton,
     commandIconButton,
     selectButton,
+
     dropdownMenu,
     dropdownItem,
     buttonDropdown,
     withDropdownMenu,
+    withLabel,
 } from "editor-toolbar/dynamicComponents";
 
 export const editorToolbar: Record<
@@ -30,4 +32,5 @@ export const editorToolbar: Record<
     dropdownItem,
     buttonDropdown,
     withDropdownMenu,
+    withLabel,
 };

ts/editor/fields.scss

@@ -59,3 +59,7 @@
         opacity: 0.5;
     }
 }
+
+.flex-basis-100 {
+    flex-basis: 100%;
+}