c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

fix(web): update avatar color immediately (#10393)

Browse source
This commit is contained in:
Michel Heusschen 2024-06-16 17:38:32 +02:00 committed by GitHub
parent 010eb1e0d6
commit 0b08af7082
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,6 +29,7 @@
} }
$preferences = await updateMyPreferences({ userPreferencesUpdateDto: { avatar: { color } } }); $preferences = await updateMyPreferences({ userPreferencesUpdateDto: { avatar: { color } } });
$user = { ...$user, profileImagePath: '', avatarColor: $preferences.avatar.color };
isShowSelectAvatar = false; isShowSelectAvatar = false;
notificationController.show({ notificationController.show({
@ -52,9 +53,7 @@
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10" class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
> >
<div class="relative"> <div class="relative">
{#key $user} <UserAvatar user={$user} size="xl" />
<UserAvatar user={$user} size="xl" />
{/key}
<div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6"> <div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6">
<CircleIconButton <CircleIconButton
color="primary" color="primary"
@ -96,6 +95,7 @@
</div> </div>
</div> </div>
</FocusTrap> </FocusTrap>
{#if isShowSelectAvatar} {#if isShowSelectAvatar}
<AvatarSelector <AvatarSelector
user={$user} user={$user}

22
web/src/lib/components/shared-components/user-avatar.svelte
View file

@ -5,7 +5,6 @@
<script lang="ts"> <script lang="ts">
import { getProfileImageUrl } from '$lib/utils'; import { getProfileImageUrl } from '$lib/utils';
import { type UserAvatarColor } from '@immich/sdk'; import { type UserAvatarColor } from '@immich/sdk';
import { onMount, tick } from 'svelte';
interface User { interface User {
id: string; id: string;
@ -16,7 +15,7 @@
} }
export let user: User; export let user: User;
export let color: UserAvatarColor = user.avatarColor; export let color: UserAvatarColor | undefined = undefined;
export let size: Size = 'full'; export let size: Size = 'full';
export let rounded = true; export let rounded = true;
export let interactive = false; export let interactive = false;
@ -27,15 +26,16 @@
let img: HTMLImageElement; let img: HTMLImageElement;
let showFallback = true; let showFallback = true;
onMount(async () => { $: img, user, void tryLoadImage();
if (!user.profileImagePath) {
return;
}
await img.decode(); const tryLoadImage = async () => {
await tick(); try {
showFallback = false; await img.decode();
}); showFallback = false;
} catch {
showFallback = true;
}
};
const colorClasses: Record<UserAvatarColor, string> = { const colorClasses: Record<UserAvatarColor, string> = {
primary: 'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg', primary: 'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
@ -60,7 +60,7 @@
xxxl: 'w-28 h-28', xxxl: 'w-28 h-28',
}; };
$: colorClass = colorClasses[color]; $: colorClass = colorClasses[color || user.avatarColor];
$: sizeClass = sizeClasses[size]; $: sizeClass = sizeClasses[size];
$: title = label ?? `${user.name} (${user.email})`; $: title = label ?? `${user.name} (${user.email})`;
$: interactiveClass = interactive $: interactiveClass = interactive