feat(web): configure slideshow (#7219)

* feat: configure slideshow delay

* feat: show/hide progressbar

* fix: slider

* refactor: use grid instead of flex

* fix: default delay

* refactor: progress bar props

* refactor: slideshow settings

* fix: enforce min/max value

* chore: linting

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
martin 2024-02-23 06:01:19 +01:00 committed by GitHub
parent 6bb30291de
commit b3b6426695
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 183 additions and 119 deletions

View file

@ -13,8 +13,8 @@
export let inputType: SettingInputFieldType;
export let value: string | number;
export let min = Number.MIN_SAFE_INTEGER.toString();
export let max = Number.MAX_SAFE_INTEGER.toString();
export let min = Number.MIN_SAFE_INTEGER;
export let max = Number.MAX_SAFE_INTEGER;
export let step = '1';
export let label = '';
export let desc = '';
@ -25,15 +25,23 @@
const handleInput = (e: Event) => {
value = (e.target as HTMLInputElement).value;
if (inputType === SettingInputFieldType.NUMBER) {
value = Number(value) || 0;
let newValue = Number(value) || 0;
if (newValue < min) {
newValue = min;
}
if (newValue > max) {
newValue = max;
}
value = newValue;
}
};
</script>
<div class="mb-4 w-full">
<div class={`flex h-[26px] place-items-center gap-1`}>
<label class={`immich-form-label text-sm`} for={label}>{label}</label>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={label}>{label}</label>
{#if required}
<div class="text-red-400">*</div>
{/if}
@ -63,8 +71,8 @@
id={label}
name={label}
type={inputType}
{min}
{max}
min={min.toString()}
max={max.toString()}
{step}
{required}
{value}