Implement SpinBoxRow

This commit is contained in:
Henrik Giesel 2021-05-29 12:29:22 +02:00
parent 46b5f6ba65
commit bc6907ef8d
6 changed files with 67 additions and 62 deletions

View File

@ -3,15 +3,10 @@
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import marked from "marked";
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import Row from "./Row.svelte"; import SpinBoxRow from "./SpinBoxRow.svelte";
import Col from "./Col.svelte"; import Warning from "./Warning.svelte";
import HelpPopup from "./HelpPopup.svelte";
import Warnings from "./Warnings.svelte";
import SpinBox from "./SpinBox.svelte";
import RevertButton from "./RevertButton.svelte";
import type { DeckOptionsState } from "./lib"; import type { DeckOptionsState } from "./lib";
export let state: DeckOptionsState; export let state: DeckOptionsState;
@ -41,37 +36,23 @@
</script> </script>
<TitledContainer title={tr.deckConfigDailyLimits()}> <TitledContainer title={tr.deckConfigDailyLimits()}>
<Row> <SpinBoxRow
<Col size={7}> bind:value={$config.newPerDay}
{tr.schedulingNewCardsday()}<HelpPopup defaultValue={defaults.newPerDay}
html={marked(tr.deckConfigNewLimitTooltip() + v3Extra)} markdownTooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
/> >
</Col> {tr.schedulingNewCardsday()}
<Col size={5}> </SpinBoxRow>
<SpinBox min={0} bind:value={$config.newPerDay} />
<RevertButton
defaultValue={defaults.newPerDay}
bind:value={$config.newPerDay}
/>
</Col>
</Row>
<Warnings warnings={[newCardsGreaterThanParent]} /> <Warning warning={newCardsGreaterThanParent} />
<Row> <SpinBoxRow
<Col size={7}> bind:value={$config.reviewsPerDay}
{tr.schedulingMaximumReviewsday()}<HelpPopup defaultValue={defaults.reviewsPerDay}
html={marked(tr.deckConfigReviewLimitTooltip() + v3Extra)} markdownTooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
/> >
</Col> {tr.schedulingMaximumReviewsday()}
<Col size={5}> </SpinBoxRow>
<SpinBox min={0} bind:value={$config.reviewsPerDay} />
<RevertButton
defaultValue={defaults.reviewsPerDay}
bind:value={$config.reviewsPerDay}
/>
</Col>
</Row>
<Warnings warnings={[reviewsTooLow]} /> <Warning warning={reviewsTooLow} />
</TitledContainer> </TitledContainer>

View File

@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import Row from "./Row.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte"; import Col from "./Col.svelte";
import Warnings from "./Warnings.svelte"; import Warning from "./Warning.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import SpinBox from "./SpinBox.svelte"; import SpinBox from "./SpinBox.svelte";
import EnumSelector from "./EnumSelector.svelte"; import EnumSelector from "./EnumSelector.svelte";
@ -65,7 +65,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</Col> </Col>
</Row> </Row>
<Warnings warnings={[stepsExceedMinimumInterval]} /> <Warning warning={stepsExceedMinimumInterval} />
<Row> <Row>
<Col size={7}> <Col size={7}>

View File

@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import Row from "./Row.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte"; import Col from "./Col.svelte";
import Warnings from "./Warnings.svelte"; import Warning from "./Warning.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import SpinBox from "./SpinBox.svelte"; import SpinBox from "./SpinBox.svelte";
import StepsInput from "./StepsInput.svelte"; import StepsInput from "./StepsInput.svelte";
@ -73,7 +73,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</Col> </Col>
</Row> </Row>
<Warnings warnings={[stepsExceedGraduatingInterval]} /> <Warning warning={stepsExceedGraduatingInterval} />
<Row> <Row>
<Col size={7}> <Col size={7}>
@ -90,7 +90,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</Col> </Col>
</Row> </Row>
<Warnings warnings={[goodExceedsEasy]} /> <Warning warning={goodExceedsEasy} />
<Row> <Row>
<Col size={7}> <Col size={7}>

View File

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

View File

@ -0,0 +1,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 { slide } from "svelte/transition";
import Row from "./Row.svelte";
export let warning: string;
</script>
{#if warning}
<Row>
<div class="col-12 alert alert-warning mb-0" in:slide out:slide>
{warning}
</div>
</Row>
{/if}

View File

@ -1,20 +0,0 @@
<!--
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}