1
0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00

fix(web): small fixes for empty placeholder (#7859)

This commit is contained in:
Michel Heusschen 2024-03-12 02:18:47 +01:00 committed by GitHub
parent 4023c665cc
commit b7e5407822
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 18 additions and 50 deletions

View File

@ -1,28 +1,24 @@
<script lang="ts">
import empty1Url from '$lib/assets/empty-1.svg';
export let actionHandler: undefined | (() => unknown) = undefined;
export let text = '';
export let alt = '';
export let onClick: undefined | (() => unknown) = undefined;
export let text: string;
export let fullWidth = false;
export let src = empty1Url;
const noop = () => {};
$: width = fullWidth ? 'w-full' : 'w-1/2';
$: handler = actionHandler || noop;
$: width = fullWidth ? 'w-full' : 'w-[50%]';
const hoverClasses = actionHandler
? `border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer`
const hoverClasses = onClick
? `border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25`
: '';
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
on:click={handler}
on:keydown={handler}
<svelte:element
this={onClick ? 'button' : 'div'}
on:click={onClick}
class="{width} m-auto mt-10 flex flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray {hoverClasses}"
>
<img {src} {alt} width="500" draggable="false" />
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
</div>
<img {src} alt="" width="500" draggable="false" />
<p class="text-immich-text-gray-500 dark:text-immich-dark-fg">{text}</p>
</svelte:element>

View File

@ -375,11 +375,7 @@
<!-- Empty Message -->
{:else}
<EmptyPlaceholder
text="Create an album to organize your photos and videos"
actionHandler={handleCreateAlbum}
alt="Empty albums"
/>
<EmptyPlaceholder text="Create an album to organize your photos and videos" onClick={handleCreateAlbum} />
{/if}
</UserPageLayout>

View File

@ -45,10 +45,6 @@
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNARCHIVE}>
<EmptyPlaceholder
text="Archive photos and videos to hide them from your Photos view"
alt="Empty archive"
slot="empty"
/>
<EmptyPlaceholder text="Archive photos and videos to hide them from your Photos view" slot="empty" />
</AssetGrid>
</UserPageLayout>

View File

@ -50,10 +50,6 @@
<UserPageLayout hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={false}>
<AssetGrid {assetStore} {assetInteractionStore} removeAction={AssetAction.UNFAVORITE}>
<EmptyPlaceholder
text="Add favorites to quickly find your best pictures and videos"
alt="Empty favorites"
slot="empty"
/>
<EmptyPlaceholder text="Add favorites to quickly find your best pictures and videos" slot="empty" />
</AssetGrid>
</UserPageLayout>

View File

@ -88,10 +88,6 @@
{#if $user.memoriesEnabled}
<MemoryLane />
{/if}
<EmptyPlaceholder
text="CLICK TO UPLOAD YOUR FIRST PHOTO"
actionHandler={() => openFileUploadDialog()}
slot="empty"
/>
<EmptyPlaceholder text="CLICK TO UPLOAD YOUR FIRST PHOTO" onClick={() => openFileUploadDialog()} slot="empty" />
</AssetGrid>
</UserPageLayout>

View File

@ -92,7 +92,6 @@
{#if data.sharedAlbums.length === 0}
<EmptyPlaceholder
text="Create a shared album to share photos and videos with people in your network"
alt="Empty album list"
src={empty2Url}
/>
{/if}

View File

@ -91,12 +91,7 @@
<p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
Trashed items will be permanently deleted after {$serverConfig.trashDays} days.
</p>
<EmptyPlaceholder
text="Trashed photos and videos will show up here."
alt="Empty trash can"
slot="empty"
src={empty3Url}
/>
<EmptyPlaceholder text="Trashed photos and videos will show up here." src={empty3Url} slot="empty" />
</AssetGrid>
</UserPageLayout>
{/if}

View File

@ -462,8 +462,7 @@
{:else}
<EmptyPlaceholder
text="Create an external library to view your photos and videos"
actionHandler={() => (toCreateLibrary = true)}
alt="Empty albums"
onClick={() => (toCreateLibrary = true)}
/>
{/if}
</div>

View File

@ -203,12 +203,7 @@
<section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
{#if matches.length + extras.length + orphans.length === 0}
<div class="w-full">
<EmptyPlaceholder
fullWidth
text="Untracked and missing files will show up here"
alt="Empty report"
src={empty4Url}
/>
<EmptyPlaceholder fullWidth text="Untracked and missing files will show up here" src={empty4Url} />
</div>
{:else}
<div class="gap-2">