fix(web) Disable draggable on common usage element to avoid trigger drag-n-drop layer (#1330)

This commit is contained in:
Alex 2023-01-15 14:01:10 -06:00 committed by GitHub
parent 036d0556a4
commit eace0af7a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 241 additions and 187 deletions

View file

@ -79,6 +79,7 @@
alt={album.id}
class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
data-testid="album-image"
draggable="false"
/>
</div>

View file

@ -418,7 +418,13 @@
class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
href="https://immich.app"
>
<img src="/immich-logo.svg" alt="immich logo" height="30" width="30" />
<img
src="/immich-logo.svg"
alt="immich logo"
height="30"
width="30"
draggable="false"
/>
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
IMMICH
</h1>

View file

@ -53,7 +53,7 @@
<BaseModal on:close={() => dispatch('close')}>
<svelte:fragment slot="title">
<span class="flex gap-2 place-items-center">
<img src="/immich-logo.svg" width="24" alt="Immich" />
<img src="/immich-logo.svg" width="24" alt="Immich" draggable="false" />
<p class="font-medium">Invite to album</p>
</span>
</svelte:fragment>

View file

@ -33,6 +33,7 @@
alt={album.albumName}
class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
data-testid="album-image"
draggable="false"
/>
</div>
<div class="h-12 flex flex-col items-start justify-center">

View file

@ -208,6 +208,7 @@
alt={album.albumName}
class="w-[50px] h-[50px] object-cover rounded"
src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG`}
draggable="false"
/>
</div>

View file

@ -85,6 +85,7 @@
alt={assetId}
class="object-contain h-full transition-all"
loading="lazy"
draggable="false"
/>
{/await}
{/if}

View file

@ -55,7 +55,14 @@
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
<img
class="text-center"
src="/immich-logo.svg"
height="100"
width="100"
alt="immich-logo"
draggable="false"
/>
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
Admin Registration
</h1>

View file

@ -47,7 +47,14 @@
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
<img
class="text-center"
src="/immich-logo.svg"
height="100"
width="100"
alt="immich-logo"
draggable="false"
/>
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
Change Password
</h1>

View file

@ -80,7 +80,14 @@
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
<img
class="text-center"
src="/immich-logo.svg"
height="100"
width="100"
alt="immich-logo"
draggable="false"
/>
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
Create new user
</h1>

View file

@ -77,7 +77,14 @@
class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-md py-8"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
<img
class="text-center"
src="/immich-logo.svg"
height="100"
width="100"
alt="immich-logo"
draggable="false"
/>
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">Login</h1>
</div>

View file

@ -120,7 +120,7 @@
class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
href="https://immich.app"
>
<img src="/immich-logo.svg" alt="immich logo" height="30" width="30" />
<img src="/immich-logo.svg" alt="immich logo" height="30" width="30" draggable="false" />
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
IMMICH
</h1>

View file

@ -45,6 +45,7 @@
style:height={`${size}px`}
class={`inline rounded-full object-cover border shadow-md`}
title={user.email}
draggable="false"
/>
</button>
{:catch}

View file

@ -20,6 +20,7 @@
height="200"
width="200"
class="animate-bounce pb-16"
draggable="false"
/>
<div class="text-2xl">Drop files anywhere to upload</div>
</div>

View file

@ -252,6 +252,7 @@
alt={asset.id}
class={`object-cover ${getSize()} transition-all z-0 ${getThumbnailBorderStyle()}`}
loading="lazy"
draggable="false"
/>
{/if}

View file

@ -38,6 +38,7 @@
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
alt="profile-img"
class="inline rounded-full h-20 w-20 object-cover shadow-md"
draggable="false"
/>
{:catch}
<div transition:fade={{ duration: 200 }} class="text-lg">

View file

@ -50,7 +50,7 @@
class="flex gap-2 place-items-center hover:cursor-pointer"
href="/photos"
>
<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" />
<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" draggable="false" />
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
IMMICH
</h1>
@ -102,6 +102,7 @@
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
alt="profile-img"
class="inline rounded-full h-12 w-12 object-cover shadow-md"
draggable="false"
/>
{:catch}
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}

View file

@ -40,6 +40,7 @@
data-sveltekit-noscroll
href={AppRoute.PHOTOS}
class="relative"
draggable="false"
>
<SideBarButton
title={`Photos`}
@ -71,7 +72,7 @@
</div>
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} class="relative">
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} class="relative" draggable="false">
<SideBarButton
title="Sharing"
logo={AccountMultipleOutline}
@ -103,7 +104,7 @@
<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
<p>LIBRARY</p>
</div>
<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative">
<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative" draggable="false">
<SideBarButton
title="Albums"
logo={ImageAlbum}

View file

@ -100,6 +100,7 @@
src="/immich-logo.svg"
alt=""
class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg "
draggable="false"
/>
<div class="bottom-0 left-0 absolute w-full h-[25px] bg-immich-primary/30">

View file

@ -73,6 +73,7 @@
alt={asset.id}
class="object-cover w-[100px] h-[100px] rounded-lg"
loading="lazy"
draggable="false"
/>
{/await}
</div>

View file

@ -41,6 +41,7 @@
src={imageData}
alt={album.id}
class={`object-cover w-[75px] h-[75px] transition-all z-0 rounded-xl duration-300 `}
draggable="false"
/>
{/await}
</div>