Implement CheckBoxRow and SpinBoxFloatRow

ts/deckoptions/AdvancedOptions.svelte

@@ -4,14 +4,9 @@ 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 Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import SpinBox from "./SpinBox.svelte";
-    import SpinBoxFloat from "./SpinBoxFloat.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -20,91 +15,62 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAdvancedTitle()}>
-    <Row>
-        <Col size={7}>
-            {tr.schedulingMaximumInterval()}
-            <HelpPopup html={marked(tr.deckConfigMaximumIntervalTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBox
+    <SpinBoxRow
+        bind:value={$config.maximumReviewInterval}
+        defaultValue={defaults.maximumReviewInterval}
         min={1}
         max={365 * 100}
-                bind:value={$config.maximumReviewInterval}
-            />
-            <RevertButton
-                defaultValue={defaults.maximumReviewInterval}
-                bind:value={$config.maximumReviewInterval}
-            />
-        </Col>
-    </Row>
+        markdownTooltip={tr.deckConfigMaximumIntervalTooltip()}
+    >
+        {tr.schedulingMaximumInterval()}
+    </SpinBoxRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingStartingEase()}
-            <HelpPopup html={marked(tr.deckConfigStartingEaseTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={1.31} max={5} bind:value={$config.initialEase} />
-            <RevertButton
-                defaultValue={defaults.initialEase}
+    <SpinBoxFloatRow
         bind:value={$config.initialEase}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.initialEase}
+        min={1.31}
+        max={5}
+        markdownTooltip={tr.deckConfigStartingEaseTooltip()}
+    >
+        {tr.schedulingStartingEase()}
+    </SpinBoxFloatRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingEasyBonus()}
-            <HelpPopup html={marked(tr.deckConfigEasyBonusTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={1} max={3} bind:value={$config.easyMultiplier} />
-            <RevertButton
-                defaultValue={defaults.easyMultiplier}
+    <SpinBoxFloatRow
         bind:value={$config.easyMultiplier}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.easyMultiplier}
+        min={1}
+        max={3}
+        markdownTooltip={tr.deckConfigEasyBonusTooltip()}
+    >
+        {tr.schedulingEasyBonus()}
+    </SpinBoxFloatRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingIntervalModifier()}
-            <HelpPopup html={marked(tr.deckConfigIntervalModifierTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={0.5} max={2} bind:value={$config.intervalMultiplier} />
-            <RevertButton
-                defaultValue={defaults.intervalMultiplier}
+    <SpinBoxFloatRow
         bind:value={$config.intervalMultiplier}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.intervalMultiplier}
+        min={0.5}
+        max={2}
+        markdownTooltip={tr.deckConfigIntervalModifierTooltip()}
+    >
+        {tr.schedulingIntervalModifier()}
+    </SpinBoxFloatRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingHardInterval()}
-            <HelpPopup html={marked(tr.deckConfigHardIntervalTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={0.5} max={1.3} bind:value={$config.hardMultiplier} />
-            <RevertButton
-                defaultValue={defaults.hardMultiplier}
+    <SpinBoxFloatRow
         bind:value={$config.hardMultiplier}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.hardMultiplier}
+        min={0.5}
+        max={1.3}
+        markdownTooltip={tr.deckConfigHardIntervalTooltip()}
+    >
+        {tr.schedulingHardInterval()}
+    </SpinBoxFloatRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingNewInterval()}
-            <HelpPopup html={marked(tr.deckConfigNewIntervalTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBoxFloat min={0} max={1} bind:value={$config.lapseMultiplier} />
-            <RevertButton
-                defaultValue={defaults.lapseMultiplier}
+    <SpinBoxFloatRow
         bind:value={$config.lapseMultiplier}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.lapseMultiplier}
+        max={1}
+        markdownTooltip={tr.deckConfigNewIntervalTooltip()}
+    >
+        {tr.schedulingNewInterval()}
+    </SpinBoxFloatRow>
 </TitledContainer>

ts/deckoptions/AudioOptions.svelte

@@ -4,13 +4,8 @@ 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 Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import CheckBox from "./CheckBox.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -19,34 +14,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigAudioTitle()}>
-    <Row>
-        <Col>
-            <CheckBox bind:value={$config.disableAutoplay}>
-                {tr.deckConfigDisableAutoplay()}
-            </CheckBox>
-        </Col>
-        <Col grow={false}>
-            <RevertButton
-                defaultValue={defaults.disableAutoplay}
+    <CheckBoxRow
         bind:value={$config.disableAutoplay}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.disableAutoplay}
+    >
+        {tr.deckConfigDisableAutoplay()}
+    </CheckBoxRow>
 
-    <Row>
-        <Col>
-            <CheckBox bind:value={$config.skipQuestionWhenReplayingAnswer}>
-                {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
-                <HelpPopup
-                    html={marked(tr.deckConfigAlwaysIncludeQuestionAudioTooltip())}
-                />
-            </CheckBox>
-        </Col>
-        <Col grow={false}>
-            <RevertButton
-                defaultValue={defaults.skipQuestionWhenReplayingAnswer}
+    <CheckBoxRow
         bind:value={$config.skipQuestionWhenReplayingAnswer}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.skipQuestionWhenReplayingAnswer}
+        markdownTooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
+    >
+        {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
+    </CheckBoxRow>
 </TitledContainer>

ts/deckoptions/CheckBoxRow.svelte

@@ -0,0 +1,30 @@
+<!--
+    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 Row from "./Row.svelte";
+    import Col from "./Col.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import CheckBox from "./CheckBox.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
+    export let value: boolean;
+    export let defaultValue: boolean;
+    export let markdownTooltip: string | undefined = undefined;
+</script>
+
+<Row>
+    <Col>
+        <CheckBox bind:value
+            ><slot />
+            {#if markdownTooltip}<HelpPopup
+                    html={marked(markdownTooltip)}
+                />{/if}</CheckBox
+        >
+    </Col>
+    <Col grow={false}>
+        <RevertButton bind:value {defaultValue} />
+    </Col>
+</Row>

ts/deckoptions/DisplayOrder.svelte

@@ -4,13 +4,8 @@ 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 Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import EnumSelector from "./EnumSelector.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import EnumSelectorRow from "./EnumSelectorRow.svelte";
 
     import type { DeckOptionsState } from "./lib";
     import { reviewMixChoices } from "./strings";
@@ -42,82 +37,48 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigOrderingTitle()}>
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigNewGatherPriority()}
-            <HelpPopup html={marked(tr.deckConfigNewGatherPriorityTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector
-                choices={newGatherPriorityChoices}
+    <EnumSelectorRow
         bind:value={$config.newCardGatherPriority}
-            />
-            <RevertButton
         defaultValue={defaults.newCardGatherPriority}
-                bind:value={$config.newCardGatherPriority}
-            />
-        </Col>
-    </Row>
+        choices={newGatherPriorityChoices}
+        markdownTooltip={tr.deckConfigNewGatherPriorityTooltip()}
+    >
+        {tr.deckConfigNewGatherPriority()}
+    </EnumSelectorRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigNewCardSortOrder()}
-            <HelpPopup html={marked(tr.deckConfigNewCardSortOrderTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector
-                choices={newSortOrderChoices}
+    <EnumSelectorRow
         bind:value={$config.newCardSortOrder}
-            />
-            <RevertButton
         defaultValue={defaults.newCardSortOrder}
-                bind:value={$config.newCardSortOrder}
-            />
-        </Col>
-    </Row>
+        choices={newSortOrderChoices}
+        markdownTooltip={tr.deckConfigNewCardSortOrderTooltip()}
+    >
+        {tr.deckConfigNewCardSortOrder()}
+    </EnumSelectorRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigNewReviewPriority()}
-            <HelpPopup html={marked(tr.deckConfigNewReviewPriorityTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector choices={reviewMixChoices()} bind:value={$config.newMix} />
-            <RevertButton defaultValue={defaults.newMix} bind:value={$config.newMix} />
-        </Col>
-    </Row>
-
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigInterdayStepPriority()}
-            <HelpPopup html={marked(tr.deckConfigInterdayStepPriorityTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector
+    <EnumSelectorRow
+        bind:value={$config.newMix}
+        defaultValue={defaults.newMix}
         choices={reviewMixChoices()}
-                bind:value={$config.interdayLearningMix}
-            />
-            <RevertButton
-                defaultValue={defaults.interdayLearningMix}
-                bind:value={$config.interdayLearningMix}
-            />
-        </Col>
-    </Row>
+        markdownTooltip={tr.deckConfigNewReviewPriorityTooltip()}
+    >
+        {tr.deckConfigNewReviewPriority()}
+    </EnumSelectorRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigReviewSortOrder()}
-            <HelpPopup html={marked(tr.deckConfigReviewSortOrderTooltip())} />
-        </Col>
-        <Col size={5}>
-            <EnumSelector
-                choices={reviewOrderChoices}
+    <EnumSelectorRow
+        bind:value={$config.interdayLearningMix}
+        defaultValue={defaults.interdayLearningMix}
+        choices={reviewMixChoices()}
+        markdownTooltip={tr.deckConfigInterdayStepPriorityTooltip()}
+    >
+        {tr.deckConfigInterdayStepPriority()}
+    </EnumSelectorRow>
+
+    <EnumSelectorRow
         bind:value={$config.reviewOrder}
-            />
-            <RevertButton
         defaultValue={defaults.reviewOrder}
-                bind:value={$config.reviewOrder}
-            />
-        </Col>
-    </Row>
+        choices={reviewOrderChoices}
+        markdownTooltip={tr.deckConfigReviewSortOrderTooltip()}
+    >
+        {tr.deckConfigReviewSortOrder()}
+    </EnumSelectorRow>
 </TitledContainer>>

ts/deckoptions/SpinBoxFloatRow.svelte

@@ -0,0 +1,28 @@
+<!--
+    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 Row from "./Row.svelte";
+    import Col from "./Col.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import SpinBoxFloat from "./SpinBoxFloat.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
+    export let value: any;
+    export let defaultValue: any;
+    export let min = 0;
+    export let max: number | undefined = undefined;
+    export let markdownTooltip: string;
+</script>
+
+<Row>
+    <Col size={7}>
+        <slot /><HelpPopup html={marked(markdownTooltip)} />
+    </Col>
+    <Col size={5}>
+        <SpinBoxFloat bind:value {min} {max} />
+        <RevertButton bind:value {defaultValue} />
+    </Col>
+</Row>

ts/deckoptions/SpinBoxRow.svelte

@@ -13,6 +13,7 @@
     export let value: any;
     export let defaultValue: any;
     export let min = 0;
+    export let max: number | undefined = undefined;
     export let markdownTooltip: string;
 </script>
 
@@ -21,7 +22,7 @@
         <slot /><HelpPopup html={marked(markdownTooltip)} />
     </Col>
     <Col size={5}>
-        <SpinBox bind:value {min} />
+        <SpinBox bind:value {min} {max} />
         <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>

ts/deckoptions/TimerOptions.svelte

@@ -4,14 +4,9 @@ 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 Row from "./Row.svelte";
-    import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import SpinBox from "./SpinBox.svelte";
-    import CheckBox from "./CheckBox.svelte";
-    import RevertButton from "./RevertButton.svelte";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import CheckBoxRow from "./CheckBoxRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -20,32 +15,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.deckConfigTimerTitle()}>
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigMaximumAnswerSecs()}
-            <HelpPopup html={marked(tr.deckConfigMaximumAnswerSecsTooltip())} />
-        </Col>
-        <Col size={5}>
-            <SpinBox min={30} max={600} bind:value={$config.capAnswerTimeToSecs} />
-            <RevertButton
-                defaultValue={defaults.capAnswerTimeToSecs}
+    <SpinBoxRow
         bind:value={$config.capAnswerTimeToSecs}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.capAnswerTimeToSecs}
+        min={30}
+        max={600}
+        markdownTooltip={tr.deckConfigMaximumAnswerSecsTooltip()}
+    >
+        {tr.deckConfigMaximumAnswerSecs()}
+    </SpinBoxRow>
 
-    <Row>
-        <Col>
-            <CheckBox bind:value={$config.showTimer}>
-                {tr.schedulingShowAnswerTimer()}
-                <HelpPopup html={marked(tr.deckConfigShowAnswerTimerTooltip())} />
-            </CheckBox>
-        </Col>
-        <Col grow={false}>
-            <RevertButton
-                defaultValue={defaults.showTimer}
+    <CheckBoxRow
         bind:value={$config.showTimer}
-            />
-        </Col>
-    </Row>
+        defaultValue={defaults.showTimer}
+        markdownTooltip={tr.deckConfigShowAnswerTimerTooltip()}
+    >
+        {tr.schedulingShowAnswerTimer()}
+    </CheckBoxRow>
 </TitledContainer>