Merge pull request #1172 from hgiesel/deckoptionsdropdown

Deck Options Top Bar

ts/components/ButtonDropdown.svelte

@@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithTheming from "./WithTheming.svelte";
     import ButtonToolbar from "./ButtonToolbar.svelte";
 
-    export let id: string | undefined;
+    export let id: string;
     let className = "";
     export { className as class };
 

ts/components/DropdownDivider.svelte

@@ -0,0 +1,5 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<hr class="dropdown-divider" />

ts/components/DropdownMenu.svelte

@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { setContext } from "svelte";
     import { dropdownKey } from "./contextKeys";
 
-    export let id: string | undefined;
+    export let id: string;
 
     setContext(dropdownKey, null);
 </script>

ts/components/LabelButton.svelte

@@ -11,6 +11,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string | undefined = undefined;
     let className: string = "";
     export { className as class };
+    export let theme = "anki";
+
+    function extendClassName(className: string, theme: string): string {
+        return `btn ${theme !== "anki" ? `btn-${theme}` : ""}${className}`;
+    }
 
     export let tooltip: string | undefined = undefined;
     export let active = false;
@@ -48,11 +53,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <button
     bind:this={buttonRef}
     {id}
-    class={`btn ${className}`}
+    class={extendClassName(className, theme)}
     class:active
     class:dropdown-toggle={dropdownProps.dropdown}
-    class:btn-day={!nightMode}
-    class:btn-night={nightMode}
+    class:btn-day={theme === 'anki' && !nightMode}
+    class:btn-night={theme === 'anki' && nightMode}
     title={tooltip}
     {...dropdownProps}
     disabled={_disabled}

ts/components/SelectButton.svelte

@@ -5,36 +5,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey } from "./contextKeys";
-    import SelectOption from "./SelectOption.svelte";
+    import { disabledKey, nightModeKey } from "./contextKeys";
 
-    interface Option {
-        label: string;
-        value: string;
-        selected?: false;
-    }
+    export let id: string | undefined = undefined;
+    let className = "";
+    export { className as class };
 
-    export let id: string;
-    export let className = "";
-    export let tooltip: string;
-
-    function extendClassName(classes: string) {
-        return `form-select ${classes}`;
-    }
+    export let tooltip: string | undefined = undefined;
 
     export let disables = true;
