move daily limits into separate section; add extra warning+tweak formatting

This commit is contained in:
Damien Elmes 2021-04-18 00:01:53 +10:00
parent 460ff354da
commit 6e3eff9f44
5 changed files with 71 additions and 36 deletions

View File

@ -3,6 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import DailyLimits from "./DailyLimits.svelte";
import NewOptions from "./NewOptions.svelte";
import ReviewOptions from "./ReviewOptions.svelte";
import LapseOptions from "./LapseOptions.svelte";
@ -19,6 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</style>
<div>
<DailyLimits {state} />
<NewOptions {state} />
<ReviewOptions {state} />
<LapseOptions {state} />

View File

@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.form-select {
display: inline-block;
width: 30em;
width: 70%;
}
.outer {
@ -35,11 +35,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
color: var(--text-fg);
background: var(--window-bg);
padding: 0.5em;
display: flex;
justify-content: center;
}
.inner {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 35em;
& > :global(*) {
padding-left: 0.5em;
@ -48,26 +51,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
.padding {
height: 2.5em;
height: 3em;
}
</style>
<div class="outer">
<div class="inner">
<div>
<div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
<div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
<!-- svelte-ignore a11y-no-onchange -->
<select class="form-select" on:change={myblur}>
{#each $configList as entry}
<option value={entry.idx} selected={entry.current}>
{configLabel(entry)}
</option>
{/each}
</select>
<!-- svelte-ignore a11y-no-onchange -->
<select class="form-select" on:change={myblur}>
{#each $configList as entry}
<option value={entry.idx} selected={entry.current}>
{configLabel(entry)}
</option>
{/each}
</select>
<OptionsDropdown {state} />
</div>
<OptionsDropdown {state} />
</div>
</div>

View File

@ -0,0 +1,53 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "anki/i18n";
import SpinBox from "./SpinBox.svelte";
import type { DeckConfigState } from "./lib";
export let state: DeckConfigState;
let config = state.currentConfig;
let defaults = state.defaults;
let parentLimits = state.parentLimits;
$: newCardsGreaterThanParent =
$config.newPerDay > $parentLimits.newCards
? `Daily limit will be capped to parent limit of ${$parentLimits.newCards}.`
: "";
$: reviewsGreaterThanParent =
$config.reviewsPerDay > $parentLimits.reviews
? `Daily limit will be capped to parent limit of ${$parentLimits.reviews}.`
: "";
$: reviewsTooLow =
$config.newPerDay * 10 > $config.reviewsPerDay
? `If adding ${
$config.newPerDay
} new cards each day, your review limit should be at least ${
$config.newPerDay * 10
}`
: "";
</script>
<div>
<h2>Daily Limits</h2>
<SpinBox
label={tr.schedulingNewCardsday()}
subLabel="The maximum number of new cards to introduce in a day."
min={0}
warnings={[newCardsGreaterThanParent]}
defaultValue={defaults.newPerDay}
bind:value={$config.newPerDay} />
<SpinBox
label={tr.schedulingMaximumReviewsday()}
subLabel="The maximum number of reviews cards to show in a day."
min={0}
warnings={[reviewsTooLow, reviewsGreaterThanParent]}
defaultValue={defaults.reviewsPerDay}
bind:value={$config.reviewsPerDay} />
</div>

View File

@ -14,18 +14,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let state: DeckConfigState;
let config = state.currentConfig;
let defaults = state.defaults;
let parentLimits = state.parentLimits;
const newOrderChoices = [
tr.schedulingShowNewCardsInOrderAdded(),
tr.schedulingShowNewCardsInRandomOrder(),
];
$: newCardsGreaterThanParent =
$config.newPerDay > $parentLimits.newCards
? `Daily limit will be capped to parent limit of ${$parentLimits.newCards}`
: "";
let stepsExceedGraduatingInterval: string;
$: {
const lastLearnStepInDays = $config.learnSteps.length
@ -60,14 +54,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
defaultValue={defaults.newCardOrder}
bind:value={$config.newCardOrder} />
<SpinBox
label={tr.schedulingNewCardsday()}
subLabel="The maximum number of new cards to introduce in a day."
min={0}
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."

View File

@ -17,13 +17,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div>
<h2>Reviews</h2>
<SpinBox
label={tr.schedulingMaximumReviewsday()}
subLabel="The maximum number of reviews cards to show in a day."
min={0}
defaultValue={defaults.reviewsPerDay}
bind:value={$config.reviewsPerDay} />
<SpinBoxFloat
label={tr.schedulingEasyBonus()}
subLabel="Extra multiplier applied when answering Easy on a review card."