langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement EnumSelectorRow and StepsInputRow

Browse Source
This commit is contained in:
Henrik Giesel 2021-05-29 13:06:17 +02:00
parent bc6907ef8d
commit 5fa850703f
6 changed files with 132 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ts/deckoptions/Col.svelte
View File

@ -2,10 +2,12 @@
Copyright: Ankitects Pty Ltd and contributors Copyright: Ankitects Pty Ltd and contributors
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 context="module" lang="ts">
type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; export type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl"; export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
</script>
<script lang="ts">
export let breakpoint: Breakpoint | undefined = undefined; export let breakpoint: Breakpoint | undefined = undefined;
export let size: Size | undefined = undefined; export let size: Size | undefined = undefined;
export let grow = true; export let grow = true;

30
ts/deckoptions/EnumSelectorRow.svelte Normal file
View File

@ -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 type { Breakpoint } from "Col.svelte";
import marked from "marked";
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";
export let value: number;
export let defaultValue: number;
export let breakpoint: Breakpoint = "md";
export let choices: string[];
export let markdownTooltip: string;
</script>
<Row>
<Col size={7}>
<slot /><HelpPopup html={marked(markdownTooltip)} />
</Col>
<Col {breakpoint} size={5}>
<EnumSelector bind:value {choices} />
<RevertButton bind:value {defaultValue} />
</Col>
</Row>

99
ts/deckoptions/LapseOptions.svelte
View File

@ -4,16 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import Row from "./Row.svelte"; import StepsInputRow from "./StepsInputRow.svelte";
import Col from "./Col.svelte"; import SpinBoxRow from "./SpinBoxRow.svelte";
import EnumSelectorRow from "./EnumSelectorRow.svelte";
import Warning from "./Warning.svelte"; import Warning from "./Warning.svelte";
import HelpPopup from "./HelpPopup.svelte";
import SpinBox from "./SpinBox.svelte";
import EnumSelector from "./EnumSelector.svelte";
import StepsInput from "./StepsInput.svelte";
import RevertButton from "./RevertButton.svelte";
import type { DeckOptionsState } from "./lib"; import type { DeckOptionsState } from "./lib";
export let state: DeckOptionsState; export let state: DeckOptionsState;
@ -35,65 +30,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.schedulingLapses()}> <TitledContainer title={tr.schedulingLapses()}>
<Row> <StepsInputRow
<Col size={7}> bind:value={$config.relearnSteps}
{tr.deckConfigRelearningSteps()}<HelpPopup defaultValue={defaults.relearnSteps}
html={marked(tr.deckConfigRelearningStepsTooltip())} markdownTooltip={tr.deckConfigRelearningStepsTooltip()}
/> >
</Col> {tr.deckConfigRelearningSteps()}
<Col breakpoint={$config.relearnSteps.length > 2 ? "sm" : undefined} size={5}> </StepsInputRow>
<StepsInput bind:value={$config.relearnSteps} />
<RevertButton
defaultValue={defaults.relearnSteps}
value={$config.relearnSteps}
/>
</Col>
</Row>
<Row> <SpinBoxRow
<Col size={7}> bind:value={$config.minimumLapseInterval}
{tr.schedulingMinimumInterval()}<HelpPopup defaultValue={defaults.minimumLapseInterval}
html={marked(tr.deckConfigMinimumIntervalTooltip())} min={1}
/> markdownTooltip={tr.deckConfigMinimumIntervalTooltip()}
</Col> >
<Col size={5}> {tr.schedulingMinimumInterval()}
<SpinBox min={1} bind:value={$config.minimumLapseInterval} /> </SpinBoxRow>
<RevertButton
defaultValue={defaults.minimumLapseInterval}
bind:value={$config.minimumLapseInterval}
/>
</Col>
</Row>
<Warning warning={stepsExceedMinimumInterval} /> <Warning warning={stepsExceedMinimumInterval} />
<Row> <SpinBoxRow
<Col size={7}> bind:value={$config.leechThreshold}
{tr.schedulingLeechThreshold()}<HelpPopup defaultValue={defaults.leechThreshold}
html={marked(tr.deckConfigLeechThresholdTooltip())} min={1}
/> markdownTooltip={tr.deckConfigLeechThresholdTooltip()}
</Col> >
<Col size={5}> {tr.schedulingLeechThreshold()}
<SpinBox min={1} bind:value={$config.leechThreshold} /> </SpinBoxRow>
<RevertButton
defaultValue={defaults.leechThreshold}
bind:value={$config.leechThreshold}
/>
</Col>
</Row>
<Row> <EnumSelectorRow
<Col size={7}> bind:value={$config.leechAction}
{tr.schedulingLeechAction()}<HelpPopup defaultValue={defaults.leechAction}
html={marked(tr.deckConfigLeechActionTooltip())} choices={leechChoices}
/> breakpoint="sm"
</Col> markdownTooltip={tr.deckConfigLeechActionTooltip()}
<Col breakpoint="sm" size={5}> >
<EnumSelector choices={leechChoices} bind:value={$config.leechAction} /> {tr.schedulingLeechAction()}
<RevertButton </EnumSelectorRow>
defaultValue={defaults.leechAction}
bind:value={$config.leechAction}
/>
</Col>
</Row>
</TitledContainer> </TitledContainer>

