Experimental sharing of components between EditorToolbar and DeckOptions

qt/aqt/editor.py

@@ -76,11 +76,6 @@
 )
 
 _html = """
-<style>
-:root {
-    --bg-color: %s;
-}
-</style>
 <div>
     <div id="editorToolbar"></div>
     <div id="fields">
@@ -135,10 +130,9 @@ def setupWeb(self) -> None:
         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/deckoptions/BUILD.bazel

@@ -58,6 +58,7 @@ ts_library(
         "lib.ts",
         "steps.ts",
         "textInputModal.ts",
+        "optionsDropdown.ts",
     ],
     module_name = "deckoptions",
     deps = [
@@ -97,6 +98,7 @@ esbuild(
         "@npm//bootstrap",
         ":base_css",
         "//ts/sveltelib",
+        "//ts/sveltelib:svelte_components",
     ] + svelte_names,
 )
 

ts/deckoptions/ConfigSelector.svelte

@@ -4,54 +4,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import type { DeckOptionsState, ConfigListEntry } from "./lib";
-    import OptionsDropdown from "./OptionsDropdown.svelte";
+    import type { DeckOptionsState } from "./lib";
+
+    import StickyBar from "sveltelib/StickyBar.svelte";
+    import { getOptionsDropdown } from "./optionsDropdown";
 
     export let state: DeckOptionsState;
     let configList = state.configList;
-
-    function configLabel(entry: ConfigListEntry): string {
-        const count = tr.deckConfigUsedByDecks({ decks: entry.useCount });
-        return `${entry.name} (${count})`;
-    }
-
-    function blur(this: HTMLSelectElement) {
-        state.setCurrentIndex(parseInt(this.value));
-    }
+    $: optionsDropdown = getOptionsDropdown(state, $configList);
 </script>
 
 <style lang="scss">
-    .sticky-bar {
-        position: sticky;
-        z-index: 1;
-        top: 0;
-        color: var(--text-fg);
-        background: var(--window-bg);
-        padding-bottom: 0.5em;
-        padding-top: 0.5em;
-    }
-
-    .selector-grid {
-        display: grid;
-        grid-template-columns: 6fr 1fr;
-        grid-column-gap: 0.5em;
-        padding-right: 0.5em;
-    }
 </style>
 
-<div class="sticky-bar">
+<StickyBar>
     <div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
-
-    <div class="selector-grid">
-        <!-- svelte-ignore a11y-no-onchange -->
-        <select class="form-select" on:change={blur}>
-            {#each $configList as entry}
-                <option value={entry.idx} selected={entry.current}>
-                    {configLabel(entry)}
-                </option>
-            {/each}
-        </select>
-
-        <OptionsDropdown {state} />
-    </div>
-</div>
+    <svelte:component this={optionsDropdown.component} {...optionsDropdown} />
+</StickyBar>

ts/deckoptions/DeckOptionsPage.svelte

@@ -6,15 +6,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ConfigSelector from "./ConfigSelector.svelte";
     import ConfigEditor from "./ConfigEditor.svelte";
     import type { DeckOptionsState } from "./lib";
-    import { onMount, onDestroy } from "svelte";
+    import { onMount, onDestroy, setContext } from "svelte";
     import { registerShortcut } from "lib/shortcuts";
     import type { Writable } from "svelte/store";
     import HtmlAddon from "./HtmlAddon.svelte";
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponents";
+    import { nightModeKey } from "sveltelib/contextKeys";
 
     export let state: DeckOptionsState;
     let addons = state.addonComponents;
 
+    export let nightMode: boolean;
+    setContext(nightModeKey, nightMode);
+
     export function auxData(): Writable<Record<string, unknown>> {
         return state.currentAuxData;
     }

ts/deckoptions/deckoptions-base.scss

@@ -1,3 +1,4 @@
+@use "ts/sass/vars";
 @use "ts/sass/scrollbar";
 @use "ts/sass/bootstrap-dark";
 

ts/deckoptions/index.ts

@@ -14,15 +14,15 @@ export async function deckOptions(
     target: HTMLDivElement,
     deckId: number
 ): Promise<DeckOptionsPage> {
-    checkNightMode();
+    const nightMode = checkNightMode();
     await setupI18n({
         modules: [ModuleName.SCHEDULING, ModuleName.ACTIONS, ModuleName.DECK_CONFIG],
     });
     const info = await getDeckOptionsInfo(deckId);
     const state = new DeckOptionsState(deckId, info);
     return new DeckOptionsPage({
         target,
-        props: { state },
+        props: { state, nightMode },
     });
 }
 

ts/deckoptions/lib.ts

@@ -10,7 +10,7 @@ import { postRequest } from "lib/postrequest";
 import { Writable, writable, get, Readable, readable } from "svelte/store";
 import { isEqual, cloneDeep } from "lodash-es";
 import * as tr from "lib/i18n";
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponents";
 
 export async function getDeckOptionsInfo(
     deckId: number

ts/deckoptions/optionsDropdown.ts

@@ -0,0 +1,136 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import * as tr from "lib/i18n";
+import { textInputModal } from "./textInputModal";
+import type { DeckOptionsState, ConfigListEntry } from "./lib";
+import {
+    DynamicSvelteComponent,
+    labelButton,
+    buttonGroup,
+    dropdownMenu,
+    dropdownItem,
+    dropdownDivider,
+    selectButton,
+} from "sveltelib/dynamicComponents";
+
+function configLabel(entry: ConfigListEntry): string {
+    const count = tr.deckConfigUsedByDecks({ decks: entry.useCount });
+    return `${entry.name} (${count})`;
+}
+
+export function getOptionsDropdown(
+    state: DeckOptionsState,
+    configList: ConfigListEntry[]
+): DynamicSvelteComponent {
+    function addConfig(): void {
+        textInputModal({
+            title: "Add Config",
+            prompt: "Name:",
+            onOk: (text: string) => {
+                const trimmed = text.trim();
+                if (trimmed.length) {
+                    state.addConfig(trimmed);
+                }
+            },
+        });
+    }
+
+    function renameConfig(): void {
+        textInputModal({
+            title: "Rename Config",
+            prompt: "Name:",
+            startingValue: state.getCurrentName(),
+            onOk: (text: string) => {
+                state.setCurrentName(text);
+            },
+        });
+    }
+
+    function removeConfig(): void {
+        // show pop-up after dropdown has gone away
+        setTimeout(() => {
+            if (state.defaultConfigSelected()) {
+                alert(tr.schedulingTheDefaultConfigurationCantBeRemoved());
+                return;
+            }
+            // fixme: move tr.qt_misc schema mod msg into core
+            // fixme: include name of deck in msg
+            const msg = state.removalWilLForceFullSync()
+                ? "This will require a one-way sync. Are you sure?"
+                : "Are you sure?";
+            if (confirm(msg)) {
+                try {
+                    state.removeCurrentConfig();
+                } catch (err) {
+                    alert(err);
+                }
+            }
+        }, 100);
+    }
+
+    function save(applyToChildDecks: boolean): void {
+        state.save(applyToChildDecks);
+    }
+
+    function blur(this: HTMLSelectElement) {
+        state.setCurrentIndex(parseInt(this.value));
+    }
+
+    const options = configList.map((entry) => ({
+        value: entry.idx,
+        selected: entry.current,
+        label: configLabel(entry),
+    }));
+
+    return buttonGroup({
+        id: "configSelector",
+        className: "justify-content-between",
+        size: 35,
+        items: [
+            buttonGroup({
+                className: "flex-basis-75",
+                items: [
+                    selectButton({
+                        options,
+                        className: "flex-basis-100",
+                        onChange: blur,
+                    }),
+                ],
+            }),
+            buttonGroup({
+                id: "optionsDropdown",
+                items: [
+                    labelButton({
+                        label: "Save",
+                        theme: "primary",
+                        onClick: () => save(false),
+                    }),
+                    labelButton({
+                        dropdownToggle: true,
+                    }),
+                    dropdownMenu({
+                        items: [
+                            dropdownItem({
+                                label: "Add Config",
+                                onClick: addConfig,
+                            }),
+                            dropdownItem({
+                                label: "Rename Config",
+                                onClick: renameConfig,
+                            }),
+                            dropdownItem({
+                                label: "Remove Config",
+                                onClick: removeConfig,
+                            }),
+                            dropdownDivider({}),
+                            dropdownItem({
+                                label: "Save to All Children",
+                                onClick: () => save(true),
+                            }),
+                        ],
+                    }),
+                ],
+            }),
+        ],
+    });
+}

ts/editor-toolbar/ButtonDropdown.d.ts

@@ -1,6 +1,6 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type { ToolbarItem } from "./types";
+import type { ToolbarItem } from "sveltelib/types";
 
 export interface ButtonDropdownProps {
     id: string;