c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

fix(web): slider (#6485)

Browse source
This commit is contained in:
Jason Rasmussen 2024-01-19 09:57:15 -05:00 committed by GitHub
parent b4d1470586
commit dacca4cdf1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
web/src/lib/components/admin-page/settings/setting-switch.svelte
View file

@ -13,20 +13,23 @@
const dispatch = createEventDispatcher<{ toggle: boolean }>(); const dispatch = createEventDispatcher<{ toggle: boolean }>();
</script> </script>
<Slider bind:checked {disabled} on:toggle={() => dispatch('toggle', checked)}> <div class="flex place-items-center justify-between">
<div class="flex h-[26px] place-items-center gap-1"> <div>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}> <div class="flex h-[26px] place-items-center gap-1">
{title} <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
</label> {title}
{#if isEdited} </label>
<div {#if isEdited}
transition:fly={{ x: 10, duration: 200, easing: quintOut }} <div
class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900" transition:fly={{ x: 10, duration: 200, easing: quintOut }}
> class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
Unsaved change >
</div> Unsaved change
{/if} </div>
</div> {/if}
</div>
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p> <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
</Slider> </div>
<Slider bind:checked {disabled} on:toggle={() => dispatch('toggle', checked)} />
</div>

31
web/src/lib/components/elements/slider.svelte
View file

@ -8,24 +8,21 @@
const onToggle = (event: Event) => dispatch('toggle', (event.target as HTMLInputElement).checked); const onToggle = (event: Event) => dispatch('toggle', (event.target as HTMLInputElement).checked);
</script> </script>
<div class="flex place-items-center justify-between"> <label class="relative inline-block h-[10px] w-[36px] flex-none">
<slot name="leading" /> <input
<label class="relative inline-block h-[10px] w-[36px] flex-none"> class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
<input type="checkbox"
class="disabled::cursor-not-allowed h-0 w-0 opacity-0" bind:checked
type="checkbox" on:click={onToggle}
bind:checked {disabled}
on:click={onToggle} />
{disabled}
/>
{#if disabled} {#if disabled}
<span class="slider slider-disabled cursor-not-allowed" /> <span class="slider slider-disabled cursor-not-allowed" />
{:else} {:else}
<span class="slider slider-enabled cursor-pointer" /> <span class="slider slider-enabled cursor-pointer" />
{/if} {/if}
</label> </label>
</div>
<style> <style>
.slider { .slider {