From 6c37d5fc7030a8cac9cc6f037ab64ab479da9328 Mon Sep 17 00:00:00 2001 From: Arthur Milchior Date: Sat, 25 Jan 2025 08:17:02 +0100 Subject: [PATCH] Add percentage to FSRS spinner (#3679) * Add percentage to FSRS spinner This commit add a percentage option in SpinBox and SpinBoxFloatRow, set to False by default. If it's true, a percent symbol is added at the end of the line before the increase/decrease button. While the value is represented as a percentage without decimal places, the internal representation is not changed. Which mean that a multiplier must used to compute the string value, indicate to the input field the min, max and step, and when updating the result. * Remove unsightly percentage sign, and update historical retention too https://github.com/ankitects/anki/pull/3679#issuecomment-2579636981 --------- Co-authored-by: Damien Elmes --- ftl/core/deck-config.ftl | 2 +- ts/lib/components/SpinBox.svelte | 26 ++++++++++++++----- ts/routes/deck-options/AdvancedOptions.svelte | 1 + ts/routes/deck-options/FsrsOptions.svelte | 1 + ts/routes/deck-options/SpinBoxFloatRow.svelte | 3 ++- 5 files changed, 25 insertions(+), 8 deletions(-) diff --git a/ftl/core/deck-config.ftl b/ftl/core/deck-config.ftl index 13a73f6f4..bb79800e0 100644 --- a/ftl/core/deck-config.ftl +++ b/ftl/core/deck-config.ftl @@ -385,7 +385,7 @@ deck-config-fsrs-tooltip = more material in the same amount of time. This setting is shared by all presets. deck-config-desired-retention-tooltip = - The default value of 0.9 schedules cards so that you have a 90% chance of remembering them when + By default, Anki schedules cards so that you have a 90% chance of remembering them when they come up for review again. If you increase this value, Anki will show cards more frequently to increase the chances of you remembering them. If you decrease the value, Anki will show cards less frequently, and you will forget more of them. Be conservative when adjusting this - higher diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 2cda628e8..cd431c279 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -16,9 +16,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let step = 1; export let min = 1; export let max = 9999; + /** + * Whether the value is shown as a percentage to the user. + * It's saved as a proportion. + */ + export let percentage = false; let input: HTMLInputElement; let focused = false; + let multiplier: number; + $: multiplier = percentage ? 100 : 1; /** Set value to a new number, clamping it to a valid range, and leaving it unchanged if `newValue` is NaN. */ @@ -36,18 +43,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html tick().then(() => (input.value = stringValue)); } + /** + * The number of decimal places to record. May be different than the number of decimal places displayed for percentages. + * @param value The size of the step. + */ function decimalPlaces(value: number) { if (Math.floor(value) === value) { + // If the step is an integer, do not show decimal places. return 0; } - return value.toString().split(".")[1].length || 0; + const places = value.toString().split(".")[1].length || 0; + const displayedPlace = percentage ? places - 2 : places; + return Math.max(0, displayedPlace); } let stringValue: string; - $: stringValue = value.toFixed(decimalPlaces(step)); + $: stringValue = (value * multiplier).toFixed(decimalPlaces(step)); function update(this: HTMLInputElement): void { - updateValue(parseFloat(this.value)); + updateValue(parseFloat(this.value) / multiplier); } function handleWheel(event: WheelEvent) { @@ -88,9 +102,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html type="number" pattern="[0-9]*" inputmode="numeric" - {min} - {max} - {step} + min={min * multiplier} + max={max * multiplier} + step={step * multiplier} value={stringValue} bind:this={input} on:blur={update} diff --git a/ts/routes/deck-options/AdvancedOptions.svelte b/ts/routes/deck-options/AdvancedOptions.svelte index 5662c48a0..a505e5e06 100644 --- a/ts/routes/deck-options/AdvancedOptions.svelte +++ b/ts/routes/deck-options/AdvancedOptions.svelte @@ -212,6 +212,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html defaultValue={defaults.historicalRetention} min={0.5} max={1.0} + percentage={true} > diff --git a/ts/routes/deck-options/FsrsOptions.svelte b/ts/routes/deck-options/FsrsOptions.svelte index fb4c67487..921319ca4 100644 --- a/ts/routes/deck-options/FsrsOptions.svelte +++ b/ts/routes/deck-options/FsrsOptions.svelte @@ -382,6 +382,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html defaultValue={defaults.desiredRetention} min={0.7} max={0.99} + percentage={true} > openHelpModal("desiredRetention")}> {tr.deckConfigDesiredRetention()} diff --git a/ts/routes/deck-options/SpinBoxFloatRow.svelte b/ts/routes/deck-options/SpinBoxFloatRow.svelte index 15ad95c3c..f431c0df1 100644 --- a/ts/routes/deck-options/SpinBoxFloatRow.svelte +++ b/ts/routes/deck-options/SpinBoxFloatRow.svelte @@ -14,6 +14,7 @@ export let min = 0; export let max = 9999; export let step = 0.01; + export let percentage = false; @@ -22,7 +23,7 @@ - +