immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-19 17:23:21 +03:00
Code Issues Packages Projects Releases 17 Wiki Activity

feat(web,a11y): standardize the FullScreenModal UI (#8566)

Browse Source 
* 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
2024-04-08 21:02:09 +00:00
committed by GitHub
parent d43daaee81
commit 796c933fb8
43 changed files with 749 additions and 853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/lib/components/shared-components/confirm-dialogue.svelte
View File

@@ -3,6 +3,7 @@
import Button from '../elements/buttons/button.svelte';
import type { Color } from '$lib/components/elements/buttons/button.svelte';
export let id: string;
export let title = 'Confirm';
export let prompt = 'Are you sure you want to do this?';
export let confirmText = 'Confirm';
@@ -11,7 +12,7 @@
export let cancelColor: Color = 'primary';
export let hideCancelButton = false;
export let disabled = false;
export let width = 500;
export let width: 'wide' | 'narrow' = 'narrow';
export let onClose: () => void;
export let onConfirm: () => void;
@@ -23,35 +24,21 @@
};
</script>
<FullScreenModal {onClose}>
<div
class="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"
style="width: {width}px"
>
<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="pb-2 text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
</h1>
</div>
<div>
<div class="text-md px-4 py-5 text-center">
<slot name="prompt">
<p>{prompt}</p>
</slot>
</div>
<FullScreenModal {title} {id} {onClose} {width}>
<div class="text-md py-5 text-center">
<slot name="prompt">
<p>{prompt}</p>
</slot>
</div>
<div class="mt-4 flex w-full gap-4 px-4">
{#if !hideCancelButton}
<Button color={cancelColor} fullwidth on:click={onClose}>
{cancelText}
</Button>
{/if}
<Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={disabled || isConfirmButtonDisabled}>
{confirmText}
</Button>
</div>
</div>
<div class="mt-4 flex flex-col sm:flex-row w-full gap-4">
{#if !hideCancelButton}
<Button color={cancelColor} fullwidth on:click={onClose}>
{cancelText}
</Button>
{/if}
<Button color={confirmColor} fullwidth on:click={handleConfirm} disabled={disabled || isConfirmButtonDisabled}>
{confirmText}
</Button>
</div>
</FullScreenModal>