Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-21 00:52:43 -05:00
Code Issues Activity

fix(web): hide license popup after mouse leave (#11193)

Browse source
This commit is contained in:
Michel Heusschen 2024-07-18 20:13:45 +02:00 • committed by GitHub
parent 01ba859567
commit a9dd013daf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 28 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web/src/lib/components/shared-components/side-bar/license-info.svelte
View file

@ -10,15 +10,31 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { getAccountAge } from '$lib/utils/auth'; import { getAccountAge } from '$lib/utils/auth';
import { fade } from 'svelte/transition';
let showMessage = false; let showMessage = false;
let isOpen = false; let isOpen = false;
let hoverMessage = false;
let hoverButton = false;
const { isLicenseActivated } = licenseStore; const { isLicenseActivated } = licenseStore;
const openLicenseModal = () => { const openLicenseModal = () => {
isOpen = true; isOpen = true;
showMessage = false; showMessage = false;
}; };
const onButtonHover = () => {
showMessage = true;
hoverButton = true;
};
$: if (showMessage && !hoverMessage && !hoverButton) {
setTimeout(() => {
if (!hoverMessage && !hoverButton) {
showMessage = false;
}
}, 300);
}
</script> </script>
{#if isOpen} {#if isOpen}
@ -41,7 +57,10 @@
<button <button
type="button" type="button"
on:click={openLicenseModal} on:click={openLicenseModal}
on:mouseenter={() => (showMessage = true)} on:mouseover={onButtonHover}
on:mouseleave={() => (hoverButton = false)}
on:focus={onButtonHover}
on:blur={() => (hoverButton = false)}
class="py-3 px-2 flex justify-between place-items-center place-content-center border border-gray-300 dark:border-immich-dark-primary/50 mt-2 rounded-lg shadow-sm dark:bg-immich-dark-primary/10 w-full" class="py-3 px-2 flex justify-between place-items-center place-content-center border border-gray-300 dark:border-immich-dark-primary/50 mt-2 rounded-lg shadow-sm dark:bg-immich-dark-primary/10 w-full"
> >
<div class="flex place-items-center place-content-center gap-1"> <div class="flex place-items-center place-content-center gap-1">
@ -63,7 +82,13 @@
<Portal target="body"> <Portal target="body">
{#if showMessage && getAccountAge() > 14} {#if showMessage && getAccountAge() > 14}
<div <div
class="w-[265px] absolute bottom-[75px] left-[255px] bg-white dark:bg-gray-800 dark:text-white text-black rounded-xl z-10 shadow-2xl px-4 py-5" class="w-64 absolute bottom-[75px] left-[255px] bg-white dark:bg-gray-800 dark:text-white text-black rounded-xl z-10 shadow-2xl px-4 py-5"
transition:fade={{ duration: 150 }}
on:mouseover={() => (hoverMessage = true)}
on:mouseleave={() => (hoverMessage = false)}
on:focus={() => (hoverMessage = true)}
on:blur={() => (hoverMessage = false)}
role="dialog"
> >
<div class="flex justify-between place-items-center"> <div class="flex justify-between place-items-center">
<Icon path={mdiLicense} size="44" class="text-immich-dark-gray/75 dark:text-immich-gray" /> <Icon path={mdiLicense} size="44" class="text-immich-dark-gray/75 dark:text-immich-gray" />
@ -72,7 +97,7 @@
on:click={() => { on:click={() => {
showMessage = false; showMessage = false;
}} }}
title="Close" title={$t('close')}
size="18" size="18"
class="text-immich-dark-gray/85 dark:text-immich-gray" class="text-immich-dark-gray/85 dark:text-immich-gray"
/> />