From d099b0091854e70de6b8d7fe25e23bac67267cec Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 28 May 2021 00:52:49 +0200
Subject: [PATCH] Update DailyLimits and NewOptions to new format

---
 ts/deckoptions/CheckBox.svelte     | 22 ++------
 ts/deckoptions/ConfigEntry.svelte  | 37 +++---------
 ts/deckoptions/DailyLimits.svelte  | 52 +++++++++++------
 ts/deckoptions/EnumSelector.svelte | 17 +++---
 ts/deckoptions/NewOptions.svelte   | 90 ++++++++++++++++++++----------
 ts/deckoptions/RevertButton.svelte | 19 +++----
 ts/deckoptions/Row.svelte          | 11 ++++
 ts/deckoptions/SpinBox.svelte      | 24 ++++----
 ts/deckoptions/SpinBoxFloat.svelte | 25 ++++-----
 ts/deckoptions/StepsInput.svelte   | 18 +-----
 ts/deckoptions/Testo.svelte        | 25 +++++++++
 ts/deckoptions/Warnings.svelte     | 20 +++++++
 12 files changed, 205 insertions(+), 155 deletions(-)
 create mode 100644 ts/deckoptions/Row.svelte
 create mode 100644 ts/deckoptions/Testo.svelte
 create mode 100644 ts/deckoptions/Warnings.svelte

diff --git a/ts/deckoptions/CheckBox.svelte b/ts/deckoptions/CheckBox.svelte
index 20dec648c..beb5df786 100644
--- a/ts/deckoptions/CheckBox.svelte
+++ b/ts/deckoptions/CheckBox.svelte
@@ -3,26 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ConfigEntry from "./ConfigEntry.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
     export let label: string;
     export let value: boolean;
     export let defaultValue: boolean;
-    export let tooltip = "";
-    export let id: string | undefined = undefined;
 </script>
 
