helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

26
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -2,7 +2,6 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { clickOutside } from '$lib/utils/click-outside';
import { imageLoad } from '$lib/utils/image-load';
import { createEventDispatcher } from 'svelte';
import { fade, fly } from 'svelte/transition';
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
@ -16,21 +15,15 @@
import Magnify from 'svelte-material-icons/Magnify.svelte';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import Cog from 'svelte-material-icons/Cog.svelte';
import UserAvatar from '../user-avatar.svelte';
export let user: UserResponseDto;
export let showUploadButton = true;
let shouldShowAccountInfo = false;
let shouldShowAccountInfoPanel = false;
// 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();
};
const logOut = async () => {
const { data } = await api.authenticationApi.logout();
@ -116,27 +109,14 @@
<div use:clickOutside on:outclick={() => (shouldShowAccountInfoPanel = false)}>
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
class="flex"
on:mouseover={() => (shouldShowAccountInfo = true)}
on:focus={() => (shouldShowAccountInfo = true)}
on:blur={() => (shouldShowAccountInfo = false)}
on:mouseleave={() => (shouldShowAccountInfo = false)}
on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
>
{#if user.profileImagePath}
<img
class:hidden={showProfilePictureFallback}
src={api.getProfileImageUrl(user.id)}
alt="profile-img"
class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
draggable="false"
use:imageLoad
on:image-load={() => (showProfilePictureFallback = false)}
/>
{/if}
{#if showProfilePictureFallback}
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
{/if}
<UserAvatar {user} size="md" showTitle={false} interactive />
</button>
{#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}