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

refactor(web): focus trap (#10915)

Browse source
This commit is contained in:
Michel Heusschen 2024-07-08 03:33:07 +02:00 • committed by GitHub
parent 39221c8d1f
commit cb40db9555
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 407 additions and 365 deletions
Download patch file Download diff file Expand all files Collapse all files

99
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import { focusTrap } from '$lib/actions/focus-trap';
import Button from '$lib/components/elements/buttons/button.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
import { AppRoute } from '$lib/constants';
import { preferences, user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
@ -42,59 +42,58 @@
};
</script>
<FocusTrap>
<div
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
use:focusTrap
>
<div
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
>
<div
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
>
<div class="relative">
<UserAvatar user={$user} size="xl" />
<div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6">
<CircleIconButton
color="primary"
icon={mdiPencil}
title={$t('edit_avatar')}
class="border"
size="12"
padding="2"
on:click={() => (isShowSelectAvatar = true)}
/>
<div class="relative">
<UserAvatar user={$user} size="xl" />
<div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6">
<CircleIconButton
color="primary"
icon={mdiPencil}
title={$t('edit_avatar')}
class="border"
size="12"
padding="2"
on:click={() => (isShowSelectAvatar = true)}
/>
</div>
</div>
<div>
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
{$user.name}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
</div>
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
<Button color="dark-gray" size="sm" shadow={false} border>
<div class="flex place-content-center place-items-center gap-2 px-2">
<Icon path={mdiCog} size="18" />
{$t('account_settings')}
</div>
</div>
<div>
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
{$user.name}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
</div>
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
<Button color="dark-gray" size="sm" shadow={false} border>
<div class="flex place-content-center place-items-center gap-2 px-2">
<Icon path={mdiCog} size="18" />
{$t('account_settings')}
</div>
</Button>
</a>
</div>
<div class="mb-4 flex flex-col">
<button
type="button"
class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
on:click={() => dispatch('logout')}
>
<Icon path={mdiLogout} size={24} />
{$t('sign_out')}</button
>
</div>
</Button>
</a>
</div>
</FocusTrap>
<div class="mb-4 flex flex-col">
<button
type="button"
class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
on:click={() => dispatch('logout')}
>
<Icon path={mdiLogout} size={24} />
{$t('sign_out')}</button
>
</div>
</div>
{#if isShowSelectAvatar}
<AvatarSelector