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

chore(web): migration svelte 5 syntax (#13883)

Browse source
This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 • committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
Download patch file Download diff file Expand all files Collapse all files

54
web/src/lib/components/shared-components/side-bar/purchase-info.svelte
View file

@ -18,12 +18,12 @@
import { getButtonVisibility } from '$lib/utils/purchase-utils';
import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
let showMessage = false;
let isOpen = false;
let hoverMessage = false;
let hoverButton = false;
let showMessage = $state(false);
let isOpen = $state(false);
let hoverMessage = $state(false);
let hoverButton = $state(false);
let showBuyButton = getButtonVisibility();
let showBuyButton = $state(getButtonVisibility());
const { isPurchased } = purchaseStore;
@ -63,13 +63,15 @@
}
};
$: if (showMessage && !hoverMessage && !hoverButton) {
setTimeout(() => {
if (!hoverMessage && !hoverButton) {
showMessage = false;
}
}, 300);
}
$effect(() => {
if (showMessage && !hoverMessage && !hoverButton) {
setTimeout(() => {
if (!hoverMessage && !hoverButton) {
showMessage = false;
}
}, 300);
}
});
</script>
{#if isOpen}
@ -79,7 +81,7 @@
<div class="hidden md:block license-status pl-4 text-sm">
{#if $isPurchased && $preferences.purchase.showSupportBadge}
<button
on:click={() => goto(`${AppRoute.USER_SETTINGS}?isOpen=user-purchase-settings`)}
onclick={() => goto(`${AppRoute.USER_SETTINGS}?isOpen=user-purchase-settings`)}
class="w-full"
type="button"
>
@ -88,11 +90,11 @@
{:else if !$isPurchased && showBuyButton && getAccountAge() > 14}
<button
type="button"
on:click={openPurchaseModal}
on:mouseover={onButtonHover}
on:mouseleave={() => (hoverButton = false)}
on:focus={onButtonHover}
on:blur={() => (hoverButton = false)}
onclick={openPurchaseModal}
onmouseover={onButtonHover}
onmouseleave={() => (hoverButton = false)}
onfocus={onButtonHover}
onblur={() => (hoverButton = false)}
class="p-2 flex justify-between place-items-center place-content-center border border-immich-primary/20 dark:border-immich-dark-primary/10 mt-2 rounded-lg shadow-md dark:bg-immich-dark-primary/10 w-full"
>
<div class="flex justify-between w-full place-items-center place-content-center">
@ -122,10 +124,10 @@
<div
class="w-[500px] absolute bottom-[75px] left-[255px] bg-gray-50 dark:border-gray-800 border border-gray-200 dark:bg-immich-dark-gray dark:text-white text-black rounded-3xl z-10 shadow-2xl px-8 py-6"
transition:fade={{ duration: 150 }}
on:mouseover={() => (hoverMessage = true)}
on:mouseleave={() => (hoverMessage = false)}
on:focus={() => (hoverMessage = true)}
on:blur={() => (hoverMessage = false)}
onmouseover={() => (hoverMessage = true)}
onmouseleave={() => (hoverMessage = false)}
onfocus={() => (hoverMessage = true)}
onblur={() => (hoverMessage = false)}
role="dialog"
>
<div class="flex justify-between place-items-center">
@ -134,7 +136,7 @@
</div>
<CircleIconButton
icon={mdiClose}
on:click={() => {
onclick={() => {
showMessage = false;
}}
title={$t('close')}
@ -157,12 +159,12 @@
</p>
</div>
<Button class="mt-2" fullwidth on:click={openPurchaseModal}>{$t('purchase_button_buy_immich')}</Button>
<Button class="mt-2" fullwidth onclick={openPurchaseModal}>{$t('purchase_button_buy_immich')}</Button>
<div class="mt-3 flex gap-4">
<Button size="sm" fullwidth shadow={false} color="transparent-gray" on:click={() => hideButton(true)}>
<Button size="sm" fullwidth shadow={false} color="transparent-gray" onclick={() => hideButton(true)}>
{$t('purchase_button_never_show_again')}
</Button>
<Button size="sm" fullwidth shadow={false} color="transparent-gray" on:click={() => hideButton(false)}>
<Button size="sm" fullwidth shadow={false} color="transparent-gray" onclick={() => hideButton(false)}>
{$t('purchase_button_reminder')}
</Button>
</div>