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

feat(web,server): user avatar color (#4779)

Browse source
This commit is contained in:
martin 2023-11-14 04:10:35 +01:00 • committed by GitHub
parent 14c7187539
commit d25a245049
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
58 changed files with 1123 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,35 +1,40 @@
<script lang="ts" context="module">
export type Color = 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green';
export type Size = 'full' | 'sm' | 'md' | 'lg' | 'xl';
export type Size = 'full' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
</script>
<script lang="ts">
import { imageLoad } from '$lib/utils/image-load';
import { api } from '@api';
import { UserAvatarColor, api } from '@api';
interface User {
id: string;
name: string;
email: string;
profileImagePath: string;
avatarColor: UserAvatarColor;
}
export let user: User;
export let color: Color = 'primary';
export let color: UserAvatarColor = user.avatarColor;
export let size: Size = 'full';
export let rounded = true;
export let interactive = false;
export let showTitle = true;
export let autoColor = false;
export let showProfileImage = true;
let showFallback = true;
const colorClasses: Record<Color, string> = {
const colorClasses: Record<UserAvatarColor, 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',
purple: 'bg-purple-600 text-immich-bg',
orange: 'bg-orange-600 text-immich-bg',
gray: 'bg-gray-600 text-immich-bg',
amber: 'bg-amber-600 text-immich-bg',
};
const sizeClasses: Record<Size, string> = {
@ -37,18 +42,12 @@
sm: 'w-7 h-7',
md: 'w-10 h-10',
lg: 'w-12 h-12',
xl: 'w-20 h-20',
xl: 'w-16 h-16',
xxl: 'w-24 h-24',
xxxl: 'w-28 h-28',
};
// 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];
$: colorClass = colorClasses[color];
$: sizeClass = sizeClasses[size];
$: title = `${user.name} (${user.email})`;
$: interactiveClass = interactive
@ -61,7 +60,7 @@
class:rounded-full={rounded}
title={showTitle ? title : undefined}
>
{#if user.profileImagePath}
{#if showProfileImage && user.profileImagePath}
<img
src={api.getProfileImageUrl(user.id)}
alt="Profile image of {title}"
@ -74,12 +73,12 @@
{/if}
{#if showFallback}
<span
class="flex h-full w-full select-none items-center justify-center"
class="flex h-full w-full select-none items-center justify-center font-medium"
class:text-xs={size === 'sm'}
class:text-lg={size === 'lg'}
class:text-xl={size === 'xl'}
class:font-medium={!autoColor}
class:font-semibold={autoColor}
class:text-2xl={size === 'xxl'}
class:text-3xl={size === 'xxxl'}
>
{(user.name[0] || '').toUpperCase()}
</span>