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 7

refactor(web): user avatar (#2585)

Browse source 
* refactor(web): user avatar

* change user settings link

* update package lock json

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Michel Heusschen 2023-05-28 15:10:55 +02:00 • committed by GitHub
parent bca4626708
commit e7ad622c02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 123 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,79 @@
<script lang="ts" context="module">
export type Color = 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green';
export type Size = 'full' | 'sm' | 'md' | 'lg';
</script>
<script lang="ts">
import { imageLoad } from '$lib/utils/image-load';
import { api, UserResponseDto } from '@api';
export let user: UserResponseDto;
export let color: Color = 'primary';
export let size: Size = 'full';
export let rounded = true;
export let interactive = false;
export let showTitle = true;
export let autoColor = false;
let showFallback = true;
const colorClasses: Record<Color, string> = {
primary:
'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
pink: 'bg-pink-400 text-immich-bg',
red: 'bg-red-500 text-immich-bg',
yellow: 'bg-yellow-500 text-immich-bg',
blue: 'bg-blue-500 text-immich-bg',
green: 'bg-green-600 text-immich-bg'
};
const sizeClasses: Record<Size, string> = {
full: 'w-full h-full',
sm: 'w-7 h-7',
md: 'w-12 h-12',
lg: 'w-20 h-20'
};
// Get color based on the user UUID.
function getUserColor() {
const seed = parseInt(user.id.split('-')[0], 16);
const colors = Object.keys(colorClasses).filter((color) => color !== 'primary') as Color[];
const randomIndex = seed % colors.length;
return colors[randomIndex];
}
$: colorClass = colorClasses[autoColor ? getUserColor() : color];
$: sizeClass = sizeClasses[size];
$: title = `${user.firstName} ${user.lastName} (${user.email})`;
$: interactiveClass = interactive
? 'border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-colors'
: '';
</script>
<figure
class="{sizeClass} {colorClass} {interactiveClass} shadow-md overflow-hidden"
class:rounded-full={rounded}
title={showTitle ? title : undefined}
>
{#if user.profileImagePath}
<img
src={api.getProfileImageUrl(user.id)}
alt="Profile image of {title}"
class="object-cover w-full h-full"
class:hidden={showFallback}
draggable="false"
use:imageLoad
on:image-load={() => (showFallback = false)}
/>
{/if}
{#if showFallback}
<span
class="flex justify-center items-center w-full h-full select-none"
class:text-xs={size === 'sm'}
class:text-lg={size === 'lg'}
class:font-medium={!autoColor}
class:font-semibold={autoColor}
>
{(user.firstName[0] + user.lastName[0]).toUpperCase()}
</span>
{/if}
</figure>