Improved Settings + Labeling

This commit is contained in:
2025-08-13 21:32:06 +10:00
parent 0b9c27eaaf
commit 82dfb39ff5
2 changed files with 23 additions and 31 deletions
+21 -31
View File
@@ -83,6 +83,25 @@ export const Settings = () => {
const hexColorRegex = /^#([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})$/i; const hexColorRegex = /^#([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4})$/i;
const applyCustomInputColor = (raw: string, updateInput: boolean): void => {
const trimmed = raw.trim();
if (!hexColorRegex.test(trimmed)) return;
if (mode === "single") {
const next = normalizeToRGB(trimmed);
setSingleColor((settings.singleColor = next));
if (updateInput) setCustomInput(next);
} else if (mode === "gradient-experimental") {
const norm = normalizeToRGB(trimmed);
if (activeEndpoint === 'end') {
setGradientEnd((settings.gradientEnd = norm));
} else {
setGradientStart((settings.gradientStart = norm));
}
if (updateInput) setCustomInput(norm);
}
requestApply();
};
const addCustomColor = () => { const addCustomColor = () => {
const trimmed = customInput.trim(); const trimmed = customInput.trim();
if ( if (
@@ -317,23 +336,7 @@ export const Settings = () => {
onChange={(e) => setCustomInput(e.target.value)} onChange={(e) => setCustomInput(e.target.value)}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
const trimmed = customInput.trim(); applyCustomInputColor(customInput, true);
if (hexColorRegex.test(trimmed)) {
if (mode === "single") {
const next = normalizeToRGB(trimmed);
setSingleColor((settings.singleColor = next));
setCustomInput(next);
} else if (mode === "gradient-experimental") {
const norm = normalizeToRGB(trimmed);
if (activeEndpoint === 'end') {
setGradientEnd((settings.gradientEnd = norm));
} else {
setGradientStart((settings.gradientStart = norm));
}
setCustomInput(norm);
}
requestApply();
}
addCustomColor(); addCustomColor();
} }
}} }}
@@ -352,20 +355,7 @@ export const Settings = () => {
/> />
<button <button
onClick={() => { onClick={() => {
const trimmed = customInput.trim(); applyCustomInputColor(customInput, false);
if (hexColorRegex.test(trimmed)) {
if (mode === "single") {
setSingleColor((settings.singleColor = normalizeToRGB(trimmed)));
} else if (mode === "gradient-experimental") {
const norm = normalizeToRGB(trimmed);
if (activeEndpoint === 'end') {
setGradientEnd((settings.gradientEnd = norm));
} else {
setGradientStart((settings.gradientStart = norm));
}
}
requestApply();
}
addCustomColor(); addCustomColor();
}} }}
style={{ style={{
@@ -79,6 +79,8 @@ function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
const b = parseInt(v.slice(5, 7), 16); const b = parseInt(v.slice(5, 7), 16);
return { r, g, b }; return { r, g, b };
} }
// 8-digit hex expects #AARRGGBB. Indices 1-3 are the alpha byte (ignored here),
// so r/g/b are extracted from v.slice(3,5), v.slice(5,7), v.slice(7,9) respectively.
if (/^#([0-9a-fA-F]{8})$/.test(v)) { if (/^#([0-9a-fA-F]{8})$/.test(v)) {
const r = parseInt(v.slice(3, 5), 16); const r = parseInt(v.slice(3, 5), 16);
const g = parseInt(v.slice(5, 7), 16); const g = parseInt(v.slice(5, 7), 16);