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

Update DailyLimits and NewOptions to new format

Browse source
This commit is contained in:
Henrik Giesel 2021-05-28 00:52:49 +02:00
parent 2a318f4695
commit d099b00918
12 changed files with 205 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ts/deckoptions/CheckBox.svelte
View file

@ -3,26 +3,12 @@ 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 lang="ts">
import ConfigEntry from "./ConfigEntry.svelte"; import RevertButton from "./RevertButton.svelte";
import HelpPopup from "./HelpPopup.svelte";
export let label: string; export let label: string;
export let value: boolean; export let value: boolean;
export let defaultValue: boolean; export let defaultValue: boolean;
export let tooltip = "";
export let id: string | undefined = undefined;
</script> </script>
<ConfigEntry {id} label="" wholeLine={true} bind:value {defaultValue}> <label> <input type="checkbox" bind:checked={value} /> {label} </label>
<div class="checkbox-outer"> <RevertButton bind:value {defaultValue} />
<label> <input type="checkbox" bind:checked={value} /> {label} </label>
{#if tooltip}
<HelpPopup html={tooltip} />
{/if}
</div>
</ConfigEntry>
<style lang="scss">
.checkbox-outer {
margin-top: 0.5em;
}
</style>

37
ts/deckoptions/ConfigEntry.svelte
View file

@ -3,41 +3,18 @@ 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 lang="ts">
import marked from "marked"; import Row from "./Row.svelte";
import { slide } from "svelte/transition";
import RevertButton from "./RevertButton.svelte";
import HelpPopup from "./HelpPopup.svelte";
export let label: string;
export let tooltip = "";
export let value: any;
export let defaultValue: any;
/// empty strings will be ignored
export let warnings: string[] = [];
export let wholeLine = false;
export let id: string | undefined = undefined; export let id: string | undefined = undefined;
export let wrap = false;
let renderedTooltip: string;
$: renderedTooltip = marked(tooltip);
</script> </script>
<div {id} class="row gx-0 gy-1 mt-0"> <Row {id}>
<div class="col-8 d-flex align-items-center"> <div class="col-8 d-flex align-items-center">
{label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if} <slot name="left" />
</div> </div>
<div class="col-sm-4 d-flex align-items-center"> <div class:col-4={!wrap} class:col-sm-4={wrap} class="d-flex align-items-center">
<slot /> <slot name="right" />
<RevertButton bind:value {defaultValue} on:revert />
</div> </div>
</div> </Row>
{#each warnings as warning}
{#if warning}
<div class="row gx-0 gy-1 mt-0">
<div class="col-11 alert alert-warning mb-0" in:slide out:slide>
{warning}
</div>
</div>
{/if}
{/each}

52
ts/deckoptions/DailyLimits.svelte
View file

@ -3,8 +3,12 @@
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 ConfigEntry from "./ConfigEntry.svelte";
import HelpPopup from "./HelpPopup.svelte";
import Warnings from "./Warnings.svelte";
import SpinBox from "./SpinBox.svelte"; import SpinBox from "./SpinBox.svelte";
import type { DeckOptionsState } from "./lib"; import type { DeckOptionsState } from "./lib";
@ -35,21 +39,37 @@
</script> </script>
<TitledContainer title={tr.deckConfigDailyLimits()}> <TitledContainer title={tr.deckConfigDailyLimits()}>
<SpinBox <ConfigEntry>
label={tr.schedulingNewCardsday()} <span slot="left">
tooltip={tr.deckConfigNewLimitTooltip() + v3Extra} {tr.schedulingNewCardsday()}<HelpPopup
min={0} html={marked(tr.deckConfigNewLimitTooltip() + v3Extra)}
warnings={[newCardsGreaterThanParent]} />
defaultValue={defaults.newPerDay} </span>
bind:value={$config.newPerDay} <svelte:fragment slot="right">
/> <SpinBox
min={0}
defaultValue={defaults.newPerDay}
bind:value={$config.newPerDay}
/>
</svelte:fragment>
</ConfigEntry>
<SpinBox <Warnings warnings={[newCardsGreaterThanParent]} />
label={tr.schedulingMaximumReviewsday()}
tooltip={tr.deckConfigReviewLimitTooltip() + v3Extra} <ConfigEntry>
min={0} <span slot="left">
warnings={[reviewsTooLow]} {tr.schedulingMaximumReviewsday()}<HelpPopup
defaultValue={defaults.reviewsPerDay} html={marked(tr.deckConfigReviewLimitTooltip() + v3Extra)}
bind:value={$config.reviewsPerDay} />
/> </span>
<svelte:fragment slot="right">
<SpinBox
min={0}
defaultValue={defaults.reviewsPerDay}
bind:value={$config.reviewsPerDay}
/>
</svelte:fragment>
</ConfigEntry>
<Warnings warnings={[reviewsTooLow]} />
</TitledContainer> </TitledContainer>

17
ts/deckoptions/EnumSelector.svelte
View file

@ -3,19 +3,16 @@ 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 lang="ts">
import ConfigEntry from "./ConfigEntry.svelte"; import RevertButton from "./RevertButton.svelte";
export let label: string;
export let choices: string[]; export let choices: string[];
export let value: number = 0; export let value: number = 0;
export let defaultValue: number; export let defaultValue: number;
export let tooltip = "";
</script> </script>
<ConfigEntry {label} {tooltip} wholeLine={true} bind:value {defaultValue}> <select bind:value class="form-select">
<select bind:value class="form-select"> {#each choices as choice, idx}
{#each choices as choice, idx} <option value={idx}>{choice}</option>
<option value={idx}>{choice}</option> {/each}
{/each} </select>
</select> <RevertButton bind:value {defaultValue} />
</ConfigEntry>

90
ts/deckoptions/NewOptions.svelte
View file

@ -4,7 +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 ConfigEntry from "./ConfigEntry.svelte";
import Warnings from "./Warnings.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";
import EnumSelector from "./EnumSelector.svelte"; import EnumSelector from "./EnumSelector.svelte";
@ -37,35 +41,65 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<TitledContainer title={tr.schedulingNewCards()}> <TitledContainer title={tr.schedulingNewCards()}>
<StepsInput <ConfigEntry>
label={tr.deckConfigLearningSteps()} <span slot="left">
tooltip={tr.deckConfigLearningStepsTooltip()} {tr.deckConfigLearningSteps()}<HelpPopup
defaultValue={defaults.learnSteps} html={marked(tr.deckConfigLearningStepsTooltip())}
value={$config.learnSteps} />
on:changed={(evt) => ($config.learnSteps = evt.detail.value)} </span>
/> <svelte:fragment slot="right">
<StepsInput
defaultValue={defaults.learnSteps}
value={$config.learnSteps}
on:changed={(evt) => ($config.learnSteps = evt.detail.value)}
/>
</svelte:fragment>
</ConfigEntry>
<SpinBox <ConfigEntry>
label={tr.schedulingGraduatingInterval()} <span slot="left">
tooltip={tr.deckConfigGraduatingIntervalTooltip()} {tr.schedulingGraduatingInterval()}<HelpPopup
warnings={[stepsExceedGraduatingInterval]} html={marked(tr.deckConfigGraduatingIntervalTooltip())}
defaultValue={defaults.graduatingIntervalGood} />
bind:value={$config.graduatingIntervalGood} </span>
/> <svelte:fragment slot="right">
<SpinBox
defaultValue={defaults.graduatingIntervalGood}
bind:value={$config.graduatingIntervalGood}
/>
</svelte:fragment>
</ConfigEntry>
<SpinBox <Warnings warnings={[stepsExceedGraduatingInterval]} />
label={tr.schedulingEasyInterval()}
tooltip={tr.deckConfigEasyIntervalTooltip()}
warnings={[goodExceedsEasy]}
defaultValue={defaults.graduatingIntervalEasy}
bind:value={$config.graduatingIntervalEasy}
/>
<EnumSelector <ConfigEntry>
label={tr.deckConfigNewInsertionOrder()} <span slot="left">
tooltip={tr.deckConfigNewInsertionOrderTooltip()} {tr.schedulingEasyInterval()}<HelpPopup
choices={newInsertOrderChoices} html={marked(tr.deckConfigEasyIntervalTooltip())}
defaultValue={defaults.newCardInsertOrder} />
bind:value={$config.newCardInsertOrder} </span>
/> <svelte:fragment slot="right">
<SpinBox
defaultValue={defaults.graduatingIntervalEasy}
bind:value={$config.graduatingIntervalEasy}
/>
</svelte:fragment>
</ConfigEntry>
<Warnings warnings={[goodExceedsEasy]} />
<ConfigEntry wrap={true}>
<span slot="left">
{tr.deckConfigNewInsertionOrder()}<HelpPopup
html={marked(tr.deckConfigNewInsertionOrderTooltip())}
/>
</span>
<svelte:fragment slot="right">
<EnumSelector
choices={newInsertOrderChoices}
defaultValue={defaults.newCardInsertOrder}
bind:value={$config.newCardInsertOrder}
/>
</svelte:fragment>
</ConfigEntry>
</TitledContainer> </TitledContainer>

19
ts/deckoptions/RevertButton.svelte
View file

@ -48,16 +48,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
{#if modified} <span
<span bind:this={ref}
bind:this={ref} class="badge"
class="badge" class:invisible={!modified}
title={tr.deckConfigRevertButtonTooltip()} title={tr.deckConfigRevertButtonTooltip()}
on:click={revert} on:click={revert}
> >
{@html revertIcon} {@html revertIcon}
</span> </span>
{/if}
<style lang="scss"> <style lang="scss">
span :global(svg) { span :global(svg) {

11
ts/deckoptions/Row.svelte Normal file
View file

@ -0,0 +1,11 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
export let id: string | undefined = undefined;
</script>
<div {id} class="row gx-0 gy-1 mt-0">
<slot />
</div>

24
ts/deckoptions/SpinBox.svelte
View file

@ -3,14 +3,11 @@ 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 lang="ts">
import ConfigEntry from "./ConfigEntry.svelte"; import RevertButton from "./RevertButton.svelte";
export let label: string;
export let tooltip: string;
export let value: number; export let value: number;
export let min = 1; export let min = 1;
export let max = 9999; export let max = 9999;
export let warnings: string[] = [];
export let defaultValue: number = 0; export let defaultValue: number = 0;
function checkMinMax() { function checkMinMax() {
@ -22,13 +19,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
<ConfigEntry {label} {tooltip} {warnings} bind:value {defaultValue}> <input
<input type="number"
type="number" {min}
{min} {max}
{max} bind:value
bind:value class="form-control"
class="form-control" on:blur={checkMinMax}
on:blur={checkMinMax} />
/> <RevertButton bind:value {defaultValue} />
</ConfigEntry>

25
ts/deckoptions/SpinBoxFloat.svelte
View file

@ -4,11 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import ConfigEntry from "./ConfigEntry.svelte"; import RevertButton from "./RevertButton.svelte";
import type { NumberValueEvent } from "./events"; import type { NumberValueEvent } from "./events";
export let label: string;
export let tooltip: string;
export let value: number; export let value: number;
export let defaultValue: number; export let defaultValue: number;
export let min = 1; export let min = 1;
@ -30,14 +28,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
<ConfigEntry {label} {tooltip} {value} {defaultValue} on:revert={revert}> <input
<input type="number"
type="number" class="form-control"
{min} {min}
{max} {max}
step="0.01" step="0.01"
value={stringValue} value={stringValue}
on:blur={update} on:blur={update}
class="form-control" />
/> <RevertButton bind:value {defaultValue} on:revert={revert} />
</ConfigEntry>

18
ts/deckoptions/StepsInput.svelte
View file

@ -5,14 +5,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import { stepsToString, stringToSteps } from "./steps"; import { stepsToString, stringToSteps } from "./steps";
import ConfigEntry from "./ConfigEntry.svelte"; import RevertButton from "./RevertButton.svelte";
import type { NumberValueEvent } from "./events"; import type { NumberValueEvent } from "./events";
export let label: string;
export let tooltip: string;
export let value: number[]; export let value: number[];
export let defaultValue: number[]; export let defaultValue: number[];
export let warnings: string[] = [];
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -29,14 +26,5 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
<ConfigEntry <input type="text" value={stringValue} on:blur={update} class="form-control" />
{label} <RevertButton bind:value {defaultValue} on:revert={revert} />
{tooltip}
{value}
{defaultValue}
{warnings}
wholeLine={value.length > 2}
on:revert={revert}
>
<input type="text" value={stringValue} on:blur={update} class="form-control" />
</ConfigEntry>

25
ts/deckoptions/Testo.svelte Normal file
View file

@ -0,0 +1,25 @@
<!--
import { slide } from "svelte/transition";
import RevertButton from "./RevertButton.svelte";
import HelpPopup from "./HelpPopup.svelte";
import marked from "marked";
export let label: string;
export let tooltip = "";
export let value: any;
export let defaultValue: any;
/// empty strings will be ignored
export let warnings: string[] = [];
export let wholeLine = false;
let renderedTooltip: string;
$: renderedTooltip = marked(tooltip);
/* {label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if} */
/* <slot /> */
/* <RevertButton bind:value {defaultValue} on:revert /> */
-->

20
ts/deckoptions/Warnings.svelte Normal file
View file

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