Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-19 16:32:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: color picker for hsv settings

Browse Source
This commit is contained in:
Thea Schöbl
2025-04-23 15:56:58 +02:00
parent 24fc861ef4
commit bc06e8ee80
2 changed files with 151 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/routes/(app)/config/settings/+page.svelte
View File

@@ -117,43 +117,49 @@
{/if}
{#each category.items as item}
{#if item.name !== "enable"}
<label
>{#if item.enum}
<select use:setting={{ id: item.id }}>
{#each item.enum as name, value}
<option {value}>{titlecase(name)}</option>
{/each}
</select>
{:else if item.range[0] === 0 && item.range[1] === 1}
<input type="checkbox" use:setting={{ id: item.id }} />
{:else}
<span class="unit"
><input
type="number"
min={settingValue(item.range[0], item)}
max={settingValue(item.range[1], item)}
step={item.inverse !== undefined ||
item.scale !== undefined ||
item.step === undefined
? undefined
: settingValue(item.step, item)}
use:setting={{
id: item.id,
inverse: item.inverse,
scale: item.scale,
}}
/>{item.unit}</span
>
{/if}
{#if item.description}
<span
>{titlecase(item.name)}
<p>{item.description}</p></span
>
{:else}
{titlecase(item.name)}
{/if}
</label>
{#if item.unit === "H"}
<label
><input type="color" use:setting={{ id: item.id }} /> Color</label
>
{:else if item.unit !== "S" && item.unit !== "B"}
<label
>{#if item.enum}
<select use:setting={{ id: item.id }}>
{#each item.enum as name, value}
<option {value}>{titlecase(name)}</option>
{/each}
</select>
{:else if item.range[0] === 0 && item.range[1] === 1}
<input type="checkbox" use:setting={{ id: item.id }} />
{:else}
<span class="unit"
><input
type="number"
min={settingValue(item.range[0], item)}
max={settingValue(item.range[1], item)}
step={item.inverse !== undefined ||
item.scale !== undefined ||
item.step === undefined
? undefined
: settingValue(item.step, item)}
use:setting={{
id: item.id,
inverse: item.inverse,
scale: item.scale,
}}
/>{item.unit}</span
>
{/if}
{#if item.description}
<span
>{titlecase(item.name)}
<p>{item.description}</p></span
>
{:else}
{titlecase(item.name)}
{/if}
</label>
{/if}
{/if}
{/each}
</fieldset>