Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: avatar selector modal (#18228)

Browse Source
This commit is contained in:
Daniel Dietzler 2025-05-12 16:56:36 +02:00 committed by GitHub
parent feb475561e
commit 41a127e2ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 50 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View File

@ -5,15 +5,13 @@
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { AppRoute } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { deleteProfileImage, updateMyUser, type UserAvatarColor } from '@immich/sdk';
import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
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';
interface Props {
onLogout: () => void;
@ -21,26 +19,6 @@
}
let { onLogout, onClose = () => {} }: Props = $props();
let isShowSelectAvatar = $state(false);
const handleSaveProfile = async (color: UserAvatarColor) => {
try {
if ($user.profileImagePath !== '') {
await deleteProfileImage();
}
$user = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
isShowSelectAvatar = false;
notificationController.show({
message: $t('saved_profile'),
type: NotificationType.Info,
});
} catch (error) {
handleError(error, $t('errors.unable_to_save_profile'));
}
};
</script>
<div
@ -63,7 +41,7 @@
class="border"
size="12"
padding="2"
onclick={() => (isShowSelectAvatar = true)}
onclick={() => modalManager.show(AvatarEditModal, {})}
/>
</div>
</div>
@ -111,7 +89,3 @@
>
</div>
</div>
{#if isShowSelectAvatar}
<AvatarSelector user={$user} onClose={() => (isShowSelectAvatar = false)} onChoose={handleSaveProfile} />
{/if}

28
web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
View File

@ -1,28 +0,0 @@
<script lang="ts">
import { UserAvatarColor, type UserResponseDto } from '@immich/sdk';
import { t } from 'svelte-i18n';
import FullScreenModal from '../full-screen-modal.svelte';
import UserAvatar from '../user-avatar.svelte';
interface Props {
user: UserResponseDto;
onClose: () => void;
onChoose: (color: UserAvatarColor) => void;
}
let { user, onClose, onChoose }: Props = $props();
const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
</script>
<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 (color)}
<button type="button" onclick={() => onChoose(color)}>
<UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
</button>
{/each}
</div>
</div>
</FullScreenModal>

47
web/src/lib/modals/AvatarEditModal.svelte Normal file
View File

@ -0,0 +1,47 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { deleteProfileImage, updateMyUser, UserAvatarColor } from '@immich/sdk';
import { Modal, ModalBody } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
onClose: () => void;
}
let { onClose }: Props = $props();
const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
const onSave = async (color: UserAvatarColor) => {
try {
if ($user.profileImagePath !== '') {
await deleteProfileImage();
}
notificationController.show({ message: $t('saved_profile'), type: NotificationType.Info });
$user = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
onClose();
} catch (error) {
handleError(error, $t('errors.unable_to_save_profile'));
}
};
</script>
<Modal title={$t('select_avatar_color')} size="medium" {onClose}>
<ModalBody>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
{#each colors as color (color)}
<button type="button" onclick={() => onSave(color)}>
<UserAvatar label={color} user={$user} {color} size="xl" showProfileImage={false} />
</button>
{/each}
</div>
</ModalBody>
</Modal>