immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-22 09:15:34 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

chore: tailwindcss v4 and z-war clean up (#18358)

Browse Source 
* chore: styling tweak

* replace full-screen-modal, update docs

* scrubber

* fix: control app bar in memory viewer

* face lift

* pr feedback

* clean up
This commit is contained in:
Alex
2025-05-19 09:32:23 -05:00
committed by GitHub
parent 2431e04a09
commit c8641d24f6
42 changed files with 871 additions and 928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/src/lib/components/shared-components/album-selection/album-selection-modal.svelte
View File

@@ -5,9 +5,9 @@
AlbumModalRowType,
isSelectableRowType,
} from '$lib/components/shared-components/album-selection/album-selection-utils';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { albumViewSettings } from '$lib/stores/preferences.store';
import { type AlbumResponseDto, getAllAlbums } from '@immich/sdk';
import { Modal, ModalBody } from '@immich/ui';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import AlbumListItem from '../../asset-viewer/album-list-item.svelte';
@@ -80,49 +80,51 @@
const handleAlbumClick = (album: AlbumResponseDto) => () => onAlbumClick(album);
</script>
<FullScreenModal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose}>
<div class="mb-2 flex max-h-[400px] flex-col">
{#if loading}
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each { length: 3 } as _}
<div class="flex animate-pulse gap-4 px-6 py-2">
<div class="h-12 w-12 rounded-xl bg-slate-200"></div>
<div class="flex flex-col items-start justify-center gap-2">
<span class="h-4 w-36 animate-pulse bg-slate-200"></span>
<div class="flex animate-pulse gap-1">
<span class="h-3 w-8 bg-slate-200"></span>
<span class="h-3 w-20 bg-slate-200"></span>
<Modal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose} size="small">
<ModalBody>
<div class="mb-2 flex max-h-[400px] flex-col">
{#if loading}
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each { length: 3 } as _}
<div class="flex animate-pulse gap-4 px-6 py-2">
<div class="h-12 w-12 rounded-xl bg-slate-200"></div>
<div class="flex flex-col items-start justify-center gap-2">
<span class="h-4 w-36 animate-pulse bg-slate-200"></span>
<div class="flex animate-pulse gap-1">
<span class="h-3 w-8 bg-slate-200"></span>
<span class="h-3 w-20 bg-slate-200"></span>
</div>
</div>
</div>
</div>
{/each}
{:else}
<input
class="border-b-4 border-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
placeholder={$t('search')}
{onkeydown}
bind:value={search}
use:initInput
/>
<div class="immich-scrollbar overflow-y-auto">
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each albumModalRows as row}
{#if row.type === AlbumModalRowType.NEW_ALBUM}
<NewAlbumListItem selected={row.selected || false} {onNewAlbum} searchQuery={search} />
{:else if row.type === AlbumModalRowType.SECTION}
<p class="px-5 py-3 text-xs">{row.text}</p>
{:else if row.type === AlbumModalRowType.MESSAGE}
<p class="px-5 py-1 text-sm">{row.text}</p>
{:else if row.type === AlbumModalRowType.ALBUM_ITEM && row.album}
<AlbumListItem
album={row.album}
selected={row.selected || false}
searchQuery={search}
onAlbumClick={handleAlbumClick(row.album)}
/>
{/if}
{/each}
</div>
{/if}
</div>
</FullScreenModal>
{:else}
<input
class="border-b-4 border-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
placeholder={$t('search')}
{onkeydown}
bind:value={search}
use:initInput
/>
<div class="immich-scrollbar overflow-y-auto">
<!-- eslint-disable-next-line svelte/require-each-key -->
{#each albumModalRows as row}
{#if row.type === AlbumModalRowType.NEW_ALBUM}
<NewAlbumListItem selected={row.selected || false} {onNewAlbum} searchQuery={search} />
{:else if row.type === AlbumModalRowType.SECTION}
<p class="px-5 py-3 text-xs">{row.text}</p>
{:else if row.type === AlbumModalRowType.MESSAGE}
<p class="px-5 py-1 text-sm">{row.text}</p>
{:else if row.type === AlbumModalRowType.ALBUM_ITEM && row.album}
<AlbumListItem
album={row.album}
selected={row.selected || false}
searchQuery={search}
onAlbumClick={handleAlbumClick(row.album)}
/>
{/if}
{/each}
</div>
{/if}
</div>
</ModalBody>
</Modal>