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

fix(web): layout nesting (#1881)

Browse source 
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Michel Heusschen 2023-02-27 04:23:43 +01:00 • committed by GitHub
parent 2efa8b6960
commit 807bdfeda9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 72 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

44
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
View file

@ -3,18 +3,36 @@
import ImmichLogo from './immich-logo.svelte';
export let dropHandler: (event: DragEvent) => void;
export let dragOverHandler: (event: DragEvent) => void;
export let dragLeaveHandler: () => void;
let dragStartTarget: EventTarget | null = null;
</script>
<div
in:fade={{ duration: 250 }}
out:fade={{ duration: 250 }}
on:drop={dropHandler}
on:dragover={dragOverHandler}
on:dragleave={dragLeaveHandler}
class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
>
<ImmichLogo height="200" width="200" class="animate-bounce pb-16" />
<div class="text-2xl">Drop files anywhere to upload</div>
</div>
<svelte:body
on:dragenter|stopPropagation|preventDefault={(e) => {
dragStartTarget = e.target;
}}
on:dragleave|stopPropagation|preventDefault={(e) => {
if (dragStartTarget === e.target) {
dragStartTarget = null;
}
}}
on:drop|stopPropagation|preventDefault={(e) => {
dragStartTarget = null;
dropHandler(e);
}}
/>
{#if dragStartTarget}
<div
class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
transition:fade={{ duration: 250 }}
on:dragover={(e) => {
// Prevent browser from opening the dropped file.
e.stopPropagation();
e.preventDefault();
}}
>
<ImmichLogo class="animate-bounce w-48 m-16" />
<div class="text-2xl">Drop files anywhere to upload</div>
</div>
{/if}

12
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View file

@ -48,7 +48,7 @@
<SideBarButton
title="Photos"
logo={ImageOutline}
isSelected={$page.route.id === AppRoute.PHOTOS}
isSelected={$page.route.id === '/(user)/photos'}
>
<svelte:fragment slot="moreInformation">
{#await getAssetCount()}
@ -66,7 +66,7 @@
<SideBarButton
title="Sharing"
logo={AccountMultipleOutline}
isSelected={$page.route.id === AppRoute.SHARING}
isSelected={$page.route.id === '/(user)/sharing'}
>
<svelte:fragment slot="moreInformation">
{#await getAlbumCount()}
@ -87,7 +87,7 @@
<SideBarButton
title="Favorites"
logo={StarOutline}
isSelected={$page.route.id == AppRoute.FAVORITES}
isSelected={$page.route.id == '/(user)/favorites'}
>
<svelte:fragment slot="moreInformation">
{#await getFavoriteCount()}
@ -101,7 +101,11 @@
</SideBarButton>
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
<SideBarButton title="Albums" logo={ImageAlbum} isSelected={$page.route.id === AppRoute.ALBUMS}>
<SideBarButton
title="Albums"
logo={ImageAlbum}
isSelected={$page.route.id === '/(user)/albums'}
>
<svelte:fragment slot="moreInformation">
{#await getAlbumCount()}
<LoadingSpinner />