-    export let options: Option[];
+
+    const nightMode = getContext<boolean>(nightModeKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
+    $: _disabled = disables && $disabled;
 
     let buttonRef: HTMLSelectElement;
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
-
-    const disabled = getContext<Readable<boolean>>(disabledKey);
-    $: _disabled = disables && $disabled;
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     select {
         display: inline-block;
         vertical-align: middle;
@@ -47,24 +40,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         box-shadow: none;
         border-radius: 0;
 
-        &:hover {
-            background-color: #eee;
-        }
-
         &:focus {
             outline: none;
         }
     }
+
+    @include button.btn-day($with-hover: false);
+    @include button.btn-night($with-hover: false);
 </style>
 
+<!-- svelte-ignore a11y-no-onchange -->
+
 <select
     tabindex="-1"
     bind:this={buttonRef}
     disabled={_disabled}
     {id}
-    class={extendClassName(className)}
-    title={tooltip}>
-    {#each options as option}
-        <SelectOption {...option} />
-    {/each}
+    class={className}
+    class:btn-day={!nightMode}
+    class:btn-night={nightMode}
+    title={tooltip}
+    on:change>
+    <slot />
 </select>

ts/components/SelectOption.svelte

@@ -3,9 +3,10 @@ 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 label: string;
-    export let value: string;
+    export let value: string | undefined = undefined;
     export let selected = false;
 </script>
 
-<option {selected} {value}>{label}</option>
+<option {value} {selected}>
+    <slot />
+</option>

ts/components/WithDropdownMenu.svelte

@@ -15,6 +15,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 
     const menuId = Math.random().toString(36).substring(2);
+    let dropdown: Dropdown;
+
+    function activateDropdown(_event: MouseEvent): void {
+        dropdown.toggle();
+    }
 
     /* Normally dropdown and trigger are associated with a
     /* common ancestor with .dropdown class */
@@ -31,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
         } else {
-            const dropdown = new Dropdown(button);
+            dropdown = new Dropdown(button);
 
             /* Set custom menu without using common element with .dropdown */
             (dropdown as any)._menu = menu;
@@ -39,4 +44,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<slot {createDropdown} {menuId} />
+<slot {createDropdown} {activateDropdown} {menuId} />

ts/components/WithTheming.svelte

@@ -4,6 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     export let id: string | undefined = undefined;
+    let className = "";
+    export { className as class };
     export let style: string;
 </script>
 
@@ -13,6 +15,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<div {id} {style}>
+<div {id} class={className} {style}>
     <slot />
 </div>

ts/deckoptions/BUILD.bazel

@@ -27,6 +27,7 @@ compile_svelte(
     srcs = svelte_files,
     deps = [
         "//ts/sveltelib",
+        "//ts/components",
         "@npm//@types/bootstrap",
         "@npm//@types/marked",
     ],
@@ -47,6 +48,7 @@ ts_library(
         "DeckOptionsPage",
         "lib",
         "//ts/lib",
+        "//ts/components",
         "@npm//@popperjs",
         "@npm//svelte2tsx",
     ],
@@ -100,6 +102,8 @@ esbuild(
         ":base_css",
         "//ts/sveltelib",
         "@npm//marked",
+        "//ts/components",
+        "//ts/components:svelte_components",
     ] + svelte_names,
 )
 
@@ -132,6 +136,7 @@ svelte_check(
         "@npm//@types/bootstrap",
         "@npm//@types/lodash-es",
         "@npm//@types/marked",
+        "//ts/components:svelte_components",
     ],
 )
 

ts/deckoptions/ConfigSelector.svelte

@@ -5,7 +5,17 @@ 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 WithTheming from "components/WithTheming.svelte";
+    import StickyBar from "components/StickyBar.svelte";
+    import ButtonToolbar from "components/ButtonToolbar.svelte";
+    import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+
+    import SelectButton from "components/SelectButton.svelte";
+    import SelectOption from "components/SelectOption.svelte";
+    import SaveButton from "./SaveButton.svelte";
 
     export let state: DeckOptionsState;
     let configList = state.configList;
@@ -15,43 +25,35 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return `${entry.name} (${count})`;
     }
 