-<ConfigEntry {id} label="" wholeLine={true} bind:value {defaultValue}>
-    <div class="checkbox-outer">
-        <label> <input type="checkbox" bind:checked={value} /> {label} </label>
-        {#if tooltip}
-            <HelpPopup html={tooltip} />
-        {/if}
-    </div>
-</ConfigEntry>
-
-<style lang="scss">
-    .checkbox-outer {
-        margin-top: 0.5em;
-    }
-</style>
+<label> <input type="checkbox" bind:checked={value} /> {label} </label>
+<RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/ConfigEntry.svelte b/ts/deckoptions/ConfigEntry.svelte
index 3c46bc90e..eb807ae01 100644
--- a/ts/deckoptions/ConfigEntry.svelte
+++ b/ts/deckoptions/ConfigEntry.svelte
@@ -3,41 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import marked from "marked";
-    import { slide } from "svelte/transition";
-    import RevertButton from "./RevertButton.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    import Row from "./Row.svelte";
 
-    export let label: string;
-    export let tooltip = "";
-    export let value: any;
-    export let defaultValue: any;
-    /// empty strings will be ignored
-    export let warnings: string[] = [];
-    export let wholeLine = false;
     export let id: string | undefined = undefined;
-
-    let renderedTooltip: string;
-    $: renderedTooltip = marked(tooltip);
+    export let wrap = false;
 </script>
 
-<div {id} class="row gx-0 gy-1 mt-0">
+<Row {id}>
     <div class="col-8 d-flex align-items-center">
-        {label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if}
+        <slot name="left" />
     </div>
 
-    <div class="col-sm-4 d-flex align-items-center">
-        <slot />
-        <RevertButton bind:value {defaultValue} on:revert />
+    <div class:col-4={!wrap} class:col-sm-4={wrap} class="d-flex align-items-center">
+        <slot name="right" />
     </div>
-</div>
-
-{#each warnings as warning}
-    {#if warning}
-        <div class="row gx-0 gy-1 mt-0">
-            <div class="col-11 alert alert-warning mb-0" in:slide out:slide>
-                {warning}
-            </div>
-        </div>
-    {/if}
-{/each}
+</Row>
diff --git a/ts/deckoptions/DailyLimits.svelte b/ts/deckoptions/DailyLimits.svelte
index 16c7cbed9..358e45be9 100644
--- a/ts/deckoptions/DailyLimits.svelte
+++ b/ts/deckoptions/DailyLimits.svelte
@@ -3,8 +3,12 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import marked from "marked";
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
+    import ConfigEntry from "./ConfigEntry.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import Warnings from "./Warnings.svelte";
     import SpinBox from "./SpinBox.svelte";
     import type { DeckOptionsState } from "./lib";
 
@@ -35,21 +39,37 @@
 </script>
 
 <TitledContainer title={tr.deckConfigDailyLimits()}>
-    <SpinBox
-        label={tr.schedulingNewCardsday()}
-        tooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
-        min={0}
-        warnings={[newCardsGreaterThanParent]}
-        defaultValue={defaults.newPerDay}
-        bind:value={$config.newPerDay}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingNewCardsday()}<HelpPopup
+                html={marked(tr.deckConfigNewLimitTooltip() + v3Extra)}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBox
+                min={0}
+                defaultValue={defaults.newPerDay}
+                bind:value={$config.newPerDay}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBox
-        label={tr.schedulingMaximumReviewsday()}
-        tooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
-        min={0}
-        warnings={[reviewsTooLow]}
-        defaultValue={defaults.reviewsPerDay}
-        bind:value={$config.reviewsPerDay}
-    />
+    <Warnings warnings={[newCardsGreaterThanParent]} />
+
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingMaximumReviewsday()}<HelpPopup
+                html={marked(tr.deckConfigReviewLimitTooltip() + v3Extra)}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBox
+                min={0}
+                defaultValue={defaults.reviewsPerDay}
+                bind:value={$config.reviewsPerDay}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
+
+    <Warnings warnings={[reviewsTooLow]} />
 </TitledContainer>
diff --git a/ts/deckoptions/EnumSelector.svelte b/ts/deckoptions/EnumSelector.svelte
index 75fd0224b..d6b3f921e 100644
--- a/ts/deckoptions/EnumSelector.svelte
+++ b/ts/deckoptions/EnumSelector.svelte
@@ -3,19 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import RevertButton from "./RevertButton.svelte";
 
-    export let label: string;
     export let choices: string[];
     export let value: number = 0;
     export let defaultValue: number;
-    export let tooltip = "";
 </script>
 
-<ConfigEntry {label} {tooltip} wholeLine={true} bind:value {defaultValue}>
-    <select bind:value class="form-select">
-        {#each choices as choice, idx}
-            <option value={idx}>{choice}</option>
-        {/each}
-    </select>
-</ConfigEntry>
+<select bind:value class="form-select">
+    {#each choices as choice, idx}
+        <option value={idx}>{choice}</option>
+    {/each}
+</select>
+<RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/NewOptions.svelte b/ts/deckoptions/NewOptions.svelte
index 2c6697202..7388c4c96 100644
--- a/ts/deckoptions/NewOptions.svelte
+++ b/ts/deckoptions/NewOptions.svelte
@@ -4,7 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
+    import ConfigEntry from "./ConfigEntry.svelte";
+    import Warnings from "./Warnings.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
     import SpinBox from "./SpinBox.svelte";
     import StepsInput from "./StepsInput.svelte";
     import EnumSelector from "./EnumSelector.svelte";
@@ -37,35 +41,65 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingNewCards()}>
-    <StepsInput
-        label={tr.deckConfigLearningSteps()}
-        tooltip={tr.deckConfigLearningStepsTooltip()}
-        defaultValue={defaults.learnSteps}
-        value={$config.learnSteps}
-        on:changed={(evt) => ($config.learnSteps = evt.detail.value)}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.deckConfigLearningSteps()}<HelpPopup
+                html={marked(tr.deckConfigLearningStepsTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <StepsInput
+                defaultValue={defaults.learnSteps}
+                value={$config.learnSteps}
+                on:changed={(evt) => ($config.learnSteps = evt.detail.value)}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBox
-        label={tr.schedulingGraduatingInterval()}
-        tooltip={tr.deckConfigGraduatingIntervalTooltip()}
-        warnings={[stepsExceedGraduatingInterval]}
-        defaultValue={defaults.graduatingIntervalGood}
-        bind:value={$config.graduatingIntervalGood}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingGraduatingInterval()}<HelpPopup
+                html={marked(tr.deckConfigGraduatingIntervalTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBox
+                defaultValue={defaults.graduatingIntervalGood}
+                bind:value={$config.graduatingIntervalGood}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 
-    <SpinBox
-        label={tr.schedulingEasyInterval()}
-        tooltip={tr.deckConfigEasyIntervalTooltip()}
-        warnings={[goodExceedsEasy]}
-        defaultValue={defaults.graduatingIntervalEasy}
-        bind:value={$config.graduatingIntervalEasy}
-    />
+    <Warnings warnings={[stepsExceedGraduatingInterval]} />
 
-    <EnumSelector
-        label={tr.deckConfigNewInsertionOrder()}
-        tooltip={tr.deckConfigNewInsertionOrderTooltip()}
-        choices={newInsertOrderChoices}
-        defaultValue={defaults.newCardInsertOrder}
-        bind:value={$config.newCardInsertOrder}
-    />
+    <ConfigEntry>
+        <span slot="left">
+            {tr.schedulingEasyInterval()}<HelpPopup
+                html={marked(tr.deckConfigEasyIntervalTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <SpinBox
+                defaultValue={defaults.graduatingIntervalEasy}
+                bind:value={$config.graduatingIntervalEasy}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
+
+    <Warnings warnings={[goodExceedsEasy]} />
+
+    <ConfigEntry wrap={true}>
+        <span slot="left">
+            {tr.deckConfigNewInsertionOrder()}<HelpPopup
+                html={marked(tr.deckConfigNewInsertionOrderTooltip())}
+            />
+        </span>
+        <svelte:fragment slot="right">
+            <EnumSelector
+                choices={newInsertOrderChoices}
+                defaultValue={defaults.newCardInsertOrder}
+                bind:value={$config.newCardInsertOrder}
+            />
+        </svelte:fragment>
+    </ConfigEntry>
 </TitledContainer>
diff --git a/ts/deckoptions/RevertButton.svelte b/ts/deckoptions/RevertButton.svelte
index 2988f1290..8b1d307c6 100644
--- a/ts/deckoptions/RevertButton.svelte
+++ b/ts/deckoptions/RevertButton.svelte
@@ -48,16 +48,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-{#if modified}
-    <span
-        bind:this={ref}
-        class="badge"
-        title={tr.deckConfigRevertButtonTooltip()}
-        on:click={revert}
-    >
-        {@html revertIcon}
-    </span>
-{/if}
+<span
+    bind:this={ref}
+    class="badge"
+    class:invisible={!modified}
+    title={tr.deckConfigRevertButtonTooltip()}
+    on:click={revert}
+>
+    {@html revertIcon}
+</span>
 
 <style lang="scss">
     span :global(svg) {
diff --git a/ts/deckoptions/Row.svelte b/ts/deckoptions/Row.svelte
new file mode 100644
index 000000000..96a44265e
--- /dev/null
+++ b/ts/deckoptions/Row.svelte
@@ -0,0 +1,11 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    export let id: string | undefined = undefined;
+</script>
+
+<div {id} class="row gx-0 gy-1 mt-0">
+    <slot />
+</div>
diff --git a/ts/deckoptions/SpinBox.svelte b/ts/deckoptions/SpinBox.svelte
index 6c9e89017..0ce1653d3 100644
--- a/ts/deckoptions/SpinBox.svelte
+++ b/ts/deckoptions/SpinBox.svelte
@@ -3,14 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import RevertButton from "./RevertButton.svelte";
 
-    export let label: string;
-    export let tooltip: string;
     export let value: number;
     export let min = 1;
     export let max = 9999;
-    export let warnings: string[] = [];
     export let defaultValue: number = 0;
 
     function checkMinMax() {
@@ -22,13 +19,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ConfigEntry {label} {tooltip} {warnings} bind:value {defaultValue}>
-    <input
-        type="number"
-        {min}
-        {max}
-        bind:value
-        class="form-control"
-        on:blur={checkMinMax}
-    />
-</ConfigEntry>
+<input
+    type="number"
+    {min}
+    {max}
+    bind:value
+    class="form-control"
+    on:blur={checkMinMax}
+/>
+<RevertButton bind:value {defaultValue} />
diff --git a/ts/deckoptions/SpinBoxFloat.svelte b/ts/deckoptions/SpinBoxFloat.svelte
index 812cac01a..6c6ae93df 100644
--- a/ts/deckoptions/SpinBoxFloat.svelte
+++ b/ts/deckoptions/SpinBoxFloat.svelte
@@ -4,11 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { NumberValueEvent } from "./events";
 
-    export let label: string;
-    export let tooltip: string;
     export let value: number;
     export let defaultValue: number;
     export let min = 1;
@@ -30,14 +28,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ConfigEntry {label} {tooltip} {value} {defaultValue} on:revert={revert}>
-    <input
-        type="number"
-        {min}
-        {max}
-        step="0.01"
-        value={stringValue}
-        on:blur={update}
-        class="form-control"
-    />
-</ConfigEntry>
+<input
+    type="number"
+    class="form-control"
+    {min}
+    {max}
+    step="0.01"
+    value={stringValue}
+    on:blur={update}
+/>
+<RevertButton bind:value {defaultValue} on:revert={revert} />
diff --git a/ts/deckoptions/StepsInput.svelte b/ts/deckoptions/StepsInput.svelte
index 55c528192..c42eab4ad 100644
--- a/ts/deckoptions/StepsInput.svelte
+++ b/ts/deckoptions/StepsInput.svelte
@@ -5,14 +5,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
     import { stepsToString, stringToSteps } from "./steps";
-    import ConfigEntry from "./ConfigEntry.svelte";
+    import RevertButton from "./RevertButton.svelte";
     import type { NumberValueEvent } from "./events";
 
-    export let label: string;
-    export let tooltip: string;
     export let value: number[];
     export let defaultValue: number[];
-    export let warnings: string[] = [];
 
     const dispatch = createEventDispatcher();
 
@@ -29,14 +26,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ConfigEntry
-    {label}
-    {tooltip}
-    {value}
-    {defaultValue}
-    {warnings}
-    wholeLine={value.length > 2}
-    on:revert={revert}
->
-    <input type="text" value={stringValue} on:blur={update} class="form-control" />
-</ConfigEntry>
+<input type="text" value={stringValue} on:blur={update} class="form-control" />
+<RevertButton bind:value {defaultValue} on:revert={revert} />
diff --git a/ts/deckoptions/Testo.svelte b/ts/deckoptions/Testo.svelte
new file mode 100644
index 000000000..1517a3c29
--- /dev/null
+++ b/ts/deckoptions/Testo.svelte
@@ -0,0 +1,25 @@
+<!--
+    import { slide } from "svelte/transition";
+    import RevertButton from "./RevertButton.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import marked from "marked";
+
+    export let label: string;
+    export let tooltip = "";
+    export let value: any;
+    export let defaultValue: any;
+    /// empty strings will be ignored
+    export let warnings: string[] = [];
+    export let wholeLine = false;
+
+    let renderedTooltip: string;
+    $: renderedTooltip = marked(tooltip);
+
+
+/* {label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if} */
+
+/* <slot /> */
+/* <RevertButton bind:value {defaultValue} on:revert /> */
+
+
+-->
diff --git a/ts/deckoptions/Warnings.svelte b/ts/deckoptions/Warnings.svelte
new file mode 100644
index 000000000..10fe77b01
--- /dev/null
+++ b/ts/deckoptions/Warnings.svelte
@@ -0,0 +1,20 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { slide } from "svelte/transition";
+    import Row from "./Row.svelte";
+
+    export let warnings: string[] = [];
+</script>
+
+{#each warnings as warning}
+    {#if warning}
+        <Row>
+            <div class="col-12 alert alert-warning mb-0" in:slide out:slide>
+                {warning}
+            </div>
+        </Row>
+    {/if}
+{/each}