KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

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
12 changed files with 123 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View File

@@ -1,78 +1,45 @@
<script lang="ts">
import { UserResponseDto, api } from '@api';
import { UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
import Cog from 'svelte-material-icons/Cog.svelte';
import Logout from 'svelte-material-icons/Logout.svelte';
import { goto } from '$app/navigation';
import Button from '$lib/components/elements/buttons/button.svelte';
import UserAvatar from '../user-avatar.svelte';
import { AppRoute } from '$lib/constants';
export let user: UserResponseDto;
// Show fallback while loading profile picture and hide when image loads.
let showProfilePictureFallback = true;
const dispatch = createEventDispatcher();
const getFirstLetter = (text?: string) => {
return text?.charAt(0).toUpperCase();
};
</script>
<div
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] text-center z-[100]"
class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] z-[100]"
>
<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
<div class="flex place-items-center place-content-center">
<div
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg mt-4 select-none"
>
{#if user.profileImagePath}
<img
transition:fade={{ duration: 100 }}
class:hidden={showProfilePictureFallback}
src={api.getProfileImageUrl(user.id)}
alt="profile-img"
class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
draggable="false"
on:load={() => (showProfilePictureFallback = false)}
/>
{/if}
{#if showProfilePictureFallback}
<div transition:fade={{ duration: 200 }} class="text-lg">
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
</div>
{/if}
</div>
<div
class="flex flex-col items-center justify-center gap-4 bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 p-4"
>
<UserAvatar size="lg" {user} />
<div>
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium">
{user.firstName}
{user.lastName}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
</div>
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
{user.firstName}
{user.lastName}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
<div class="mt-4">
<Button
color="dark-gray"
size="sm"
shadow={false}
border
on:click={() => {
goto('/user-settings');
dispatch('close');
}}
>
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
<Button color="dark-gray" size="sm" shadow={false} border>
<div class="flex gap-2 place-items-center place-content-center px-2">
<Cog size="18" />
Account Settings
</div>
</Button>
</div>
</a>
</div>
<div class="mb-4 flex flex-col">