Merge pull request #1196 from hgiesel/csscleanup

Use TextInputModal directly

ts/components/contextKeys.ts

@@ -6,3 +6,4 @@ export const disabledKey = Symbol("disabled");
 export const buttonToolbarKey = Symbol("buttonToolbar");
 export const buttonGroupKey = Symbol("buttonGroup");
 export const dropdownKey = Symbol("dropdown");
+export const modalsKey = Symbol("modals");

ts/deckoptions/BUILD.bazel

@@ -61,15 +61,14 @@ ts_library(
         "lib.ts",
         "steps.ts",
         "strings.ts",
-        "textInputModal.ts",
     ],
     module_name = "deckoptions",
     deps = [
-        "TextInputModal",
         "//ts:image_module_support",
         "//ts/lib",
         "//ts/lib:backend_proto",
         "//ts/sveltelib",
+        "//ts/components",
         "@npm//lodash-es",
         "@npm//svelte",
     ],
@@ -133,10 +132,12 @@ svelte_check(
         "*.ts",
         "*.svelte",
     ]) + [
+        "//ts/sass:button_mixins_lib",
+        "//ts/sass/bootstrap",
         "@npm//@types/bootstrap",
         "@npm//@types/lodash-es",
         "@npm//@types/marked",
-        "//ts/components:svelte_components",
+        "//ts/components",
     ],
 )
 

ts/deckoptions/ConfigSelector.svelte

@@ -4,10 +4,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import { getContext } from "svelte";
+    import { modalsKey } from "components/contextKeys";
     import type { DeckOptionsState, ConfigListEntry } from "./lib";
+    import type Modal from "bootstrap/js/dist/modal";
 
-    import WithTheming from "components/WithTheming.svelte";
+    import TextInputModal from "./TextInputModal.svelte";
     import StickyBar from "components/StickyBar.svelte";
+    import WithTheming from "components/WithTheming.svelte";
     import ButtonToolbar from "components/ButtonToolbar.svelte";
     import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
     import ButtonGroup from "components/ButtonGroup.svelte";
@@ -28,8 +32,46 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function blur(event: Event): void {
         state.setCurrentIndex(parseInt((event.target! as HTMLSelectElement).value));
     }
+
+    function onAddConfig(text: string): void {
+        const trimmed = text.trim();
+        if (trimmed.length) {
+            state.addConfig(trimmed);
+        }
+    }
+
+    function onRenameConfig(text: string): void {
+        state.setCurrentName(text);
+    }
+
+    const modals = getContext<Map<string, Modal>>(modalsKey);
+
+    let addModalKey: string;
+    let renameModalKey: string;
+    let oldName = "";
+
+    function onAdd() {
+        modals.get(addModalKey)!.show();
+    }
+
+    function onRename() {
+        oldName = state.getCurrentName();
+        modals.get(renameModalKey)!.show();
+    }
 </script>
 
+<TextInputModal
+    title="Add Config"
+    prompt="Name"
+    onOk={onAddConfig}
+    bind:modalKey={addModalKey} />
+<TextInputModal
+    title="Rename Config"
+    prompt="Name"
+    onOk={onRenameConfig}
+    value={oldName}
+    bind:modalKey={renameModalKey} />
+
 <StickyBar>
     <WithTheming style="--toolbar-size: 2.3rem; --toolbar-wrap: nowrap">
         <ButtonToolbar class="justify-content-between">
@@ -50,7 +92,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </ButtonToolbarItem>
 
             <ButtonToolbarItem>
-                <SaveButton {state} />
+                <SaveButton {state} on:add={onAdd} on:rename={onRename} />
             </ButtonToolbarItem>
         </ButtonToolbar>
     </WithTheming>

ts/deckoptions/DeckOptionsPage.svelte

@@ -41,21 +41,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onDestroy(() => registerCleanup?.());
 </script>
 
-<style lang="scss">
-    .editor {
-        // without this, the initial viewport can be wrong
-        overflow-x: hidden;
-    }
-</style>
-
 <ConfigSelector {state} />
-
+<ConfigEditor {state} />
-<div>
-    <div id="modal">
-        <!-- filled in later-->
-    </div>
-
-    <div class="editor">
-        <ConfigEditor {state} />
-    </div>
-</div>

ts/deckoptions/SaveButton.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import { textInputModal } from "./textInputModal";
+    import { createEventDispatcher } from "svelte";
     import type { DeckOptionsState } from "./lib";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
@@ -16,32 +16,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import DropdownDivider from "components/DropdownDivider.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
 
+    const dispatch = createEventDispatcher();
+
     export let state: DeckOptionsState;
 
