GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Use Row and Col in favor of ConfigEntry

Browse source
This commit is contained in:
Henrik Giesel 2021-05-29 02:12:47 +02:00
parent 77ea7f5e6f
commit 2e921b95c6
10 changed files with 202 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
ts/deckoptions/AdvancedOptions.svelte
View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked"; import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import ConfigEntry from "./ConfigEntry.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import SpinBox from "./SpinBox.svelte"; import SpinBox from "./SpinBox.svelte";
import SpinBoxFloat from "./SpinBoxFloat.svelte"; import SpinBoxFloat from "./SpinBoxFloat.svelte";
@ -19,12 +20,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.deckConfigAdvancedTitle()}> <TitledContainer title={tr.deckConfigAdvancedTitle()}>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingMaximumInterval()} {tr.schedulingMaximumInterval()}
<HelpPopup html={marked(tr.deckConfigMaximumIntervalTooltip())} /> <HelpPopup html={marked(tr.deckConfigMaximumIntervalTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBox <SpinBox
min={1} min={1}
max={365 * 100} max={365 * 100}
@ -34,76 +35,76 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
defaultValue={defaults.maximumReviewInterval} defaultValue={defaults.maximumReviewInterval}
bind:value={$config.maximumReviewInterval} bind:value={$config.maximumReviewInterval}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingStartingEase()} {tr.schedulingStartingEase()}
<HelpPopup html={marked(tr.deckConfigStartingEaseTooltip())} /> <HelpPopup html={marked(tr.deckConfigStartingEaseTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBoxFloat min={1.31} max={5} bind:value={$config.initialEase} /> <SpinBoxFloat min={1.31} max={5} bind:value={$config.initialEase} />
<RevertButton <RevertButton
defaultValue={defaults.initialEase} defaultValue={defaults.initialEase}
bind:value={$config.initialEase} bind:value={$config.initialEase}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingEasyBonus()} {tr.schedulingEasyBonus()}
<HelpPopup html={marked(tr.deckConfigEasyBonusTooltip())} /> <HelpPopup html={marked(tr.deckConfigEasyBonusTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBoxFloat min={1} max={3} bind:value={$config.easyMultiplier} /> <SpinBoxFloat min={1} max={3} bind:value={$config.easyMultiplier} />
<RevertButton <RevertButton
defaultValue={defaults.easyMultiplier} defaultValue={defaults.easyMultiplier}
bind:value={$config.easyMultiplier} bind:value={$config.easyMultiplier}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingIntervalModifier()} {tr.schedulingIntervalModifier()}
<HelpPopup html={marked(tr.deckConfigIntervalModifierTooltip())} /> <HelpPopup html={marked(tr.deckConfigIntervalModifierTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBoxFloat min={0.5} max={2} bind:value={$config.intervalMultiplier} /> <SpinBoxFloat min={0.5} max={2} bind:value={$config.intervalMultiplier} />
<RevertButton <RevertButton
defaultValue={defaults.intervalMultiplier} defaultValue={defaults.intervalMultiplier}
bind:value={$config.intervalMultiplier} bind:value={$config.intervalMultiplier}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingHardInterval()} {tr.schedulingHardInterval()}
<HelpPopup html={marked(tr.deckConfigHardIntervalTooltip())} /> <HelpPopup html={marked(tr.deckConfigHardIntervalTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBoxFloat min={0.5} max={1.3} bind:value={$config.hardMultiplier} /> <SpinBoxFloat min={0.5} max={1.3} bind:value={$config.hardMultiplier} />
<RevertButton <RevertButton
defaultValue={defaults.hardMultiplier} defaultValue={defaults.hardMultiplier}
bind:value={$config.hardMultiplier} bind:value={$config.hardMultiplier}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingNewInterval()} {tr.schedulingNewInterval()}
<HelpPopup html={marked(tr.deckConfigNewIntervalTooltip())} /> <HelpPopup html={marked(tr.deckConfigNewIntervalTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBoxFloat min={0} max={1} bind:value={$config.lapseMultiplier} /> <SpinBoxFloat min={0} max={1} bind:value={$config.lapseMultiplier} />
<RevertButton <RevertButton
defaultValue={defaults.lapseMultiplier} defaultValue={defaults.lapseMultiplier}
bind:value={$config.lapseMultiplier} bind:value={$config.lapseMultiplier}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
</TitledContainer> </TitledContainer>

27
ts/deckoptions/AudioOptions.svelte
View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked"; import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import ConfigEntry from "./ConfigEntry.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import CheckBox from "./CheckBox.svelte"; import CheckBox from "./CheckBox.svelte";
import RevertButton from "./RevertButton.svelte"; import RevertButton from "./RevertButton.svelte";
@ -18,34 +19,34 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.deckConfigAudioTitle()}> <TitledContainer title={tr.deckConfigAudioTitle()}>
<ConfigEntry> <Row>
<svelte:fragment slot="left"> <Col>
<CheckBox bind:value={$config.disableAutoplay}> <CheckBox bind:value={$config.disableAutoplay}>
{tr.deckConfigDisableAutoplay()} {tr.deckConfigDisableAutoplay()}
</CheckBox> </CheckBox>
</svelte:fragment> </Col>
<svelte:fragment slot="right"> <Col grow={false}>
<RevertButton <RevertButton
defaultValue={defaults.disableAutoplay} defaultValue={defaults.disableAutoplay}
bind:value={$config.disableAutoplay} bind:value={$config.disableAutoplay}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<svelte:fragment slot="left"> <Col>
<CheckBox bind:value={$config.skipQuestionWhenReplayingAnswer}> <CheckBox bind:value={$config.skipQuestionWhenReplayingAnswer}>
{tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()} {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
<HelpPopup <HelpPopup
html={marked(tr.deckConfigAlwaysIncludeQuestionAudioTooltip())} html={marked(tr.deckConfigAlwaysIncludeQuestionAudioTooltip())}
/> />
</CheckBox> </CheckBox>
</svelte:fragment> </Col>
<svelte:fragment slot="right"> <Col grow={false}>
<RevertButton <RevertButton
defaultValue={defaults.skipQuestionWhenReplayingAnswer} defaultValue={defaults.skipQuestionWhenReplayingAnswer}
bind:value={$config.skipQuestionWhenReplayingAnswer} bind:value={$config.skipQuestionWhenReplayingAnswer}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
</TitledContainer> </TitledContainer>

27
ts/deckoptions/BuryOptions.svelte
View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked"; import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import ConfigEntry from "./ConfigEntry.svelte"; import Col from "./Col.svelte";
import Row from "./Row.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import CheckBox from "./CheckBox.svelte"; import CheckBox from "./CheckBox.svelte";
import RevertButton from "./RevertButton.svelte"; import RevertButton from "./RevertButton.svelte";
@ -18,33 +19,33 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.deckConfigBuryTitle()}> <TitledContainer title={tr.deckConfigBuryTitle()}>
<ConfigEntry> <Row>
<svelte:fragment slot="left"> <Col>
<CheckBox bind:value={$config.buryNew}> <CheckBox bind:value={$config.buryNew}>
{tr.deckConfigBuryNewSiblings()} {tr.deckConfigBuryNewSiblings()}
<HelpPopup html={marked(tr.deckConfigBuryTooltip())} /> <HelpPopup html={marked(tr.deckConfigBuryTooltip())} />
</CheckBox> </CheckBox>
</svelte:fragment> </Col>
<svelte:fragment slot="right"> <Col grow={false}>
<RevertButton <RevertButton
defaultValue={defaults.buryNew} defaultValue={defaults.buryNew}
bind:value={$config.buryNew} bind:value={$config.buryNew}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<svelte:fragment slot="left"> <Col>
<CheckBox bind:value={$config.buryReviews}> <CheckBox bind:value={$config.buryReviews}>
{tr.deckConfigBuryReviewSiblings()} {tr.deckConfigBuryReviewSiblings()}
<HelpPopup html={marked(tr.deckConfigBuryTooltip())} /> <HelpPopup html={marked(tr.deckConfigBuryTooltip())} />
</CheckBox> </CheckBox>
</svelte:fragment> </Col>
<svelte:fragment slot="right"> <Col grow={false}>
<RevertButton <RevertButton
defaultValue={defaults.buryReviews} defaultValue={defaults.buryReviews}
bind:value={$config.buryReviews} bind:value={$config.buryReviews}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
</TitledContainer> </TitledContainer>

23
ts/deckoptions/Col.svelte Normal file
View file

@ -0,0 +1,23 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
export let breakpoint: Breakpoint | undefined = undefined;
export let size: Size | undefined = undefined;
export let grow = true;
let colClass: string;
$: {
const breakpointComponent = breakpoint ? `-${breakpoint}` : "";
const sizeComponent = size ? `-${size}` : "";
colClass = "col" + breakpointComponent + sizeComponent;
}
</script>
<div class={`${colClass} d-flex align-items-center`} class:flex-grow-0={!grow}>
<slot />
</div>

30
ts/deckoptions/ConfigEntry.svelte
View file

@ -1,30 +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 Row from "./Row.svelte";
export let id: string | undefined = undefined;
export let wrap = false;
</script>
<Row {id}>
{#if $$slots.center}
<div class="col-7 d-flex align-items-center">
<slot name="left" />
</div>
<div class="col-4 d-flex align-items-center">
<slot name="center" />
</div>
{:else}
<div class="col-11 d-flex align-items-center">
<slot name="left" />
</div>
{/if}
<div class="col-1 d-flex align-items-center">
<slot name="right" />
</div>
</Row>

27
ts/deckoptions/DailyLimits.svelte
View file

@ -6,7 +6,8 @@
import marked from "marked"; 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 ConfigEntry from "./ConfigEntry.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import Warnings from "./Warnings.svelte"; import Warnings from "./Warnings.svelte";
import SpinBox from "./SpinBox.svelte"; import SpinBox from "./SpinBox.svelte";
@ -40,37 +41,37 @@
</script> </script>
<TitledContainer title={tr.deckConfigDailyLimits()}> <TitledContainer title={tr.deckConfigDailyLimits()}>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingNewCardsday()}<HelpPopup {tr.schedulingNewCardsday()}<HelpPopup
html={marked(tr.deckConfigNewLimitTooltip() + v3Extra)} html={marked(tr.deckConfigNewLimitTooltip() + v3Extra)}
/> />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBox min={0} bind:value={$config.newPerDay} /> <SpinBox min={0} bind:value={$config.newPerDay} />
<RevertButton <RevertButton
defaultValue={defaults.newPerDay} defaultValue={defaults.newPerDay}
bind:value={$config.newPerDay} bind:value={$config.newPerDay}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<Warnings warnings={[newCardsGreaterThanParent]} /> <Warnings warnings={[newCardsGreaterThanParent]} />
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingMaximumReviewsday()}<HelpPopup {tr.schedulingMaximumReviewsday()}<HelpPopup
html={marked(tr.deckConfigReviewLimitTooltip() + v3Extra)} html={marked(tr.deckConfigReviewLimitTooltip() + v3Extra)}
/> />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBox min={0} bind:value={$config.reviewsPerDay} /> <SpinBox min={0} bind:value={$config.reviewsPerDay} />
<RevertButton <RevertButton
defaultValue={defaults.reviewsPerDay} defaultValue={defaults.reviewsPerDay}
bind:value={$config.reviewsPerDay} bind:value={$config.reviewsPerDay}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<Warnings warnings={[reviewsTooLow]} /> <Warnings warnings={[reviewsTooLow]} />
</TitledContainer> </TitledContainer>

63
ts/deckoptions/DisplayOrder.svelte
View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked"; import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import ConfigEntry from "./ConfigEntry.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import EnumSelector from "./EnumSelector.svelte"; import EnumSelector from "./EnumSelector.svelte";
import RevertButton from "./RevertButton.svelte"; import RevertButton from "./RevertButton.svelte";
@ -41,12 +42,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.deckConfigOrderingTitle()}> <TitledContainer title={tr.deckConfigOrderingTitle()}>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigNewGatherPriority()} {tr.deckConfigNewGatherPriority()}
<HelpPopup html={marked(tr.deckConfigNewGatherPriorityTooltip())} /> <HelpPopup html={marked(tr.deckConfigNewGatherPriorityTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<EnumSelector <EnumSelector
choices={newGatherPriorityChoices} choices={newGatherPriorityChoices}
bind:value={$config.newCardGatherPriority} bind:value={$config.newCardGatherPriority}
@ -55,15 +56,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
defaultValue={defaults.newCardGatherPriority} defaultValue={defaults.newCardGatherPriority}
bind:value={$config.newCardGatherPriority} bind:value={$config.newCardGatherPriority}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigNewCardSortOrder()} {tr.deckConfigNewCardSortOrder()}
<HelpPopup html={marked(tr.deckConfigNewCardSortOrderTooltip())} /> <HelpPopup html={marked(tr.deckConfigNewCardSortOrderTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<EnumSelector <EnumSelector
choices={newSortOrderChoices} choices={newSortOrderChoices}
bind:value={$config.newCardSortOrder} bind:value={$config.newCardSortOrder}
@ -72,26 +73,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
defaultValue={defaults.newCardSortOrder} defaultValue={defaults.newCardSortOrder}
bind:value={$config.newCardSortOrder} bind:value={$config.newCardSortOrder}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigNewReviewPriority()} {tr.deckConfigNewReviewPriority()}
<HelpPopup html={marked(tr.deckConfigNewReviewPriorityTooltip())} /> <HelpPopup html={marked(tr.deckConfigNewReviewPriorityTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<EnumSelector choices={reviewMixChoices()} bind:value={$config.newMix} /> <EnumSelector choices={reviewMixChoices()} bind:value={$config.newMix} />
<RevertButton defaultValue={defaults.newMix} bind:value={$config.newMix} /> <RevertButton defaultValue={defaults.newMix} bind:value={$config.newMix} />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigInterdayStepPriority()} {tr.deckConfigInterdayStepPriority()}
<HelpPopup html={marked(tr.deckConfigInterdayStepPriorityTooltip())} /> <HelpPopup html={marked(tr.deckConfigInterdayStepPriorityTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<EnumSelector <EnumSelector
choices={reviewMixChoices()} choices={reviewMixChoices()}
bind:value={$config.interdayLearningMix} bind:value={$config.interdayLearningMix}
@ -100,15 +101,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
defaultValue={defaults.interdayLearningMix} defaultValue={defaults.interdayLearningMix}
bind:value={$config.interdayLearningMix} bind:value={$config.interdayLearningMix}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigReviewSortOrder()} {tr.deckConfigReviewSortOrder()}
<HelpPopup html={marked(tr.deckConfigReviewSortOrderTooltip())} /> <HelpPopup html={marked(tr.deckConfigReviewSortOrderTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<EnumSelector <EnumSelector
choices={reviewOrderChoices} choices={reviewOrderChoices}
bind:value={$config.reviewOrder} bind:value={$config.reviewOrder}
@ -117,6 +118,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
defaultValue={defaults.reviewOrder} defaultValue={defaults.reviewOrder}
bind:value={$config.reviewOrder} bind:value={$config.reviewOrder}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
</TitledContainer>> </TitledContainer>>

62
ts/deckoptions/LapseOptions.svelte
View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked"; import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import ConfigEntry from "./ConfigEntry.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte";
import Warnings from "./Warnings.svelte"; import Warnings from "./Warnings.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import SpinBox from "./SpinBox.svelte"; import SpinBox from "./SpinBox.svelte";
@ -34,74 +35,65 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.schedulingLapses()}> <TitledContainer title={tr.schedulingLapses()}>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigRelearningSteps()}<HelpPopup {tr.deckConfigRelearningSteps()}<HelpPopup
html={marked(tr.deckConfigRelearningStepsTooltip())} html={marked(tr.deckConfigRelearningStepsTooltip())}
/> />
</span> </Col>
<svelte:fragment slot="center"> <Col breakpoint={$config.relearnSteps.length > 2 ? "sm" : undefined} size={5}>
<StepsInput <StepsInput bind:value={$config.relearnSteps} />
value={$config.relearnSteps}
on:changed={(evt) => ($config.relearnSteps = evt.detail.value)}
/>
</svelte:fragment>
<svelte:fragment slot="right">
<RevertButton <RevertButton
defaultValue={defaults.relearnSteps} defaultValue={defaults.relearnSteps}
value={$config.relearnSteps} value={$config.relearnSteps}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingMinimumInterval()}<HelpPopup {tr.schedulingMinimumInterval()}<HelpPopup
html={marked(tr.deckConfigMinimumIntervalTooltip())} html={marked(tr.deckConfigMinimumIntervalTooltip())}
/> />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBox min={1} bind:value={$config.minimumLapseInterval} /> <SpinBox min={1} bind:value={$config.minimumLapseInterval} />
<RevertButton <RevertButton
defaultValue={defaults.minimumLapseInterval} defaultValue={defaults.minimumLapseInterval}
bind:value={$config.minimumLapseInterval} bind:value={$config.minimumLapseInterval}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<Warnings warnings={[stepsExceedMinimumInterval]} /> <Warnings warnings={[stepsExceedMinimumInterval]} />
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingLeechThreshold()}<HelpPopup {tr.schedulingLeechThreshold()}<HelpPopup
html={marked(tr.deckConfigLeechThresholdTooltip())} html={marked(tr.deckConfigLeechThresholdTooltip())}
/> />
</span> </Col>
<svelte:fragment slot="center"> <Col size={5}>
<SpinBox min={1} bind:value={$config.leechThreshold} /> <SpinBox min={1} bind:value={$config.leechThreshold} />
</svelte:fragment>
<svelte:fragment slot="right">
<RevertButton <RevertButton
defaultValue={defaults.leechThreshold} defaultValue={defaults.leechThreshold}
bind:value={$config.leechThreshold} bind:value={$config.leechThreshold}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingLeechAction()}<HelpPopup {tr.schedulingLeechAction()}<HelpPopup
html={marked(tr.deckConfigLeechActionTooltip())} html={marked(tr.deckConfigLeechActionTooltip())}
/> />
</span> </Col>
<svelte:fragment slot="center"> <Col size={5}>
<EnumSelector choices={leechChoices} bind:value={$config.leechAction} /> <EnumSelector choices={leechChoices} bind:value={$config.leechAction} />
</svelte:fragment>
<svelte:fragment slot="right">
<RevertButton <RevertButton
defaultValue={defaults.leechAction} defaultValue={defaults.leechAction}
bind:value={$config.leechAction} bind:value={$config.leechAction}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
</TitledContainer> </TitledContainer>

51
ts/deckoptions/NewOptions.svelte
View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked"; import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import ConfigEntry from "./ConfigEntry.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte";
import Warnings from "./Warnings.svelte"; import Warnings from "./Warnings.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import SpinBox from "./SpinBox.svelte"; import SpinBox from "./SpinBox.svelte";
@ -42,62 +43,62 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.schedulingNewCards()}> <TitledContainer title={tr.schedulingNewCards()}>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigLearningSteps()}<HelpPopup {tr.deckConfigLearningSteps()}<HelpPopup
html={marked(tr.deckConfigLearningStepsTooltip())} html={marked(tr.deckConfigLearningStepsTooltip())}
/> />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<StepsInput bind:value={$config.learnSteps} /> <StepsInput bind:value={$config.learnSteps} />
<RevertButton <RevertButton
defaultValue={defaults.learnSteps} defaultValue={defaults.learnSteps}
bind:value={$config.learnSteps} bind:value={$config.learnSteps}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingGraduatingInterval()}<HelpPopup {tr.schedulingGraduatingInterval()}<HelpPopup
html={marked(tr.deckConfigGraduatingIntervalTooltip())} html={marked(tr.deckConfigGraduatingIntervalTooltip())}
/> />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBox bind:value={$config.graduatingIntervalGood} /> <SpinBox bind:value={$config.graduatingIntervalGood} />
<RevertButton <RevertButton
defaultValue={defaults.graduatingIntervalGood} defaultValue={defaults.graduatingIntervalGood}
bind:value={$config.graduatingIntervalGood} bind:value={$config.graduatingIntervalGood}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<Warnings warnings={[stepsExceedGraduatingInterval]} /> <Warnings warnings={[stepsExceedGraduatingInterval]} />
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.schedulingEasyInterval()}<HelpPopup {tr.schedulingEasyInterval()}<HelpPopup
html={marked(tr.deckConfigEasyIntervalTooltip())} html={marked(tr.deckConfigEasyIntervalTooltip())}
/> />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBox bind:value={$config.graduatingIntervalEasy} /> <SpinBox bind:value={$config.graduatingIntervalEasy} />
<RevertButton <RevertButton
defaultValue={defaults.graduatingIntervalEasy} defaultValue={defaults.graduatingIntervalEasy}
bind:value={$config.graduatingIntervalEasy} bind:value={$config.graduatingIntervalEasy}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<Warnings warnings={[goodExceedsEasy]} /> <Warnings warnings={[goodExceedsEasy]} />
<ConfigEntry wrap={true}> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigNewInsertionOrder()}<HelpPopup {tr.deckConfigNewInsertionOrder()}<HelpPopup
html={marked(tr.deckConfigNewInsertionOrderTooltip())} html={marked(tr.deckConfigNewInsertionOrderTooltip())}
/> />
</span> </Col>
<svelte:fragment slot="right"> <Col breakpoint={"md"} size={5}>
<EnumSelector <EnumSelector
choices={newInsertOrderChoices} choices={newInsertOrderChoices}
bind:value={$config.newCardInsertOrder} bind:value={$config.newCardInsertOrder}
@ -106,6 +107,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
defaultValue={defaults.newCardInsertOrder} defaultValue={defaults.newCardInsertOrder}
bind:value={$config.newCardInsertOrder} bind:value={$config.newCardInsertOrder}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
</TitledContainer> </TitledContainer>

