feat(web,a11y): standardize the FullScreenModal UI (#8566)
* feat(web,a11y): standardize the FullScreenModal look * consistent header, padding, close button, and radius as BaseModal * vertically stacking ConfirmDialogue CTA buttons in narrow screens * adding aria-modal tags for screen reader * add viewport-specific height limits on modals, to enable scrolling * prevent focus from being hidden under sticky content in modals * standardize FullScreenModal widths using a Prop * wip: consistent padding with header * fix: alignment on "create user" and "edit user" modals * fix: horizontal modal content alignment * fix: create user CTA buttons * chore: remove unnecessary warning --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Ben
@@ -683,6 +683,7 @@
|
||||
|
||||
{#if viewMode === ViewMode.CONFIRM_DELETE}
|
||||
<ConfirmDialogue
|
||||
id="delete-album-modal"
|
||||
title="Delete album"
|
||||
confirmText="Delete"
|
||||
onConfirm={handleRemoveAlbum}
|
||||
|
||||
@@ -463,35 +463,25 @@
|
||||
{/if}
|
||||
|
||||
{#if showChangeNameModal}
|
||||
<FullScreenModal onClose={() => (showChangeNameModal = false)}>
|
||||
<div
|
||||
class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Change name</h1>
|
||||
<FullScreenModal id="change-name-modal" title="Change name" onClose={() => (showChangeNameModal = false)}>
|
||||
<form on:submit|preventDefault={submitNameChange} autocomplete="off">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="name">Name</label>
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} autofocus />
|
||||
</div>
|
||||
|
||||
<form on:submit|preventDefault={submitNameChange} autocomplete="off">
|
||||
<div class="m-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="name">Name</label>
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} autofocus />
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex w-full gap-4 px-4">
|
||||
<Button
|
||||
color="gray"
|
||||
fullwidth
|
||||
on:click={() => {
|
||||
showChangeNameModal = false;
|
||||
}}>Cancel</Button
|
||||
>
|
||||
<Button type="submit" fullwidth>Ok</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mt-8 flex w-full gap-4">
|
||||
<Button
|
||||
color="gray"
|
||||
fullwidth
|
||||
on:click={() => {
|
||||
showChangeNameModal = false;
|
||||
}}>Cancel</Button
|
||||
>
|
||||
<Button type="submit" fullwidth>Ok</Button>
|
||||
</div>
|
||||
</form>
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -88,7 +88,8 @@
|
||||
|
||||
{#if deleteLinkId}
|
||||
<ConfirmDialogue
|
||||
title="Delete Shared Link"
|
||||
id="delete-shared-link-modal"
|
||||
title="Delete shared link"
|
||||
prompt="Are you sure you want to delete this shared link?"
|
||||
confirmText="Delete"
|
||||
onConfirm={() => handleDeleteLink()}
|
||||
|
||||
@@ -98,7 +98,8 @@
|
||||
|
||||
{#if isShowEmptyConfirmation}
|
||||
<ConfirmDialogue
|
||||
title="Empty Trash"
|
||||
id="empty-trash-modal"
|
||||
title="Empty trash"
|
||||
confirmText="Empty"
|
||||
onConfirm={handleEmptyTrash}
|
||||
onClose={() => (isShowEmptyConfirmation = false)}
|
||||
|
||||
@@ -302,6 +302,7 @@
|
||||
|
||||
{#if confirmDeleteLibrary}
|
||||
<ConfirmDialogue
|
||||
id="warning-modal"
|
||||
title="Warning!"
|
||||
prompt="Are you sure you want to delete this library? This will delete all {deleteAssetCount} contained assets from Immich and cannot be undone. Files will remain on disk."
|
||||
onConfirm={handleDelete}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
|
||||
import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
|
||||
import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialogue.svelte';
|
||||
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
||||
import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
|
||||
import RestoreDialogue from '$lib/components/admin-page/restore-dialogue.svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
|
||||
@@ -21,7 +21,14 @@
|
||||
import { asByteUnitString } from '$lib/utils/byte-units';
|
||||
import { copyToClipboard } from '$lib/utils';
|
||||
import { UserStatus, getAllUsers, type UserResponseDto } from '@immich/sdk';
|
||||
import { mdiClose, mdiContentCopy, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
|
||||
import {
|
||||
mdiAccountEditOutline,
|
||||
mdiClose,
|
||||
mdiContentCopy,
|
||||
mdiDeleteRestore,
|
||||
mdiPencilOutline,
|
||||
mdiTrashCanOutline,
|
||||
} from '@mdi/js';
|
||||
import { DateTime } from 'luxon';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from './$types';
|
||||
@@ -116,13 +123,23 @@
|
||||
<section id="setting-content" class="flex place-content-center sm:mx-4">
|
||||
<section class="w-full pb-28 lg:w-[850px]">
|
||||
{#if shouldShowCreateUserForm}
|
||||
<FullScreenModal onClose={() => (shouldShowCreateUserForm = false)}>
|
||||
<FullScreenModal
|
||||
id="create-new-user-modal"
|
||||
title="Create new user"
|
||||
showLogo
|
||||
onClose={() => (shouldShowCreateUserForm = false)}
|
||||
>
|
||||
<CreateUserForm on:submit={onUserCreated} on:cancel={() => (shouldShowCreateUserForm = false)} />
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
{#if shouldShowEditUserForm}
|
||||
<FullScreenModal onClose={() => (shouldShowEditUserForm = false)}>
|
||||
<FullScreenModal
|
||||
id="edit-user-modal"
|
||||
title="Edit user"
|
||||
icon={mdiAccountEditOutline}
|
||||
onClose={() => (shouldShowEditUserForm = false)}
|
||||
>
|
||||
<EditUserForm
|
||||
user={selectedUser}
|
||||
bind:newPassword
|
||||
@@ -153,40 +170,39 @@
|
||||
{/if}
|
||||
|
||||
{#if shouldShowPasswordResetSuccess}
|
||||
<FullScreenModal onClose={() => (shouldShowPasswordResetSuccess = false)}>
|
||||
<ConfirmDialogue
|
||||
title="Password Reset Success"
|
||||
confirmText="Done"
|
||||
onConfirm={() => (shouldShowPasswordResetSuccess = false)}
|
||||
onClose={() => (shouldShowPasswordResetSuccess = false)}
|
||||
hideCancelButton={true}
|
||||
confirmColor="green"
|
||||
>
|
||||
<svelte:fragment slot="prompt">
|
||||
<div class="flex flex-col gap-4">
|
||||
<p>The user's password has been reset:</p>
|
||||
<ConfirmDialogue
|
||||
id="password-reset-success-modal"
|
||||
title="Password reset success"
|
||||
confirmText="Done"
|
||||
onConfirm={() => (shouldShowPasswordResetSuccess = false)}
|
||||
onClose={() => (shouldShowPasswordResetSuccess = false)}
|
||||
hideCancelButton={true}
|
||||
confirmColor="green"
|
||||
>
|
||||
<svelte:fragment slot="prompt">
|
||||
<div class="flex flex-col gap-4">
|
||||
<p>The user's password has been reset:</p>
|
||||
|
||||
<div class="flex justify-center gap-2">
|
||||
<code
|
||||
class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
|
||||
>
|
||||
{newPassword}
|
||||
</code>
|
||||
<LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<Icon path={mdiContentCopy} size="18" />
|
||||
</div>
|
||||
</LinkButton>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Please provide the temporary password to the user and inform them they will need to change the
|
||||
password at their next login.
|
||||
</p>
|
||||
<div class="flex justify-center gap-2">
|
||||
<code
|
||||
class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
|
||||
>
|
||||
{newPassword}
|
||||
</code>
|
||||
<LinkButton on:click={() => copyToClipboard(newPassword)} title="Copy password">
|
||||
<div class="flex place-items-center gap-2 text-sm">
|
||||
<Icon path={mdiContentCopy} size="18" />
|
||||
</div>
|
||||
</LinkButton>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
</FullScreenModal>
|
||||
|
||||
<p>
|
||||
Please provide the temporary password to the user and inform them they will need to change the password
|
||||
at their next login.
|
||||
</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</ConfirmDialogue>
|
||||
{/if}
|
||||
|
||||
<table class="my-5 w-full text-left">
|
||||
|
||||
Reference in New Issue
Block a user