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

fix: z-index overuse (#18192)

Browse source
This commit is contained in:
Daniel Dietzler 2025-05-13 16:10:05 +02:00 • committed by GitHub
parent 48112d84a3
commit 989d9dbe51
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
49 changed files with 330 additions and 332 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/src/lib/components/asset-viewer/album-list-item.svelte
View file

@ -1,10 +1,10 @@
<script lang="ts">
import { getAssetThumbnailUrl } from '$lib/utils';
import { type AlbumResponseDto } from '@immich/sdk';
import { normalizeSearchString } from '$lib/utils/string-utils.js';
import AlbumListItemDetails from './album-list-item-details.svelte';
import type { Action } from 'svelte/action';
import { SCROLL_PROPERTIES } from '$lib/components/shared-components/album-selection/album-selection-utils';
import { getAssetThumbnailUrl } from '$lib/utils';
import { normalizeSearchString } from '$lib/utils/string-utils.js';
import { type AlbumResponseDto } from '@immich/sdk';
import type { Action } from 'svelte/action';
import AlbumListItemDetails from './album-list-item-details.svelte';
interface Props {
album: AlbumResponseDto;
@ -52,7 +52,7 @@
<img
src={getAssetThumbnailUrl(album.albumThumbnailAssetId)}
alt={album.albumName}
class="z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg"
class="h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg"
data-testid="album-image"
draggable="false"
/>

2
web/src/lib/components/asset-viewer/download-panel.svelte
View file

@ -16,7 +16,7 @@
{#if downloadManager.isDownloading}
<div
transition:fly={{ x: -100, duration: 350 }}
class="fixed bottom-10 start-2 z-[10000] max-h-[270px] w-[315px] rounded-2xl border p-4 text-sm shadow-sm bg-light"
class="fixed bottom-10 start-2 max-h-[270px] w-[315px] rounded-2xl border p-4 text-sm shadow-sm bg-light"
>
<p class="mb-2 text-xs text-gray-500">{$t('downloading').toUpperCase()}</p>
<div class="my-2 mb-2 flex max-h-[200px] flex-col overflow-y-auto text-sm">

15
web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte
View file

@ -1,15 +1,10 @@
<script lang="ts">
import { onMount, onDestroy, tick } from 'svelte';
import { t } from 'svelte-i18n';
import { getAssetOriginalUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { getAltText } from '$lib/utils/thumbnail-util';
import { onDestroy, onMount, tick } from 'svelte';
import { t } from 'svelte-i18n';
import { imgElement, cropAreaEl, resetCropStore, overlayEl, isResizingOrDragging, cropFrame } from './crop-store';
import { draw } from './drawing';
import { onImageLoad, resizeCanvas } from './image-loading';
import { handleMouseDown, handleMouseMove, handleMouseUp } from './mouse-handlers';
import { recalculateCrop, animateCropChange } from './crop-settings';
import {
changedOriention,
cropAspectRatio,
@ -18,6 +13,11 @@
rotateDegrees,
} from '$lib/stores/asset-editor.store';
import type { AssetResponseDto } from '@immich/sdk';
import { animateCropChange, recalculateCrop } from './crop-settings';
import { cropAreaEl, cropFrame, imgElement, isResizingOrDragging, overlayEl, resetCropStore } from './crop-store';
import { draw } from './drawing';
import { onImageLoad, resizeCanvas } from './image-loading';
import { handleMouseDown, handleMouseMove, handleMouseUp } from './mouse-handlers';
interface Props {
asset: AssetResponseDto;
@ -169,7 +169,6 @@
border: 2px solid white;
box-sizing: border-box;
pointer-events: none;
z-index: 1;
}
.corner {

2
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -214,7 +214,7 @@
<img
src={assetFileUrl}
alt={$getAltText(asset)}
class="absolute top-0 start-0 -z-10 object-cover h-full w-full blur-lg"
class="absolute top-0 start-0 object-cover h-full w-full blur-lg"
draggable="false"
/>
{/if}