c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases 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"> <script lang="ts">
import { clickOutside } from '$lib/utils/click-outside';
import { UserResponseDto } from '@api'; import { UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores'; import { page } from '$app/stores';
@ -26,8 +25,6 @@
out:fade={{ duration: 100 }} out:fade={{ duration: 100 }}
id="account-info-panel" 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]" 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="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"> <div class="flex place-items-center place-content-center">

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

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