self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-24 08:52:28 +02:00
Code Issues Releases Activity

fix(web): better invite shared user to album layout (#6511)

Browse Source 
* fix(web): better invite to album design

* rounded corner

* use icon

* padding
This commit is contained in:
Alex 2024-01-19 12:27:29 -06:00 committed by GitHub
parent 17eaeb695e
commit 88ac3c2016
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/lib/components/album-page/user-selection-modal.svelte
View File

@ -7,7 +7,7 @@
import ImmichLogo from '../shared-components/immich-logo.svelte';
import Button from '../elements/buttons/button.svelte';
import { AppRoute } from '$lib/constants';
import { mdiLink, mdiShareCircle } from '@mdi/js';
import { mdiCheck, mdiLink, mdiShareCircle } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
export let album: AlbumResponseDto;
@ -60,28 +60,25 @@
</span>
</svelte:fragment>
<div class="immich-scrollbar max-h-[300px] overflow-y-auto">
{#if selectedUsers.length > 0}
<div class="mb-2 flex place-items-center gap-4 overflow-x-auto px-5 py-2">
<p class="font-medium">To</p>
{#if selectedUsers.length > 0}
<div class="mb-2 flex flex-wrap place-items-center gap-4 overflow-x-auto px-5 py-2 sticky">
<p class="font-medium">To</p>
{#each selectedUsers as user}
{#key user.id}
<button
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" />
<p class="text-xs font-medium">{user.name}</p>
</button>
{/key}
{/each}
<div class="flex place-content-end mr-0 ml-auto p-5">
<Button size="sm" rounded="lg" on:click={() => dispatch('select', selectedUsers)}>Add</Button>
</div>
</div>
{/if}
{#each selectedUsers as user}
{#key user.id}
<button
on:click={() => handleUnselect(user)}
class="flex place-items-center gap-1 rounded-full border border-gray-500 p-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
>
<UserAvatar {user} size="sm" />
<p class="text-xs font-medium">{user.name}</p>
</button>
{/key}
{/each}
</div>
{/if}
<div class="immich-scrollbar max-h-[500px] overflow-y-auto">
{#if users.length > 0}
<p class="px-5 text-xs font-medium">SUGGESTIONS</p>
@ -95,7 +92,7 @@
<div
class="flex h-10 w-10 items-center justify-center rounded-full border bg-immich-primary text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-primary dark:text-immich-dark-bg"
>
<p>✓</p>
<Icon path={mdiCheck} size={24} />
</div>
{:else}
<UserAvatar {user} size="md" />
@ -119,7 +116,20 @@
{/if}
</div>
{#if users.length > 0}
<div class="p-3">
<Button
size="sm"
fullwidth
rounded="full"
disabled={!selectedUsers.length}
on:click={() => dispatch('select', selectedUsers)}>Add</Button
>
</div>
{/if}
<hr />
<div id="shared-buttons" class="my-4 flex place-content-center place-items-center justify-around">
<button
class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"