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 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 class="flex p-2 gap-4 h-fit bg-gray-200 text-immich-dark-gray rounded-3xl w-full">
<div> <div>
<UserAvatar {user} size="md" showTitle={false} /> <UserAvatar {user} size="md" noTitle />
</div> </div>
<form class="flex w-full max-h-56 gap-1" {onsubmit}> <form class="flex w-full max-h-56 gap-1" {onsubmit}>
<div class="flex w-full items-center gap-4"> <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})`} title={`${$user.name} (${$user.email})`}
> >
{#key $user} {#key $user}
<UserAvatar user={$user} size="md" showTitle={false} interactive /> <UserAvatar user={$user} size="md" noTitle interactive />
{/key} {/key}
</button> </button>

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

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

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

@ -34,12 +34,12 @@
}; };
</script> </script>
<Modal title={$t('select_avatar_color')} size="medium" {onClose}> <Modal title={$t('select_avatar_color')} size="small" {onClose}>
<ModalBody> <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)} {#each colors as color (color)}
<button type="button" onclick={() => onSave(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> </button>
{/each} {/each}
</div> </div>