From fbbbf86894cda849d8942e0f3b8ee0753382badf Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Sun, 26 Jan 2025 18:45:07 +0000 Subject: [PATCH 01/13] Added: Padded percentage symbol --- ts/lib/components/SpinBox.svelte | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index cd431c2799..8999fc0d94 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -92,6 +92,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } } + let percentage_text = " %" let pressed = false; let timeout: number; let pressTimer: any; @@ -110,7 +111,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html on:blur={update} on:focusin={() => (focused = true)} on:focusout={() => (focused = false)} + style:padding-left={percentage && percentage_text == "%" ? "1.5em" : undefined} /> + {#if percentage} + {percentage_text} + {/if} {#if isDesktop()}
Date: Mon, 27 Jan 2025 12:27:24 +0000 Subject: [PATCH 02/13] Added: Floating percentage --- ftl/core/deck-config.ftl | 1 + ts/lib/components/SpinBox.svelte | 39 ++++++++++++++++++++++++++++---- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/ftl/core/deck-config.ftl b/ftl/core/deck-config.ftl index 1ed72fceb9..0690004e30 100644 --- a/ftl/core/deck-config.ftl +++ b/ftl/core/deck-config.ftl @@ -449,6 +449,7 @@ deck-config-percent-of-reviews = [one] { $pct }% of { $reviews } review *[other] { $pct }% of { $reviews } reviews } +deck-config-percent-input = { $pct }% deck-config-optimizing-preset = Optimizing preset { $current_count }/{ $total_count }... deck-config-fsrs-must-be-enabled = FSRS must be enabled first. deck-config-fsrs-params-optimal = The FSRS parameters currently appear to be optimal. diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 8999fc0d94..21b9c6130b 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -57,8 +57,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html return Math.max(0, displayedPlace); } + function toStringValue(value: number) { + return (value * multiplier).toFixed(decimalPlaces(step)); + } + let stringValue: string; - $: stringValue = (value * multiplier).toFixed(decimalPlaces(step)); + $: stringValue = toStringValue(value) function update(this: HTMLInputElement): void { updateValue(parseFloat(this.value) / multiplier); @@ -92,7 +96,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } } - let percentage_text = " %" + function updatePercentageText(value: string) { + // Separate the % from the padding text + percentage_text = tr.deckConfigPercentInput({pct: value}).replaceAll("%", "-%-").split("-") + } + + function onInput() { + updatePercentageText(input.value); + } + + // Invisible, used to shift the % sign the correct amount + let percentage_text: string[] + $: updatePercentageText(stringValue) + // If the input box should be moved right for the + $: percentage_padding = percentage && !percentage_text[0] ? "1.5em" : undefined + let pressed = false; let timeout: number; let pressTimer: any; @@ -109,12 +127,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html value={stringValue} bind:this={input} on:blur={update} + on:input={onInput} on:focusin={() => (focused = true)} on:focusout={() => (focused = false)} - style:padding-left={percentage && percentage_text == "%" ? "1.5em" : undefined} + style:padding-left={percentage_padding} /> {#if percentage} - {percentage_text} + + {#each percentage_text as str} + {#if str == "%"} + % + {:else} + + {/if} + {/each} + {/if} {#if isDesktop()} @@ -192,6 +219,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html white-space: pre; left: 0.5em; top: 2%; + } + + .invisible { + color: transparent; pointer-events: none; } From 20240749dde6ecba26f7e5e2670aa396f48ebd65 Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 12:46:33 +0000 Subject: [PATCH 03/13] ./check --- ts/lib/components/SpinBox.svelte | 35 +++++++++++++++++--------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 21b9c6130b..1c8831e18f 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -62,7 +62,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } let stringValue: string; - $: stringValue = toStringValue(value) + $: stringValue = toStringValue(value); function update(this: HTMLInputElement): void { updateValue(parseFloat(this.value) / multiplier); @@ -98,7 +98,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html function updatePercentageText(value: string) { // Separate the % from the padding text - percentage_text = tr.deckConfigPercentInput({pct: value}).replaceAll("%", "-%-").split("-") + percentage_text = tr + .deckConfigPercentInput({ pct: value }) + .replaceAll("%", "-%-") + .split("-"); } function onInput() { @@ -106,10 +109,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } // Invisible, used to shift the % sign the correct amount - let percentage_text: string[] - $: updatePercentageText(stringValue) - // If the input box should be moved right for the - $: percentage_padding = percentage && !percentage_text[0] ? "1.5em" : undefined + let percentage_text: string[]; + $: updatePercentageText(stringValue); + // If the input box should be moved right for the + $: percentage_padding = percentage && !percentage_text[0] ? "1.5em" : undefined; let pressed = false; let timeout: number; @@ -133,15 +136,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html style:padding-left={percentage_padding} /> {#if percentage} - - {#each percentage_text as str} - {#if str == "%"} - % - {:else} - - {/if} - {/each} - + + {#each percentage_text as str} + {#if str == "%"} + % + {:else} + + {/if} + {/each} + {/if} {#if isDesktop()} @@ -220,7 +223,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html left: 0.5em; top: 2%; } - + .invisible { color: transparent; pointer-events: none; From 4f6406029edd08f1a1e5df960c1ae61a0d2138a1 Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 12:49:59 +0000 Subject: [PATCH 04/13] half finished comment --- ts/lib/components/SpinBox.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 1c8831e18f..444157f83e 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -97,7 +97,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } function updatePercentageText(value: string) { - // Separate the % from the padding text + // Separate the % from the padding text. percentage_text = tr .deckConfigPercentInput({ pct: value }) .replaceAll("%", "-%-") @@ -108,10 +108,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html updatePercentageText(input.value); } - // Invisible, used to shift the % sign the correct amount + // Invisible, used to shift the % sign the correct amount. let percentage_text: string[]; $: updatePercentageText(stringValue); - // If the input box should be moved right for the + // If the input box should be moved right for leading percentage symbol. $: percentage_padding = percentage && !percentage_text[0] ? "1.5em" : undefined; let pressed = false; From d99c6cc97d31e396b35f00af94161c5a2a54e5bc Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 13:06:50 +0000 Subject: [PATCH 05/13] Removed: redundant toStringValue function --- ts/lib/components/SpinBox.svelte | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 444157f83e..8d2e3c5032 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -11,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import Icon from "./Icon.svelte"; import IconConstrain from "./IconConstrain.svelte"; + import type { GraphsResponse_TrueRetentionStats } from "@generated/anki/stats_pb"; export let value: number; export let step = 1; @@ -57,12 +58,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html return Math.max(0, displayedPlace); } - function toStringValue(value: number) { - return (value * multiplier).toFixed(decimalPlaces(step)); - } - let stringValue: string; - $: stringValue = toStringValue(value); + $: stringValue = (value * multiplier).toFixed(decimalPlaces(step)); function update(this: HTMLInputElement): void { updateValue(parseFloat(this.value) / multiplier); From 6a5d244039706576d27229edc2c03060a3a1c1fb Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 13:07:31 +0000 Subject: [PATCH 06/13] Removed: Accidental import --- ts/lib/components/SpinBox.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 8d2e3c5032..bfc09450e4 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -11,8 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import Icon from "./Icon.svelte"; import IconConstrain from "./IconConstrain.svelte"; - import type { GraphsResponse_TrueRetentionStats } from "@generated/anki/stats_pb"; - + export let value: number; export let step = 1; export let min = 1; From 7b9ee35ced552b667cf3b53d7dc4e9dd4e30c478 Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 13:10:42 +0000 Subject: [PATCH 07/13] Improved pointer-events:none --- ts/lib/components/SpinBox.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index bfc09450e4..151598853f 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -11,7 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import Icon from "./Icon.svelte"; import IconConstrain from "./IconConstrain.svelte"; - + export let value: number; export let step = 1; export let min = 1; @@ -135,7 +135,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {#each percentage_text as str} {#if str == "%"} - % + % {:else} {/if} @@ -215,6 +215,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html .suffix { position: absolute; + pointer-events: none; white-space: pre; left: 0.5em; top: 2%; From 2d5701d6d6244a966dc24dc1148f2b3c3c2e29cb Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 13:18:44 +0000 Subject: [PATCH 08/13] Improve percentage alignment --- ts/lib/components/SpinBox.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 151598853f..c219ea5b2c 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -218,7 +218,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html pointer-events: none; white-space: pre; left: 0.5em; - top: 2%; + top: 1px; } .invisible { From 4df82b09e225654ece4ac61f35aff09f375fe7e2 Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 13:21:41 +0000 Subject: [PATCH 09/13] Improve leftmost percentage alignment --- ts/lib/components/SpinBox.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index c219ea5b2c..3dfa383884 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -108,7 +108,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html let percentage_text: string[]; $: updatePercentageText(stringValue); // If the input box should be moved right for leading percentage symbol. - $: percentage_padding = percentage && !percentage_text[0] ? "1.5em" : undefined; + $: percentage_padding = percentage && !percentage_text[0] ? "2.2ch" : undefined; let pressed = false; let timeout: number; From 04fbf158e72cb70033a0692b67abd61c2d85e805 Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 13:27:09 +0000 Subject: [PATCH 10/13] Fix: Percentage sticks to left --- ts/lib/components/SpinBox.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 3dfa383884..5c3c8ba90f 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -40,7 +40,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html // enters '0', if the value gets clamped back to '1', Svelte will think the value hasn't // changed, and will skip the UI update. So we manually update the DOM to ensure it stays // in sync. - tick().then(() => (input.value = stringValue)); + tick().then(() => { + input.value = stringValue + updatePercentageText(stringValue) + }); } /** From 826411fecc433f4aa480a867d4aebbec3a7f0cae Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 27 Jan 2025 14:06:07 +0000 Subject: [PATCH 11/13] ./check --- ts/lib/components/SpinBox.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 5c3c8ba90f..f1a6faa4d0 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -41,8 +41,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html // changed, and will skip the UI update. So we manually update the DOM to ensure it stays // in sync. tick().then(() => { - input.value = stringValue - updatePercentageText(stringValue) + input.value = stringValue; + updatePercentageText(stringValue); }); } From 2532cf8d47bc8b22f42820b66933e0c81b2d7e29 Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 3 Feb 2025 11:29:30 +0000 Subject: [PATCH 12/13] Fix: IOS css --- ts/lib/components/SpinBox.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index f1a6faa4d0..6520f494b1 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -222,6 +222,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html white-space: pre; left: 0.5em; top: 1px; + + @supports (-webkit-touch-callout: none) { + /* CSS specific to iOS devices */ + top: 3.5px; + } } .invisible { From 3d5b06de368b55815f6e4e3a3ee40281b1743d6d Mon Sep 17 00:00:00 2001 From: Luc Mcgrady Date: Mon, 3 Feb 2025 11:31:54 +0000 Subject: [PATCH 13/13] ./check --- ts/lib/components/SpinBox.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/lib/components/SpinBox.svelte b/ts/lib/components/SpinBox.svelte index 6520f494b1..a6a1a0b206 100644 --- a/ts/lib/components/SpinBox.svelte +++ b/ts/lib/components/SpinBox.svelte @@ -224,7 +224,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html top: 1px; @supports (-webkit-touch-callout: none) { - /* CSS specific to iOS devices */ + /* CSS specific to iOS devices */ top: 3.5px; } }