self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-07 06:16:05 +02:00
Code Issues Releases Activity

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
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}