beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(web): accountinfopanel not closing on button press (#2276)

Browse source 
* fix accountinfopanel not closing on button press

* remove overcomplicated logic
replace with simpler logic and only one outside listener

* remove keydown

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>
This commit is contained in:
faupau 2023-04-18 17:02:51 +02:00 committed by GitHub
parent 137d246d6a
commit d45ff72c9c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,4 @@
<script lang="ts">
import { clickOutside } from '$lib/utils/click-outside';
import { UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores';
@ -26,8 +25,6 @@
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] bg-gray-200 dark:bg-immich-dark-gray dark:border dark:border-immich-dark-gray shadow-lg rounded-3xl w-[360px] text-center z-[100]"
use:clickOutside
on:outclick={() => dispatch('close')}
>
<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
<div class="flex place-items-center place-content-center">

36
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { clickOutside } from '$lib/utils/click-outside';
import { createEventDispatcher } from 'svelte';
import { fade, fly } from 'svelte/transition';
import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
@ -18,21 +19,17 @@
export let shouldShowUploadButton = true;
let shouldShowAccountInfo = false;
let shouldShowAccountInfoPanel = false;
// Show fallback while loading profile picture and hide when image loads.
let showProfilePictureFallback = true;
const dispatch = createEventDispatcher();
let shouldShowAccountInfoPanel = false;
const getFirstLetter = (text?: string) => {
return text?.charAt(0).toUpperCase();
};
const showAccountInfoPanel = () => {
shouldShowAccountInfoPanel = true;
};
const logOut = async () => {
const { data } = await api.authenticationApi.logout();
@ -116,15 +113,14 @@
</a>
{/if}
<div
on:mouseover={() => (shouldShowAccountInfo = true)}
on:focus={() => (shouldShowAccountInfo = true)}
on:mouseleave={() => (shouldShowAccountInfo = false)}
on:click={showAccountInfoPanel}
on:keydown={showAccountInfoPanel}
>
<div use:clickOutside on:outclick={() => (shouldShowAccountInfoPanel = false)}>
<button
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
on:mouseover={() => (shouldShowAccountInfo = true)}
on:focus={() => (shouldShowAccountInfo = true)}
on:blur={() => (shouldShowAccountInfo = false)}
on:mouseleave={() => (shouldShowAccountInfo = false)}
on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
>
{#if user.profileImagePath}
<img
@ -142,7 +138,7 @@
{/if}
</button>
{#if shouldShowAccountInfo}
{#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
<div
in:fade={{ delay: 500, duration: 150 }}
out:fade={{ delay: 200, duration: 150 }}
@ -152,16 +148,12 @@
<p>{user.email}</p>
</div>
{/if}
</div>
</section>
</div>
</div>
{#if shouldShowAccountInfoPanel}
<AccountInfoPanel
{user}
on:close={() => (shouldShowAccountInfoPanel = false)}
on:logout={logOut}
/>
<AccountInfoPanel {user} on:logout={logOut} />
{/if}
</div>
</section>
</div>
</div>
</section>