27
ts/deckoptions/TimerOptions.svelte
View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked"; import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import ConfigEntry from "./ConfigEntry.svelte"; import Row from "./Row.svelte";
import Col from "./Col.svelte";
import HelpPopup from "./HelpPopup.svelte"; import HelpPopup from "./HelpPopup.svelte";
import SpinBox from "./SpinBox.svelte"; import SpinBox from "./SpinBox.svelte";
import CheckBox from "./CheckBox.svelte"; import CheckBox from "./CheckBox.svelte";
@ -19,32 +20,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.deckConfigTimerTitle()}> <TitledContainer title={tr.deckConfigTimerTitle()}>
<ConfigEntry> <Row>
<span slot="left"> <Col size={7}>
{tr.deckConfigMaximumAnswerSecs()} {tr.deckConfigMaximumAnswerSecs()}
<HelpPopup html={marked(tr.deckConfigMaximumAnswerSecsTooltip())} /> <HelpPopup html={marked(tr.deckConfigMaximumAnswerSecsTooltip())} />
</span> </Col>
<svelte:fragment slot="right"> <Col size={5}>
<SpinBox min={30} max={600} bind:value={$config.capAnswerTimeToSecs} /> <SpinBox min={30} max={600} bind:value={$config.capAnswerTimeToSecs} />
<RevertButton <RevertButton
defaultValue={defaults.capAnswerTimeToSecs} defaultValue={defaults.capAnswerTimeToSecs}
bind:value={$config.capAnswerTimeToSecs} bind:value={$config.capAnswerTimeToSecs}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
<ConfigEntry> <Row>
<svelte:fragment slot="left"> <Col>
<CheckBox bind:value={$config.showTimer}> <CheckBox bind:value={$config.showTimer}>
{tr.schedulingShowAnswerTimer()} {tr.schedulingShowAnswerTimer()}
<HelpPopup html={marked(tr.deckConfigShowAnswerTimerTooltip())} /> <HelpPopup html={marked(tr.deckConfigShowAnswerTimerTooltip())} />
</CheckBox> </CheckBox>
</svelte:fragment> </Col>
<svelte:fragment slot="right"> <Col grow={false}>
<RevertButton <RevertButton
defaultValue={defaults.showTimer} defaultValue={defaults.showTimer}
bind:value={$config.showTimer} bind:value={$config.showTimer}
/> />
</svelte:fragment> </Col>
</ConfigEntry> </Row>
</TitledContainer> </TitledContainer>