self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

fix(web): empty placeholders (#4470)

Browse Source
This commit is contained in:
Jason Rasmussen 2023-10-13 14:47:31 -04:00 committed by GitHub
parent 9d225d3d06
commit 4a9f58bf9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/lib/components/photos-page/asset-grid.svelte
View File

@ -37,6 +37,7 @@
let showSkeleton = true;
$: timelineY = element?.scrollTop || 0;
$: isEmpty = $assetStore.initialized && $assetStore.buckets.length === 0;
const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
const dispatch = createEventDispatcher<{ select: AssetResponseDto; escape: void }>();
@ -325,7 +326,7 @@
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
<section
id="asset-grid"
class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-[60px]"
class="scrollbar-hidden h-full overflow-y-auto pb-[60px] {isEmpty ? 'm-0' : 'ml-4 mr-[60px]'}"
bind:clientHeight={viewport.height}
bind:clientWidth={viewport.width}
bind:this={element}
@ -347,7 +348,7 @@
<slot />
<!-- (optional) empty placeholder -->
{#if $assetStore.initialized && $assetStore.buckets.length === 0}
{#if isEmpty}
<slot name="empty" />
{/if}
<section id="virtual-timeline" style:height={$assetStore.timelineHeight + 'px'}>

37
web/src/lib/components/shared-components/empty-placeholder.svelte
View File

@ -4,26 +4,25 @@
export let actionHandler: undefined | (() => unknown) = undefined;
export let text = '';
export let alt = '';
export let fullWidth = false;
export let src = empty1Url;
let hoverClasses = 'hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer';
const noop = () => undefined;
$: 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`
: '';
</script>
{#if actionHandler}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
on:click={actionHandler}
on:keydown={actionHandler}
class="border dark:border-immich-dark-gray {hoverClasses} m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray"
>
<img {src} {alt} width="500" draggable="false" />
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
</div>
{:else}
<div
class="m-auto mt-10 flex w-[50%] flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<img {src} {alt} width="500" draggable="false" />
<p class="text-immich-text-gray-500 text-center dark:text-immich-dark-fg">{text}</p>
</div>
{/if}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
on:click={handler}
on:keydown={handler}
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>

32
web/src/routes/(user)/sharing/+page.svelte
View File

@ -1,20 +1,21 @@
<script lang="ts">
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
import Link from 'svelte-material-icons/Link.svelte';
import { goto } from '$app/navigation';
import { api } from '@api';
import type { PageData } from './$types';
import empty2Url from '$lib/assets/empty-2.svg';
import AlbumCard from '$lib/components/album-page/album-card.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import empty2Url from '$lib/assets/empty-2.svg';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import { flip } from 'svelte/animate';
import AlbumCard from '$lib/components/album-page/album-card.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { AppRoute } from '$lib/constants';
import { api } from '@api';
import Link from 'svelte-material-icons/Link.svelte';
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
import { flip } from 'svelte/animate';
import type { PageData } from './$types';
export let data: PageData;
@ -103,14 +104,11 @@
<!-- Empty List -->
{#if data.sharedAlbums.length === 0}
<div
class="m-auto mt-10 flex w-2/3 flex-col place-content-center place-items-center rounded-3xl border bg-gray-50 p-5 dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg md:w-[500px]"
>
<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
<p class="text-immich-text-gray-500 text-center">
Create a shared album to share photos and videos with people in your network
</p>
</div>
<EmptyPlaceholder
text="Create a shared album to share photos and videos with people in your network"
alt="Empty album list"
src={empty2Url}
/>
{/if}
</div>
</div>