ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Only save the themeColor setting on end of input (#5618)

Browse Source 
* Only save the themeColor setting on end of input

Closes #4463 by making this input sliders less eager to write to disk,
which was gumming up the works.

* fmt
This commit is contained in:
Frank Noirot
2025-03-04 14:11:38 -05:00
committed by GitHub
parent 4b0f67e604
commit 1b958ee29f
1 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/lib/settings/initialSettings.tsx
View File

@ -154,25 +154,42 @@ export function createSettings() {
defaultValue: '264.5',
description: 'The hue of the primary theme color for the app',
validate: (v) => Number(v) >= 0 && Number(v) < 360,
Component: ({ value, updateValue }) => (
<div className="flex item-center gap-4 px-2 m-0 py-0">
<div
className="w-4 h-4 rounded-full bg-primary border border-solid border-chalkboard-100 dark:border-chalkboard-30"
style={{
backgroundColor: `oklch(var(--primary-lightness) var(--primary-chroma) ${value})`,
}}
/>
<input
type="range"
onChange={(e) => updateValue(e.currentTarget.value)}
value={value}
min={0}
max={259}
step={1}
className="block flex-1"
/>
</div>
),
Component: ({ value, updateValue }) => {
const preview = (e: React.SyntheticEvent) =>
e.isTrusted &&
'value' in e.currentTarget &&
document.documentElement.style.setProperty(
`--primary-hue`,
String(e.currentTarget.value)
)
const save = (e: React.SyntheticEvent) =>
e.isTrusted &&
'value' in e.currentTarget &&
e.currentTarget.value &&
updateValue(String(e.currentTarget.value))
return (
<div className="flex item-center gap-4 px-2 m-0 py-0">
<div
className="w-4 h-4 rounded-full bg-primary border border-solid border-chalkboard-100 dark:border-chalkboard-30"
style={{
backgroundColor: `oklch(var(--primary-lightness) var(--primary-chroma) var(--primary-hue))`,
}}
/>
<input
type="range"
onInput={preview}
onMouseUp={save}
onKeyUp={save}
onPointerUp={save}
defaultValue={value}
min={0}
max={259}
step={1}
className="block flex-1"
/>
</div>
)
},
}),
/**
* Whether to show the debug panel, which lets you see