helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(web): migrate away from event dispatcher (#12802)

Browse source
This commit is contained in:
Jason Rasmussen 2024-09-19 18:20:09 -04:00 • committed by GitHub
parent cfc575d89c
commit 94fc1f213a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 76 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts">
import { page } from '$app/stores';
import { focusTrap } from '$lib/actions/focus-trap';
import Button from '$lib/components/elements/buttons/button.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
@ -9,12 +10,11 @@
import { deleteProfileImage, updateMyPreferences, type UserAvatarColor } from '@immich/sdk';
import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { NotificationType, notificationController } from '../notification/notification';
import UserAvatar from '../user-avatar.svelte';
import AvatarSelector from './avatar-selector.svelte';
import { t } from 'svelte-i18n';
import { page } from '$app/stores';
let isShowSelectAvatar = false;
@ -120,9 +120,5 @@
</div>
{#if isShowSelectAvatar}
<AvatarSelector
user={$user}
on:close={() => (isShowSelectAvatar = false)}
on:choose={({ detail: color }) => handleSaveProfile(color)}
/>
<AvatarSelector user={$user} onClose={() => (isShowSelectAvatar = false)} onChoose={handleSaveProfile} />
{/if}

13
web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
View file

@ -1,24 +1,21 @@
<script lang="ts">
import { UserAvatarColor, type UserResponseDto } from '@immich/sdk';
import { createEventDispatcher } from 'svelte';
import { t } from 'svelte-i18n';
import FullScreenModal from '../full-screen-modal.svelte';
import UserAvatar from '../user-avatar.svelte';
import { t } from 'svelte-i18n';
export let user: UserResponseDto;
export let onClose: () => void;
export let onChoose: (color: UserAvatarColor) => void;
const dispatch = createEventDispatcher<{
close: void;
choose: UserAvatarColor;
}>();
const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
</script>
<FullScreenModal title={$t('select_avatar_color')} width="auto" onClose={() => dispatch('close')}>
<FullScreenModal title={$t('select_avatar_color')} width="auto" {onClose}>
<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 type="button" on:click={() => dispatch('choose', color)}>
<button type="button" on:click={() => onChoose(color)}>
<UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
</button>
{/each}