-    function blur(this: HTMLSelectElement) {
-        state.setCurrentIndex(parseInt(this.value));
+    function blur(event: Event): void {
+        state.setCurrentIndex(parseInt((event.target! as HTMLSelectElement).value));
     }
 </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>
+    <WithTheming style="--toolbar-size: 30px; --toolbar-wrap: nowrap">
+        <ButtonToolbar class="justify-content-between">
+            <ButtonToolbarItem>
+                <ButtonGroup class="flex-grow-1">
+                    <ButtonGroupItem>
+                        <SelectButton class="flex-grow-1" on:change={blur}>
+                            {#each $configList as entry}
+                                <SelectOption
+                                    value={String(entry.idx)}
+                                    selected={entry.current}>
+                                    {configLabel(entry)}
+                                </SelectOption>
+                            {/each}
+                        </SelectButton>
+                    </ButtonGroupItem>
+                </ButtonGroup>
+            </ButtonToolbarItem>
 
-        <OptionsDropdown {state} />
-    </div>
-</div>
+            <ButtonToolbarItem>
+                <SaveButton {state} />
+            </ButtonToolbarItem>
+        </ButtonToolbar>
+    </WithTheming>
+</StickyBar>

ts/deckoptions/DeckOptionsPage.svelte

@@ -48,13 +48,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
+<ConfigSelector {state} />
+
 <div>
     <div id="modal">
         <!-- filled in later-->
     </div>
 
-    <ConfigSelector {state} />
-
     <div class="editor">
         <ConfigEditor {state} />
     </div>

ts/deckoptions/SaveButton.svelte

@@ -7,6 +7,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { textInputModal } from "./textInputModal";
     import type { DeckOptionsState } from "./lib";
 
+    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+
+    import LabelButton from "components/LabelButton.svelte";
+    import DropdownMenu from "components/DropdownMenu.svelte";
+    import DropdownItem from "components/DropdownItem.svelte";
+    import DropdownDivider from "components/DropdownDivider.svelte";
+    import WithDropdownMenu from "components/WithDropdownMenu.svelte";
+
     export let state: DeckOptionsState;
 
     function addConfig(): void {
@@ -60,38 +69,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<style>
-    :global(svg) {
-        vertical-align: text-bottom;
-    }
-</style>
+<ButtonGroup>
+    <ButtonGroupItem>
+        <LabelButton theme="primary" on:click={() => save(false)}>Save</LabelButton>
+    </ButtonGroupItem>
 
-<div class="btn-group" dir="ltr">
-    <button
-        type="button"
-        class="btn btn-primary"
-        on:click={() => save(false)}>Save</button>
-    <button
-        type="button"
-        class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
-        data-bs-toggle="dropdown"
-        aria-expanded="false">
-        <span class="visually-hidden">Toggle Dropdown</span>
-    </button>
-    <ul class="dropdown-menu">
-        <li><a class="dropdown-item" href={'#'} on:click={addConfig}>Add Config</a></li>
-        <li>
-            <a class="dropdown-item" href={'#'} on:click={renameConfig}>Rename Config</a>
-        </li>
-        <li>
-            <a class="dropdown-item" href={'#'} on:click={removeConfig}>Remove Config</a>
-        </li>
-        <li>
-            <hr class="dropdown-divider" />
-        </li>
-        <li>
-            <a class="dropdown-item" href={'#'} on:click={() => save(true)}>Save to All
-                Children</a>
-        </li>
-    </ul>
-</div>
+    <ButtonGroupItem>
+        <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
+            <LabelButton on:mount={createDropdown} on:click={activateDropdown} />
+            <DropdownMenu id={menuId}>
+                <DropdownItem on:click={addConfig}>Add Config</DropdownItem>
+                <DropdownItem on:click={renameConfig}>Rename Config</DropdownItem>
+                <DropdownItem on:click={removeConfig}>Remove Config</DropdownItem>
+                <DropdownDivider />
+                <DropdownItem on:click={() => save(true)}>
+                    Save to All Children
+                </DropdownItem>
+            </DropdownMenu>
+        </WithDropdownMenu>
+    </ButtonGroupItem>
+</ButtonGroup>

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

@@ -1,6 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+/* eslint
+@typescript-eslint/no-explicit-any: "off",
+ */
+
 import { getDeckOptionsInfo, DeckOptionsState } from "./lib";
 import { setupI18n, ModuleName } from "lib/i18n";
 import { checkNightMode } from "lib/nightmode";
@@ -10,20 +14,33 @@ import SpinBoxFloat from "./SpinBoxFloat.svelte";
 import EnumSelector from "./EnumSelector.svelte";
 import CheckBox from "./CheckBox.svelte";
 
+import { nightModeKey } from "components/contextKeys";
+
 export async function deckOptions(
     target: HTMLDivElement,
     deckId: number
 ): Promise<DeckOptionsPage> {
-    checkNightMode();
-    await setupI18n({
-        modules: [ModuleName.SCHEDULING, ModuleName.ACTIONS, ModuleName.DECK_CONFIG],
-    });
-    const info = await getDeckOptionsInfo(deckId);
+    const [info] = await Promise.all([
+        getDeckOptionsInfo(deckId),
+        setupI18n({
+            modules: [
+                ModuleName.SCHEDULING,
+                ModuleName.ACTIONS,
+                ModuleName.DECK_CONFIG,
+            ],
+        }),
+    ]);
+
+    const nightMode = checkNightMode();
+    const context = new Map();
+    context.set(nightModeKey, nightMode);
+
     const state = new DeckOptionsState(deckId, info);
     return new DeckOptionsPage({
         target,
         props: { state },
-    });
+        context,
+    } as any);
 }
 
 export const deckConfigComponents = {

ts/editor/BUILD.bazel

@@ -153,6 +153,7 @@ prettier_test(
     name = "format_check",
     srcs = glob([
         "*.ts",
+        "*.svelte",
     ]),
 )
 

ts/editor/TemplateButtons.svelte

@@ -62,7 +62,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithDropdownMenu let:menuId let:createDropdown>
+        <WithDropdownMenu let:createDropdown let:menuId>
             <IconButton on:mount={createDropdown}>
                 {@html functionIcon}
             </IconButton>

ts/editor/toolbar.ts

@@ -20,7 +20,7 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
         toolbarResolve = resolve;
     });
 
