self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-23 04:38:12 +02:00
Code Issues Releases Activity

Implemented user profile upload and show on web/mobile (#191)

Browse Source 
* Update mobile dependencies

* Added image picker

* Added mechanism to upload profile image

* Added image type to send to web

* Added styling for circle avatar

* Fixxed issue with sharp cannot resize image properly

* Finished displaying and uploading user profile

* Added user profile to web
This commit is contained in:
Alex
2022-05-28 22:35:45 -05:00
committed by GitHub
parent bdf38e7668
commit d476b15312
17 changed files with 579 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/lib/components/shared/navigation-bar.svelte
View File

@ -1,12 +1,20 @@
<script lang="ts">
import { page } from '$app/stores';
import type { ImmichUser } from '$lib/models/immich-user';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { serverEndpoint } from '../../constants';
export let user: ImmichUser;
let shouldShowAccountInfo = false;
let shouldShowProfileImage = false;
onMount(async () => {
const res = await fetch(`${serverEndpoint}/user/profile-image/${user.id}`);
if (res.status == 200) shouldShowProfileImage = true;
});
const getFirstLetter = (text?: string) => {
return text?.charAt(0).toUpperCase();
};
@ -39,9 +47,17 @@
on:mouseleave={() => (shouldShowAccountInfo = false)}
>
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary/80 h-10 w-10 text-gray-100 hover:bg-immich-primary"
class="flex place-items-center place-content-center rounded-full bg-immich-primary/80 h-12 w-12 text-gray-100 hover:bg-immich-primary"
>
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
{#if shouldShowProfileImage}
<img
src={`${serverEndpoint}/user/profile-image/${user.id}`}
alt="profile-img"
class="inline rounded-full h-12 w-12 object-cover shadow-md"
/>
{:else}
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
{/if}
</button>
{#if shouldShowAccountInfo}