public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-10 03:23:45 +09:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

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
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/shared-components/notification/__tests__/notification-list.spec.ts
View File

@@ -5,8 +5,8 @@ import { get } from 'svelte/store';
import { NotificationType, notificationController } from '../notification';
import NotificationList from '../notification-list.svelte';
function _getNotificationListElement(sut: RenderResult<NotificationList>): HTMLAnchorElement | null {
return sut.container.querySelector('#notification-list');
function _getNotificationListElement(): HTMLAnchorElement | null {
return document.body.querySelector('#notification-list');
}
describe('NotificationList component', () => {
@@ -23,7 +23,7 @@ describe('NotificationList component', () => {
const status = await sut.findAllByRole('status');
expect(status).toHaveLength(1);
expect(_getNotificationListElement(sut)).not.toBeInTheDocument();
expect(_getNotificationListElement()).not.toBeInTheDocument();
notificationController.show({
message: 'Notification',
@@ -31,11 +31,11 @@ describe('NotificationList component', () => {
timeout: 1,
});
await waitFor(() => expect(_getNotificationListElement(sut)).toBeInTheDocument());
await waitFor(() => expect(_getNotificationListElement(sut)?.children).toHaveLength(1));
await waitFor(() => expect(_getNotificationListElement()).toBeInTheDocument());
await waitFor(() => expect(_getNotificationListElement()?.children).toHaveLength(1));
expect(get(notificationController.notificationList)).toHaveLength(1);
await waitFor(() => expect(_getNotificationListElement(sut)).not.toBeInTheDocument());
await waitFor(() => expect(_getNotificationListElement()).not.toBeInTheDocument());
expect(get(notificationController.notificationList)).toHaveLength(0);
});
});

2
web/src/lib/components/shared-components/notification/notification-card.svelte
View File

@@ -75,7 +75,7 @@
transition:fade={{ duration: 250 }}
style:background-color={backgroundColor[notification.type]}
style:border-color={borderColor[notification.type]}
class="border z-[999999] mb-4 min-h-[80px] w-[300px] rounded-2xl p-4 shadow-md {hoverStyle}"
class="border mb-4 min-h-[80px] w-[300px] rounded-2xl p-4 shadow-md {hoverStyle}"
onclick={handleClick}
onkeydown={handleClick}
>

31
web/src/lib/components/shared-components/notification/notification-list.svelte
View File

@@ -1,22 +1,25 @@
<script lang="ts">
import { notificationController } from './notification';
import { fade } from 'svelte/transition';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
import { t } from 'svelte-i18n';
import NotificationCard from './notification-card.svelte';
import { flip } from 'svelte/animate';
import { quintOut } from 'svelte/easing';
import { fade } from 'svelte/transition';
import { notificationController } from './notification';
import NotificationCard from './notification-card.svelte';
const { notificationList } = notificationController;
</script>
<div role="status" aria-relevant="additions" aria-label={$t('notifications')}>
{#if $notificationList.length > 0}
<section transition:fade={{ duration: 250 }} id="notification-list" class="fixed end-5 top-[80px] z-[99999999]">
{#each $notificationList as notification (notification.id)}
<div animate:flip={{ duration: 250, easing: quintOut }}>
<NotificationCard {notification} />
</div>
{/each}
</section>
{/if}
</div>
<Portal>
<div role="status" aria-relevant="additions" aria-label={$t('notifications')}>
{#if $notificationList.length > 0}
<section transition:fade={{ duration: 250 }} id="notification-list" class="fixed end-5 top-[80px]">
{#each $notificationList as notification (notification.id)}
<div animate:flip={{ duration: 250, easing: quintOut }}>
<NotificationCard {notification} />
</div>
{/each}
</section>
{/if}
</div>
</Portal>