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
29 changed files with 251 additions and 337 deletions

View File

@@ -9,7 +9,6 @@
import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import {
NotificationType,
notificationController,
@@ -21,14 +20,7 @@
import { asByteUnitString } from '$lib/utils/byte-units';
import { copyToClipboard } from '$lib/utils';
import { UserStatus, getAllUsers, type UserResponseDto } from '@immich/sdk';
import {
mdiAccountEditOutline,
mdiClose,
mdiContentCopy,
mdiDeleteRestore,
mdiPencilOutline,
mdiTrashCanOutline,
} from '@mdi/js';
import { mdiClose, mdiContentCopy, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
import { DateTime } from 'luxon';
import { onMount } from 'svelte';
import type { PageData } from './$types';
@@ -123,32 +115,22 @@
<section id="setting-content" class="flex place-content-center sm:mx-4">
<section class="w-full pb-28 lg:w-[850px]">
{#if shouldShowCreateUserForm}
<FullScreenModal
id="create-new-user-modal"
title="Create new user"
showLogo
<CreateUserForm
on:submit={onUserCreated}
on:cancel={() => (shouldShowCreateUserForm = false)}
onClose={() => (shouldShowCreateUserForm = false)}
>
<CreateUserForm on:submit={onUserCreated} on:cancel={() => (shouldShowCreateUserForm = false)} />
</FullScreenModal>
/>
{/if}
{#if shouldShowEditUserForm}
<FullScreenModal
id="edit-user-modal"
title="Edit user"
icon={mdiAccountEditOutline}
<EditUserForm
user={selectedUser}
bind:newPassword
canResetPassword={selectedUser?.id !== $user.id}
on:editSuccess={onEditUserSuccess}
on:resetPasswordSuccess={onEditPasswordSuccess}
onClose={() => (shouldShowEditUserForm = false)}
>
<EditUserForm
user={selectedUser}
bind:newPassword
canResetPassword={selectedUser?.id !== $user.id}
on:editSuccess={onEditUserSuccess}
on:resetPasswordSuccess={onEditPasswordSuccess}
on:close={() => (shouldShowEditUserForm = false)}
/>
</FullScreenModal>
/>
{/if}
{#if shouldShowDeleteConfirmDialog}