tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-04 03:39:37 -05:00
Code Issues Packages Projects Releases Wiki 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

26
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 ImmichLogo from '../shared-components/immich-logo.svelte';
import Button from '../elements/buttons/button.svelte'; import Button from '../elements/buttons/button.svelte';
import { AppRoute } from '$lib/constants'; 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'; import Icon from '$lib/components/elements/icon.svelte';
export let album: AlbumResponseDto; export let album: AlbumResponseDto;
@ -60,28 +60,25 @@
</span> </span>
</svelte:fragment> </svelte:fragment>
<div class="immich-scrollbar max-h-[300px] overflow-y-auto">
{#if selectedUsers.length > 0} {#if selectedUsers.length > 0}
<div class="mb-2 flex place-items-center gap-4 overflow-x-auto px-5 py-2"> <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> <p class="font-medium">To</p>
{#each selectedUsers as user} {#each selectedUsers as user}
{#key user.id} {#key user.id}
<button <button
on:click={() => handleUnselect(user)} 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" 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" /> <UserAvatar {user} size="sm" />
<p class="text-xs font-medium">{user.name}</p> <p class="text-xs font-medium">{user.name}</p>
</button> </button>
{/key} {/key}
{/each} {/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> </div>
{/if} {/if}
<div class="immich-scrollbar max-h-[500px] overflow-y-auto">
{#if users.length > 0} {#if users.length > 0}
<p class="px-5 text-xs font-medium">SUGGESTIONS</p> <p class="px-5 text-xs font-medium">SUGGESTIONS</p>
@ -95,7 +92,7 @@
<div <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" 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> </div>
{:else} {:else}
<UserAvatar {user} size="md" /> <UserAvatar {user} size="md" />
@ -119,7 +116,20 @@
{/if} {/if}
</div> </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 /> <hr />
<div id="shared-buttons" class="my-4 flex place-content-center place-items-center justify-around"> <div id="shared-buttons" class="my-4 flex place-content-center place-items-center justify-around">
<button <button
class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer" class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"