feat(web,a11y): consolidate BaseModal into FullScreenModal (#8787)

* feat(web,a11y): FullScreenModal sticky buttons

* chore(web): combine BaseModal into FullScreenModal

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Ben 2024-04-16 05:06:15 +00:00 committed by GitHub
parent 28f591d01b
commit bcdec25843
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 251 additions and 337 deletions

View file

@ -5,12 +5,12 @@
import { getContextMenuPosition } from '../../utils/context-menu';
import { handleError } from '../../utils/handle-error';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import BaseModal from '../shared-components/base-modal.svelte';
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import UserAvatar from '../shared-components/user-avatar.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
export let album: AlbumResponseDto;
export let onClose: () => void;
@ -66,7 +66,7 @@
</script>
{#if !selectedRemoveUser}
<BaseModal id="share-info-modal" title="Options" {onClose}>
<FullScreenModal id="share-info-modal" title="Options" {onClose}>
<section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
<div class="flex w-full place-items-center justify-between gap-4 p-5">
<div class="flex place-items-center gap-4">
@ -80,7 +80,7 @@
</div>
{#each album.sharedUsers as user}
<div
class="flex w-full place-items-center justify-between gap-4 p-5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
class="flex w-full place-items-center justify-between gap-4 p-5 rounded-xl transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
>
<div class="flex place-items-center gap-4">
<UserAvatar {user} size="md" />
@ -116,7 +116,7 @@
</div>
{/each}
</section>
</BaseModal>
</FullScreenModal>
{/if}
{#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}