-    document.addEventListener("DOMContentLoaded", () => {
+    document.addEventListener("DOMContentLoaded", () =>
         i18n.then(() => {
             const target = document.body;
             const anchor = document.getElementById("fields")!;
@@ -33,8 +33,8 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
             );
 
             toolbarResolve(new EditorToolbar({ target, anchor, context } as any));
-        });
-    });
+        })
+    );
 
     return toolbarPromise;
 }

ts/sass/bootstrap-dark.scss

@@ -5,8 +5,7 @@
 @use 'fusion_vars';
 
 @mixin night-mode {
-    input,
-    select {
+    input {
         background-color: var(--frame-bg);
         border-color: var(--border);
 
@@ -15,19 +14,6 @@
         }
     }
 
-    .dropdown-menu {
-        background-color: var(--frame-bg);
-
-        .dropdown-item {
-            color: var(--text-fg);
-
-            &:hover,
-            &:active {
-                background-color: var(--window-bg);
-            }
-        }
-    }
-
     .modal-content {
         background-color: var(--window-bg);
         color: var(--text-fg);

ts/sass/button_mixins.scss

@@ -17,22 +17,31 @@ $btn-base-color-day: white;
     border-color: var(--medium-border) !important;
 }
 
-@mixin btn-day($with-disabled: true, $with-margin: true) {
+@mixin btn-day(
+    $with-hover: true,
+    $with-active: true,
+    $with-disabled: true,
+    $with-margin: true
+) {
     .btn-day {
         @include btn-day-base;
         @content ($btn-base-color-day);
 
-        &:hover {
-            background-color: darken($btn-base-color-day, 8%);
+        @if ($with-hover) {
+            &:hover {
+                background-color: darken($btn-base-color-day, 8%);
+            }
         }
 
-        &:active,
-        &.active {
-            @include impressed-shadow(0.25);
-        }
+        @if ($with-active) {
+            &:active,
+            &.active {
+                @include impressed-shadow(0.25);
+            }
 
-        &:active.active {
-            box-shadow: none;
+            &:active.active {
+                box-shadow: none;
+            }
         }
 
         @if ($with-disabled) {
@@ -56,25 +65,34 @@ $btn-base-color-night: #666;
     border-color: $btn-base-color-night;
 }
 
-@mixin btn-night($with-disabled: true, $with-margin: true) {
+@mixin btn-night(
+    $with-hover: true,
+    $with-active: true,
+    $with-disabled: true,
+    $with-margin: true
+) {
     .btn-night {
         @include btn-night-base;
         @content ($btn-base-color-night);
 
-        &:hover {
-            background-color: lighten($btn-base-color-night, 8%);
-            border-color: lighten($btn-base-color-night, 8%);
+        @if ($with-hover) {
+            &:hover {
+                background-color: lighten($btn-base-color-night, 8%);
+                border-color: lighten($btn-base-color-night, 8%);
+            }
         }
 
-        &:active,
-        &.active {
-            @include impressed-shadow(0.35);
-            border-color: darken($btn-base-color-night, 8%);
-        }
+        @if ($with-disabled) {
+            &:active,
+            &.active {
+                @include impressed-shadow(0.35);
+                border-color: darken($btn-base-color-night, 8%);
+            }
 
-        &:active.active {
-            box-shadow: none;
-            border-color: $btn-base-color-night;
+            &:active.active {
+                box-shadow: none;
+                border-color: $btn-base-color-night;
+            }
         }
 
         @if ($with-disabled) {