-    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(() => {
@@ -78,8 +56,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <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={() => dispatch('add')}>Add Config</DropdownItem>
-                <DropdownItem on:click={renameConfig}>Rename Config</DropdownItem>
+                <DropdownItem on:click={() => dispatch('rename')}>
+                    Rename Config
+                </DropdownItem>
                 <DropdownItem on:click={removeConfig}>Remove Config</DropdownItem>
                 <DropdownDivider />
                 <DropdownItem on:click={() => save(true)}>

ts/deckoptions/TextInputModal.svelte

@@ -6,54 +6,72 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     /* eslint
     @typescript-eslint/no-non-null-assertion: "off",
     */
-    import { onMount, onDestroy } from "svelte";
+    import { onMount, onDestroy, getContext } from "svelte";
+    import { nightModeKey, modalsKey } from "components/contextKeys";
     import Modal from "bootstrap/js/dist/modal";
 
     export let title: string;
     export let prompt: string;
-    export let startingValue = "";
+    export let value = "";
     export let onOk: (text: string) => void;
 
-    let inputRef: HTMLInputElement;
+    export const modalKey: string = Math.random().toString(36).substring(2);
+
+    const modals = getContext<Map<string, Modal>>(modalsKey);
+
+    let modalRef: HTMLDivElement;
     let modal: Modal;
 
+    let inputRef: HTMLInputElement;
+
+    function onOkClicked(): void {
+        onOk(inputRef.value);
+        modal.hide();
+        value = "";
+    }
+
     function onShown(): void {
         inputRef.focus();
     }
 
-    function onHidden(): void {
-        const container = document.getElementById("modal")!;
-        container.removeChild(container.firstElementChild!);
-    }
-
-    function onOkClicked(): void {
-        onOk(inputRef.value);
-        modal.hide();
-    }
-
     onMount(() => {
-        const container = document.getElementById("modal")!;
+        modalRef.addEventListener("shown.bs.modal", onShown);
-        container.addEventListener("shown.bs.modal", onShown);
+        modal = new Modal(modalRef);
-        container.addEventListener("hidden.bs.modal", onHidden);
+        modals.set(modalKey, modal);
-        modal = new Modal(container.firstElementChild!, {});
-        modal.show();
     });
 
     onDestroy(() => {
-        const container = document.getElementById("modal")!;
+        modalRef.removeEventListener("shown.bs.modal", onShown);
-        container.removeEventListener("shown.bs.modal", onShown);
-        container.removeEventListener("hidden.bs.modal", onHidden);
     });
+
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
-<div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+<style lang="scss">
+    .default-colors {
+        background-color: var(--window-bg);
+        color: var(--text-fg);
+    }
+
+    .invert {
+        filter: invert(1) grayscale(100%) brightness(200%);
+    }
+</style>
+
+<div
+    bind:this={modalRef}
+    class="modal fade"
+    tabindex="-1"
+    aria-labelledby="modalLabel"
+    aria-hidden="true">
     <div class="modal-dialog">
-        <div class="modal-content">
+        <div class="modal-content" class:default-colors={nightMode}>
             <div class="modal-header">
                 <h5 class="modal-title" id="modalLabel">{title}</h5>
                 <button
                     type="button"
                     class="btn-close"
+                    class:invert={nightMode}
                     data-bs-dismiss="modal"
                     aria-label="Close" />
             </div>
@@ -62,13 +80,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     <div class="mb-3">
                         <label
                             for="prompt-input"
-                            class="col-form-label">{prompt}</label>
+                            class="col-form-label">{prompt}:</label>
                         <input
                             id="prompt-input"
                             bind:this={inputRef}
                             type="text"
                             class="form-control"
-                            value={startingValue} />
+                            bind:value />
                     </div>
                 </form>
             </div>

ts/deckoptions/index.ts

@@ -14,7 +14,7 @@ import SpinBoxFloat from "./SpinBoxFloat.svelte";
 import EnumSelector from "./EnumSelector.svelte";
 import CheckBox from "./CheckBox.svelte";
 
-import { nightModeKey } from "components/contextKeys";
+import { nightModeKey, modalsKey } from "components/contextKeys";
 
 export async function deckOptions(
     target: HTMLDivElement,
@@ -35,6 +35,9 @@ export async function deckOptions(
     const context = new Map();
     context.set(nightModeKey, nightMode);
 
+    const modals = new Map();
+    context.set(modalsKey, modals);
+
     const state = new DeckOptionsState(deckId, info);
     return new DeckOptionsPage({
         target,

ts/deckoptions/textInputModal.ts

@@ -1,23 +0,0 @@
-// Copyright: Ankitects Pty Ltd and contributors
-// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
-/* eslint
-@typescript-eslint/no-non-null-assertion: "off",
- */
-
-import TextInputModal from "./TextInputModal.svelte";
-
-export interface TextInputModalProps {
-    title: string;
-    prompt: string;
-    startingValue?: string;
-    onOk: (string) => void;
-}
-
-export function textInputModal(props: TextInputModalProps): TextInputModal {
-    const target = document.getElementById("modal")!;
-    return new TextInputModal({
-        target,
-        props,
-    });
-}

ts/sass/bootstrap-dark.scss

@@ -14,13 +14,4 @@
             background-color: var(--window-bg);
         }
     }
-
-    .modal-content {
-        background-color: var(--window-bg);
-        color: var(--text-fg);
-    }
-
-    .btn-close {
-        filter: invert(1) grayscale(100%) brightness(200%);
-    }
 }