Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-09 03:04:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: user avatar (#19121)

Browse Source
This commit is contained in:
Jason Rasmussen 2025-06-11 15:08:11 -04:00 committed by GitHub
parent 7a001d27a5
commit 38ad15af4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/asset-viewer/activity-viewer.svelte
View File

@ -247,7 +247,7 @@
<div class="flex items-center justify-center p-2" bind:clientHeight={chatHeight}>
<div class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
<div>
<UserAvatar {user} size="md" showTitle={false} />
<UserAvatar {user} size="md" noTitle />
</div>
<form class="flex w-full max-h-56 gap-1" {onsubmit}>
<div class="flex w-full items-center gap-4">

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -155,7 +155,7 @@
title={`${$user.name} (${$user.email})`}
>
{#key $user}
<UserAvatar user={$user} size="md" showTitle={false} interactive />
<UserAvatar user={$user} size="md" noTitle interactive />
{/key}
</button>

25
web/src/lib/components/shared-components/user-avatar.svelte
View File

@ -18,25 +18,13 @@
interface Props {
user: User;
color?: UserAvatarColor | undefined;
size?: Size;
rounded?: boolean;
interactive?: boolean;
showTitle?: boolean;
showProfileImage?: boolean;
noTitle?: boolean;
label?: string | undefined;
}
let {
user,
color = undefined,
size = 'full',
rounded = true,
interactive = false,
showTitle = true,
showProfileImage = true,
label = undefined,
}: Props = $props();
let { user, size = 'full', interactive = false, noTitle = false, label = undefined }: Props = $props();
let img: HTMLImageElement | undefined = $state();
let showFallback = $state(true);
@ -79,7 +67,7 @@
}
});
let colorClass = $derived(colorClasses[color || user.avatarColor]);
let colorClass = $derived(colorClasses[user.avatarColor]);
let sizeClass = $derived(sizeClasses[size]);
let title = $derived(label ?? `${user.name} (${user.email})`);
let interactiveClass = $derived(
@ -90,11 +78,10 @@
</script>
<figure
class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden shadow-md"
class:rounded-full={rounded}
title={showTitle ? title : undefined}
class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden shadow-md rounded-full"
title={noTitle ? undefined : title}
>
{#if showProfileImage && user.profileImagePath}
{#if user.profileImagePath}
<img
bind:this={img}
src={getProfileImageUrl(user)}

6
web/src/lib/modals/AvatarEditModal.svelte
View File

@ -34,12 +34,12 @@
};
</script>
<Modal title={$t('select_avatar_color')} size="medium" {onClose}>
<Modal title={$t('select_avatar_color')} size="small" {onClose}>
<ModalBody>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
<div class="grid grid-cols-2 sm:grid-cols-5 gap-4 place-items-center">
{#each colors as color (color)}
<button type="button" onclick={() => onSave(color)}>
<UserAvatar label={color} user={$user} {color} size="xl" showProfileImage={false} />
<UserAvatar label={color} user={{ ...$user, profileImagePath: '', avatarColor: color }} size="xl" />
</button>
{/each}
</div>