helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

14
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -27,7 +27,7 @@
import DownloadAction from '../photos-page/actions/download-action.svelte';
import RemoveFromAlbum from '../photos-page/actions/remove-from-album.svelte';
import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
import CircleAvatar from '../shared-components/circle-avatar.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
@ -478,13 +478,11 @@
</span>
{/if}
{#if album.shared}
<div class="my-6 flex">
{#each album.sharedUsers as user}
{#key user.id}
<span class="mr-1">
<CircleAvatar {user} on:click={() => (isShowShareInfoModal = true)} />
</span>
{/key}
<div class="flex my-6 gap-x-1">
{#each album.sharedUsers as user (user.id)}
<button on:click={() => (isShowShareInfoModal = true)}>
<UserAvatar {user} size="md" autoColor />
</button>
{/each}
<button

4
web/src/lib/components/album-page/share-info-modal.svelte
View file

@ -3,7 +3,7 @@
import { AlbumResponseDto, api, UserResponseDto } from '@api';
import { clickOutside } from '$lib/utils/click-outside';
import BaseModal from '../shared-components/base-modal.svelte';
import CircleAvatar from '../shared-components/circle-avatar.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
@ -79,7 +79,7 @@
class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
>
<div class="flex gap-4 place-items-center">
<CircleAvatar {user} />
<UserAvatar {user} size="md" autoColor />
<p class="font-medium text-sm">{user.firstName} {user.lastName}</p>
</div>

6
web/src/lib/components/album-page/user-selection-modal.svelte
View file

@ -2,7 +2,7 @@
import { createEventDispatcher, onMount } from 'svelte';
import { AlbumResponseDto, api, SharedLinkResponseDto, UserResponseDto } from '@api';
import BaseModal from '../shared-components/base-modal.svelte';
import CircleAvatar from '../shared-components/circle-avatar.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import Link from 'svelte-material-icons/Link.svelte';
import ShareCircle from 'svelte-material-icons/ShareCircle.svelte';
import { goto } from '$app/navigation';
@ -72,7 +72,7 @@
on:click={() => deselectUser(user)}
class="flex gap-1 place-items-center border border-gray-400 rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
>
<CircleAvatar size={28} {user} />
<UserAvatar {user} size="sm" autoColor />
<p class="text-xs font-medium">{user.firstName} {user.lastName}</p>
</button>
{/key}
@ -95,7 +95,7 @@
>✓</span
>
{:else}
<CircleAvatar {user} />
<UserAvatar {user} size="md" autoColor />
{/if}
<div class="text-left">