You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-07-07 06:16:05 +02:00
fix(web): layout nesting (#1881)
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
@ -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}
|
||||
|
Reference in New Issue
Block a user