mirror of
https://github.com/immich-app/immich.git
synced 2025-11-23 16:50:54 +09:00
796c933fb8
* 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>
27 lines
945 B
Svelte
27 lines
945 B
Svelte
<script lang="ts">
|
|
import { UserAvatarColor, type UserResponseDto } from '@immich/sdk';
|
|
import { createEventDispatcher } from 'svelte';
|
|
import FullScreenModal from '../full-screen-modal.svelte';
|
|
import UserAvatar from '../user-avatar.svelte';
|
|
|
|
export let user: UserResponseDto;
|
|
|
|
const dispatch = createEventDispatcher<{
|
|
close: void;
|
|
choose: UserAvatarColor;
|
|
}>();
|
|
const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
|
|
</script>
|
|
|
|
<FullScreenModal id="avatar-selector-modal" title="Select avatar color" width="auto" onClose={() => dispatch('close')}>
|
|
<div class="flex items-center justify-center mt-4">
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
{#each colors as color}
|
|
<button on:click={() => dispatch('choose', color)}>
|
|
<UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</FullScreenModal>
|