add text to describe deckconfig warnings

ts/deckconfig/ConfigEditor.svelte

@@ -16,10 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     :global(h2) {
         margin-top: 1em;
     }
-
-    :global(.warn) {
-        background-color: var(--flag1-bg);
-    }
 </style>
 
 <div>

ts/deckconfig/ConfigEntry.svelte

@@ -9,6 +9,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let subLabel = "";
     export let value: any;
     export let defaultValue: any;
+    /// empty strings will be ignored
+    export let warnings: string[] = [];
 </script>
 
 <style lang="scss">
@@ -33,4 +35,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <div class="inner">
         <slot />
     </div>
+
+    {#each warnings as warning}
+        {#if warning}
+            <div class="alert alert-warning">{warning}</div>
+        {/if}
+    {/each}
 </div>

ts/deckconfig/NewOptions.svelte

@@ -21,20 +21,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tr.schedulingShowNewCardsInRandomOrder(),
     ];
 
-    let stepsExceedGraduatingInterval: boolean;
+    $: newCardsGreaterThanParent =
+        $config.newPerDay > $parentLimits.newCards
+            ? `Daily limit will be capped to parent limit of ${$parentLimits.newCards}`
+            : "";
+
+    let stepsExceedGraduatingInterval: string;
     $: {
         const lastLearnStepInDays = $config.learnSteps.length
             ? $config.learnSteps[$config.learnSteps.length - 1] / 60 / 24
             : 0;
         stepsExceedGraduatingInterval =
-            lastLearnStepInDays > $config.graduatingIntervalGood;
+            lastLearnStepInDays > $config.graduatingIntervalGood
+                ? "Your last learning step is greater than the graduating interval."
+                : "";
     }
 
     $: goodExceedsEasy =
-        $config.graduatingIntervalGood > $config.graduatingIntervalEasy;
-
-    // fixme: change impl; support warning messages
-    $: newCardsGreaterThanParent = $config.newPerDay > $parentLimits.newCards;
+        $config.graduatingIntervalGood > $config.graduatingIntervalEasy
+            ? "The Good interval should not be larger than the Easy interval."
+            : "";
 </script>
 
 <div>
@@ -43,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <StepsInput
         label="Learning steps"
         subLabel="Learning steps, separated by spaces."
-        warn={stepsExceedGraduatingInterval}
+        warnings={[stepsExceedGraduatingInterval]}
         defaultValue={defaults.learnSteps}
         value={$config.learnSteps}
         on:changed={(evt) => ($config.learnSteps = evt.detail.value)} />
@@ -59,21 +65,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         label={tr.schedulingNewCardsday()}
         subLabel="The maximum number of new cards to introduce in a day."
         min={0}
-        warn={newCardsGreaterThanParent}
+        warnings={[newCardsGreaterThanParent]}
         defaultValue={defaults.newPerDay}
         bind:value={$config.newPerDay} />
 
     <SpinBox
         label={tr.schedulingGraduatingInterval()}
         subLabel="Days to wait after answering Good on the last learning step."
-        warn={stepsExceedGraduatingInterval || goodExceedsEasy}
+        warnings={[stepsExceedGraduatingInterval, goodExceedsEasy]}
         defaultValue={defaults.graduatingIntervalGood}
         bind:value={$config.graduatingIntervalGood} />
 
     <SpinBox
         label={tr.schedulingEasyInterval()}
         subLabel="Days to wait after answering Easy on the first learning step."
-        warn={goodExceedsEasy}
+        warnings={[goodExceedsEasy]}
         defaultValue={defaults.graduatingIntervalEasy}
         bind:value={$config.graduatingIntervalEasy} />
 

ts/deckconfig/SpinBox.svelte

@@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let value: number;
     export let min = 1;
     export let max = 9999;
-    export let warn = false;
+    export let warnings: string[] = [];
     export let defaultValue: number = 0;
 
     function blur() {
@@ -22,13 +22,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<ConfigEntry {label} {subLabel} bind:value {defaultValue}>
-    <input
-        type="number"
-        {min}
-        {max}
-        bind:value
-        on:blur={blur}
-        class:warn
-        class="form-control" />
+<ConfigEntry {label} {subLabel} {warnings} bind:value {defaultValue}>
+    <input type="number" {min} {max} bind:value on:blur={blur} class="form-control" />
 </ConfigEntry>

ts/deckconfig/StepsInput.svelte

@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let subLabel: string;
     export let value: number[];
     export let defaultValue: number[];
-    export let warn: boolean = false;
+    export let warnings: string[] = [];
 
     const dispatch = createEventDispatcher();
 
@@ -35,11 +35,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
-<ConfigEntry {label} {subLabel} {value} {defaultValue} on:revert={revert}>
-    <input
-        type="text"
-        value={stringValue}
-        on:blur={update}
-        class:warn
-        class="form-control" />
+<ConfigEntry {label} {subLabel} {value} {defaultValue} {warnings} on:revert={revert}>
+    <input type="text" value={stringValue} on:blur={update} class="form-control" />
 </ConfigEntry>

ts/deckconfig/deckconfig-base.scss

@@ -7,6 +7,7 @@
 @import "ts/sass/bootstrap/button-group";
 @import "ts/sass/bootstrap/modal";
 @import "ts/sass/bootstrap/close";
+@import "ts/sass/bootstrap/alert";
 
 .night-mode {
     @include scrollbar.night-mode;