mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web,server): user avatar color (#4779)
This commit is contained in:
martin
GitHub
parent
14c7187539
commit
d25a245049
58 changed files with 1123 additions and 141 deletions
|
|
@ -77,7 +77,7 @@
|
|||
<section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
|
||||
<div class="flex w-full place-items-center justify-between gap-4 p-5">
|
||||
<div class="flex place-items-center gap-4">
|
||||
<UserAvatar user={album.owner} size="md" autoColor />
|
||||
<UserAvatar user={album.owner} size="md" />
|
||||
<p class="text-sm font-medium">{album.owner.name}</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
class="flex w-full place-items-center justify-between gap-4 p-5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
>
|
||||
<div class="flex place-items-center gap-4">
|
||||
<UserAvatar {user} size="md" autoColor />
|
||||
<UserAvatar {user} size="md" />
|
||||
<p class="text-sm font-medium">{user.name}</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
on:click={() => handleUnselect(user)}
|
||||
class="flex place-items-center gap-1 rounded-full border border-gray-400 p-1 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
|
||||
>
|
||||
<UserAvatar {user} size="sm" autoColor />
|
||||
<UserAvatar {user} size="sm" />
|
||||
<p class="text-xs font-medium">{user.name}</p>
|
||||
</button>
|
||||
{/key}
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
>✓</span
|
||||
>
|
||||
{:else}
|
||||
<UserAvatar {user} size="md" autoColor />
|
||||
<UserAvatar {user} size="md" />
|
||||
{/if}
|
||||
|
||||
<div class="text-left">
|
||||
|
|
|
|||
|
|
@ -333,7 +333,7 @@
|
|||
<p class="text-sm">SHARED BY</p>
|
||||
<div class="flex gap-4 pt-4">
|
||||
<div>
|
||||
<UserAvatar user={asset.owner} size="md" autoColor />
|
||||
<UserAvatar user={asset.owner} size="md" />
|
||||
</div>
|
||||
|
||||
<div class="mb-auto mt-auto">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,48 @@
|
|||
<script lang="ts">
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import type { UserResponseDto } from '@api';
|
||||
import { api, UserAvatarColor, type UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import UserAvatar from '../user-avatar.svelte';
|
||||
import { mdiCog, mdiLogout } from '@mdi/js';
|
||||
import { mdiCog, mdiLogout, mdiPencil } from '@mdi/js';
|
||||
import { notificationController, NotificationType } from '../notification/notification';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import AvatarSelector from './avatar-selector.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
let isShowSelectAvatar = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const handleSaveProfile = async (color: UserAvatarColor) => {
|
||||
try {
|
||||
if (user.profileImagePath !== '') {
|
||||
await api.userApi.deleteProfileImage();
|
||||
}
|
||||
|
||||
const { data } = await api.userApi.updateUser({
|
||||
updateUserDto: {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
name: user.name,
|
||||
avatarColor: color,
|
||||
},
|
||||
});
|
||||
|
||||
user = data;
|
||||
isShowSelectAvatar = false;
|
||||
|
||||
notificationController.show({
|
||||
message: 'Saved profile',
|
||||
type: NotificationType.Info,
|
||||
});
|
||||
} catch (error) {
|
||||
handleError(error, 'Unable to save profile');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
@ -22,8 +54,22 @@
|
|||
<div
|
||||
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"
|
||||
>
|
||||
<UserAvatar size="xl" {user} />
|
||||
<div class="relative">
|
||||
{#key user}
|
||||
<UserAvatar {user} size="xl" />
|
||||
|
||||
<div
|
||||
class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6 border dark:border-immich-dark-primary bg-immich-primary"
|
||||
>
|
||||
<button
|
||||
class="flex items-center justify-center w-full h-full text-white"
|
||||
on:click={() => (isShowSelectAvatar = true)}
|
||||
>
|
||||
<Icon path={mdiPencil} />
|
||||
</button>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
{user.name}
|
||||
|
|
@ -51,3 +97,10 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
{#if isShowSelectAvatar}
|
||||
<AvatarSelector
|
||||
{user}
|
||||
on:close={() => (isShowSelectAvatar = false)}
|
||||
on:choose={({ detail: color }) => handleSaveProfile(color)}
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<script lang="ts">
|
||||
import { mdiClose } from '@mdi/js';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { UserAvatarColor, UserResponseDto } from '@api';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import FullScreenModal from '../full-screen-modal.svelte';
|
||||
import UserAvatar from '../user-avatar.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
|
||||
</script>
|
||||
|
||||
<FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => dispatch('close')}>
|
||||
<div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
|
||||
<div
|
||||
class=" rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<h1 class="px-4 w-full self-center font-medium text-immich-primary dark:text-immich-dark-primary text-sm">
|
||||
SELECT AVATAR COLOR
|
||||
</h1>
|
||||
<div>
|
||||
<CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center p-4 mt-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
{#each colors as color}
|
||||
<button on:click={() => dispatch('choose', color)}>
|
||||
<UserAvatar {user} {color} size="xl" showProfileImage={false} />
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FullScreenModal>
|
||||
|
|
@ -124,7 +124,9 @@
|
|||
on:mouseleave={() => (shouldShowAccountInfo = false)}
|
||||
on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
|
||||
>
|
||||
<UserAvatar {user} size="lg" showTitle={false} interactive />
|
||||
{#key user}
|
||||
<UserAvatar {user} size="lg" showTitle={false} interactive />
|
||||
{/key}
|
||||
</button>
|
||||
|
||||
{#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
|
||||
|
|
@ -139,7 +141,7 @@
|
|||
{/if}
|
||||
|
||||
{#if shouldShowAccountInfoPanel}
|
||||
<AccountInfoPanel {user} on:logout={logOut} />
|
||||
<AccountInfoPanel bind:user on:logout={logOut} />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
>✓</span
|
||||
>
|
||||
{:else}
|
||||
<UserAvatar {user} size="lg" autoColor />
|
||||
<UserAvatar {user} size="lg" />
|
||||
{/if}
|
||||
|
||||
<div class="text-left">
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
<div class="rounded-2xl border border-gray-200 dark:border-gray-800 mt-6 bg-slate-50 dark:bg-gray-900 p-5">
|
||||
<div class="flex gap-4 rounded-lg pb-4 transition-all justify-between">
|
||||
<div class="flex gap-4">
|
||||
<UserAvatar user={partner.user} size="md" autoColor />
|
||||
<UserAvatar user={partner.user} size="md" />
|
||||
<div class="text-left">
|
||||
<p class="text-immich-fg dark:text-immich-dark-fg">
|
||||
{partner.user.name}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue