mirror of
https://github.com/immich-app/immich.git
synced 2025-07-03 21:40:00 +02:00
* chore(web): another missing translations * unused removed * more keys * lint fix * test fixed * dynamic translation fix * fixes * people search translation * params fixed * keep filter setting fix * lint fix * $t fixes * Update web/src/lib/i18n/en.json Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * another missing * activity translation * link sharing translations * expiration dropdown fix - didn't work localized * notification title * device logout * search results * reset to default * unsaved change * select from computer * selected * select-2 * select-3 * unmerge * pluralize, force icu message * Update web/src/lib/components/asset-viewer/asset-viewer.svelte Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * review fixes * remove user * plural fixes * ffmpeg settings * fixes * error title * plural fixes * onboarding * change password * more more * console log fix * another * api key desc * map marker * format fix * key fix * asset-utils * utils * misc --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
53 lines
1.5 KiB
Svelte
53 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { quintOut } from 'svelte/easing';
|
|
import { fly } from 'svelte/transition';
|
|
import { createEventDispatcher } from 'svelte';
|
|
import Slider from '$lib/components/elements/slider.svelte';
|
|
import { generateId } from '$lib/utils/generate-id';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
export let title: string;
|
|
export let subtitle = '';
|
|
export let checked = false;
|
|
export let disabled = false;
|
|
export let isEdited = false;
|
|
|
|
let id: string = generateId();
|
|
|
|
$: sliderId = `${id}-slider`;
|
|
$: subtitleId = subtitle ? `${id}-subtitle` : undefined;
|
|
|
|
const dispatch = createEventDispatcher<{ toggle: boolean }>();
|
|
const onToggle = (isChecked: boolean) => dispatch('toggle', isChecked);
|
|
</script>
|
|
|
|
<div class="flex place-items-center justify-between">
|
|
<div class="mr-2">
|
|
<div class="flex h-[26px] place-items-center gap-1">
|
|
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={sliderId}>
|
|
{title}
|
|
</label>
|
|
{#if isEdited}
|
|
<div
|
|
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
|
|
class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
|
|
>
|
|
{$t('unsaved_change')}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if subtitle}
|
|
<p id={subtitleId} class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
|
|
{/if}
|
|
<slot />
|
|
</div>
|
|
|
|
<Slider
|
|
id={sliderId}
|
|
bind:checked
|
|
{disabled}
|
|
on:toggle={({ detail }) => onToggle(detail)}
|
|
ariaDescribedBy={subtitleId}
|
|
/>
|
|
</div>
|