helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: checkbox (#18337)

Browse source 
refactor: checkboxes
This commit is contained in:
Jason Rasmussen 2025-05-16 14:13:39 -04:00 • committed by GitHub
parent 8f045bc602
commit fa45a26cff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 47 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/src/lib/components/shared-components/search-bar/search-display-section.svelte
View file

@ -1,13 +1,14 @@
<script lang="ts" module>
export interface SearchDisplayFilters {
isNotInAlbum?: boolean;
isArchive?: boolean;
isFavorite?: boolean;
isNotInAlbum: boolean;
isArchive: boolean;
isFavorite: boolean;
}
</script>
<script lang="ts">
import Checkbox from '$lib/components/elements/checkbox.svelte';
import { Checkbox, Label } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
@ -21,9 +22,18 @@
<fieldset>
<legend class="immich-form-label">{$t('display_options').toUpperCase()}</legend>
<div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
<Checkbox id="not-in-album-checkbox" label={$t('not_in_any_album')} bind:checked={filters.isNotInAlbum} />
<Checkbox id="archive-checkbox" label={$t('archive')} bind:checked={filters.isArchive} />
<Checkbox id="favorite-checkbox" label={$t('favorites')} bind:checked={filters.isFavorite} />
<div class="flex items-center gap-2">
<Checkbox id="not-in-album-checkbox" size="tiny" bind:checked={filters.isNotInAlbum} />
<Label label={$t('not_in_any_album')} for="not-in-album-checkbox" />
</div>
<div class="flex items-center gap-2">
<Checkbox id="archive-checkbox" size="tiny" bind:checked={filters.isArchive} />
<Label label={$t('archive')} for="archive-checkbox" />
</div>
<div class="flex items-center gap-2">
<Checkbox id="favorites-checkbox" size="tiny" bind:checked={filters.isFavorite} />
<Label label={$t('favorites')} for="favorites-checkbox" />
</div>
</div>
</fieldset>
</div>

24
web/src/lib/components/shared-components/settings/setting-checkboxes.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import Checkbox from '$lib/components/elements/checkbox.svelte';
import { Checkbox, Label } from '@immich/ui';
import { t } from 'svelte-i18n';
import { quintOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { t } from 'svelte-i18n';
interface Props {
value: string[];
@ -52,14 +52,18 @@
{/if}
<div class="flex flex-col gap-2">
{#each options as option (option.value)}
<Checkbox
id="{option.value}-checkbox"
label={option.text}
checked={value.includes(option.value)}
{disabled}
labelClass="text-gray-500 dark:text-gray-300"
onchange={() => handleCheckboxChange(option.value)}
/>
<div class="flex gap-2 items-center">
<Checkbox
size="tiny"
id="{option.value}-checkbox"
checked={value.includes(option.value)}
{disabled}
onCheckedChange={() => handleCheckboxChange(option.value)}
/>
<Label label={option.text} for="{option.value}-checkbox">
{option.text}
</Label>
</div>
{/each}
</div>
</div>