100
ts/deckoptions/NewOptions.svelte
View File

@ -4,16 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import * as tr from "lib/i18n"; import * as tr from "lib/i18n";
import marked from "marked";
import TitledContainer from "./TitledContainer.svelte"; import TitledContainer from "./TitledContainer.svelte";
import Row from "./Row.svelte"; import StepsInputRow from "./StepsInputRow.svelte";
import Col from "./Col.svelte"; import SpinBoxRow from "./SpinBoxRow.svelte";
import EnumSelectorRow from "./EnumSelectorRow.svelte";
import Warning from "./Warning.svelte"; import Warning from "./Warning.svelte";
import HelpPopup from "./HelpPopup.svelte";
import SpinBox from "./SpinBox.svelte";
import StepsInput from "./StepsInput.svelte";
import EnumSelector from "./EnumSelector.svelte";
import RevertButton from "./RevertButton.svelte";
import type { DeckOptionsState } from "./lib"; import type { DeckOptionsState } from "./lib";
export let state: DeckOptionsState; export let state: DeckOptionsState;
@ -43,70 +38,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.schedulingNewCards()}> <TitledContainer title={tr.schedulingNewCards()}>
<Row> <StepsInputRow
<Col size={7}> bind:value={$config.learnSteps}
{tr.deckConfigLearningSteps()}<HelpPopup defaultValue={defaults.learnSteps}
html={marked(tr.deckConfigLearningStepsTooltip())} markdownTooltip={tr.deckConfigLearningStepsTooltip()}
/> >
</Col> {tr.deckConfigLearningSteps()}
<Col size={5}> </StepsInputRow>
<StepsInput bind:value={$config.learnSteps} />
<RevertButton
defaultValue={defaults.learnSteps}
bind:value={$config.learnSteps}
/>
</Col>
</Row>
<Row> <SpinBoxRow
<Col size={7}> bind:value={$config.graduatingIntervalGood}
{tr.schedulingGraduatingInterval()}<HelpPopup defaultValue={defaults.graduatingIntervalGood}
html={marked(tr.deckConfigGraduatingIntervalTooltip())} markdownTooltip={tr.deckConfigGraduatingIntervalTooltip()}
/> >
</Col> {tr.schedulingGraduatingInterval()}
<Col size={5}> </SpinBoxRow>
<SpinBox bind:value={$config.graduatingIntervalGood} />
<RevertButton
defaultValue={defaults.graduatingIntervalGood}
bind:value={$config.graduatingIntervalGood}
/>
</Col>
</Row>
<Warning warning={stepsExceedGraduatingInterval} /> <Warning warning={stepsExceedGraduatingInterval} />
<Row> <SpinBoxRow
<Col size={7}> bind:value={$config.graduatingIntervalEasy}
{tr.schedulingEasyInterval()}<HelpPopup defaultValue={defaults.graduatingIntervalEasy}
html={marked(tr.deckConfigEasyIntervalTooltip())} markdownTooltip={tr.deckConfigEasyIntervalTooltip()}
/> >
</Col> {tr.schedulingEasyInterval()}
<Col size={5}> </SpinBoxRow>
<SpinBox bind:value={$config.graduatingIntervalEasy} />
<RevertButton
defaultValue={defaults.graduatingIntervalEasy}
bind:value={$config.graduatingIntervalEasy}
/>
</Col>
</Row>
<Warning warning={goodExceedsEasy} /> <Warning warning={goodExceedsEasy} />
<Row> <EnumSelectorRow
<Col size={7}> bind:value={$config.newCardInsertOrder}
{tr.deckConfigNewInsertionOrder()}<HelpPopup defaultValue={defaults.newCardInsertOrder}
html={marked(tr.deckConfigNewInsertionOrderTooltip())} choices={newInsertOrderChoices}
/> breakpoint={"md"}
</Col> markdownTooltip={tr.deckConfigNewInsertionOrderTooltip()}
<Col breakpoint={"md"} size={5}> >
<EnumSelector {tr.deckConfigNewInsertionOrder()}
choices={newInsertOrderChoices} </EnumSelectorRow>
bind:value={$config.newCardInsertOrder}
/>
<RevertButton
defaultValue={defaults.newCardInsertOrder}
bind:value={$config.newCardInsertOrder}
/>
</Col>
</Row>
</TitledContainer> </TitledContainer>

5
ts/deckoptions/SpinBoxRow.svelte
View File

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

26
ts/deckoptions/StepsInputRow.svelte Normal file
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 StepsInput from "./StepsInput.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}>
<StepsInput bind:value />
<RevertButton bind:value {defaultValue} />
</Col>
</Row>