self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-11 06:10:28 +02:00
Code Issues Releases Activity

fix(web): nested layout navigation issue (#1936)

Browse Source 
* fix(web): nested layout navigation issue

* move guarding to html template

* fix test
This commit is contained in:
Alex 2023-03-04 16:09:55 -06:00 committed by GitHub
parent bdf35b6688
commit 1918625be9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 1066 additions and 721 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1736
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
View File

@ -1,16 +1,17 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import ImmichLogo from './immich-logo.svelte'; import ImmichLogo from './immich-logo.svelte';
export let dropHandler: (event: DragEvent) => void; export let dropHandler: (event: DragEvent) => void;
let dragStartTarget: EventTarget | null = null; let dragStartTarget: EventTarget | null = null;
const handleDragEnter = (e: DragEvent) => {
dragStartTarget = e.target;
};
</script> </script>
<svelte:body <svelte:body
on:dragenter|stopPropagation|preventDefault={(e) => { on:dragenter|stopPropagation|preventDefault={handleDragEnter}
dragStartTarget = e.target;
}}
on:dragleave|stopPropagation|preventDefault={(e) => { on:dragleave|stopPropagation|preventDefault={(e) => {
if (dragStartTarget === e.target) { if (dragStartTarget === e.target) {
dragStartTarget = null; dragStartTarget = null;

22
web/src/routes/(user)/+layout.svelte
View File

@ -1,22 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import { fileUploadHandler } from '$lib/utils/file-uploader';
import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
const dropHandler = async ({ dataTransfer }: DragEvent) => {
const files = dataTransfer?.files;
if (!files) {
return;
}
const filesArray: File[] = Array.from<File>(files);
const albumId =
($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
await fileUploadHandler(filesArray, albumId);
};
</script>
<slot />
<UploadCover {dropHandler} />

20
web/src/routes/+layout.svelte
View File

@ -10,8 +10,11 @@
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte'; import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
import faviconUrl from '$lib/assets/favicon.png'; import faviconUrl from '$lib/assets/favicon.png';
import type { LayoutData } from './$types'; import type { LayoutData } from './$types';
import { fileUploadHandler } from '$lib/utils/file-uploader';
import UploadCover from '$lib/components/shared-components/drag-and-drop-upload-overlay.svelte';
let showNavigationLoadingBar = false; let showNavigationLoadingBar = false;
export let data: LayoutData;
beforeNavigate(() => { beforeNavigate(() => {
showNavigationLoadingBar = true; showNavigationLoadingBar = true;
@ -21,7 +24,18 @@
showNavigationLoadingBar = false; showNavigationLoadingBar = false;
}); });
export let data: LayoutData; const dropHandler = async ({ dataTransfer }: DragEvent) => {
const files = dataTransfer?.files;
if (!files) {
return;
}
const filesArray: File[] = Array.from<File>(files);
const albumId =
($page.route.id === '/(user)/albums/[albumId]' || undefined) && $page.params.albumId;
await fileUploadHandler(filesArray, albumId);
};
</script> </script>
<svelte:head> <svelte:head>
@ -58,3 +72,7 @@
{#if data.user?.isAdmin} {#if data.user?.isAdmin}
<VersionAnnouncementBox serverVersion={data.serverVersion} /> <VersionAnnouncementBox serverVersion={data.serverVersion} />
{/if} {/if}
{#if $page.route.id?.includes('(user)')}
<UploadCover {dropHandler} />
{/if}