mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
chore(web): change license wording and other things (#11309)
This commit is contained in:
Alex
GitHub
parent
bc20710c6d
commit
ef7a6bb246
40 changed files with 1045 additions and 518 deletions
|
|
@ -0,0 +1,179 @@
|
|||
<script lang="ts">
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiClose, mdiInformationOutline } from '@mdi/js';
|
||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import LicenseModal from '$lib/components/shared-components/purchasing/purchase-modal.svelte';
|
||||
import { purchaseStore } from '$lib/stores/purchase.store';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { goto } from '$app/navigation';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { getAccountAge } from '$lib/utils/auth';
|
||||
import { fade } from 'svelte/transition';
|
||||
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
|
||||
import { updateMyPreferences } from '@immich/sdk';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { preferences } from '$lib/stores/user.store';
|
||||
import { getButtonVisibility } from '$lib/utils/purchase-utils';
|
||||
|
||||
let showMessage = false;
|
||||
let isOpen = false;
|
||||
let hoverMessage = false;
|
||||
let hoverButton = false;
|
||||
|
||||
let showBuyButton = getButtonVisibility();
|
||||
|
||||
const { isPurchased } = purchaseStore;
|
||||
|
||||
const openPurchaseModal = () => {
|
||||
isOpen = true;
|
||||
showMessage = false;
|
||||
};
|
||||
|
||||
const onButtonHover = () => {
|
||||
showMessage = true;
|
||||
hoverButton = true;
|
||||
};
|
||||
|
||||
const hideButton = async (always: boolean) => {
|
||||
const hideBuyButtonUntil = new Date();
|
||||
|
||||
if (always) {
|
||||
hideBuyButtonUntil.setFullYear(2124); // see ya in 100 years
|
||||
} else {
|
||||
hideBuyButtonUntil.setDate(hideBuyButtonUntil.getDate() + 30);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await updateMyPreferences({
|
||||
userPreferencesUpdateDto: {
|
||||
purchase: {
|
||||
hideBuyButtonUntil: hideBuyButtonUntil.toISOString(),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
preferences.set(response);
|
||||
showBuyButton = getButtonVisibility();
|
||||
showMessage = false;
|
||||
} catch (error) {
|
||||
handleError(error, 'Error hiding buy button');
|
||||
}
|
||||
};
|
||||
|
||||
$: if (showMessage && !hoverMessage && !hoverButton) {
|
||||
setTimeout(() => {
|
||||
if (!hoverMessage && !hoverButton) {
|
||||
showMessage = false;
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isOpen}
|
||||
<LicenseModal onClose={() => (isOpen = false)} />
|
||||
{/if}
|
||||
|
||||
{#if getAccountAge() > 14}
|
||||
<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`)}
|
||||
class="w-full"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 border supporter-effect rounded-lg transition-all"
|
||||
>
|
||||
<div class="h-6 w-6">
|
||||
<ImmichLogo noText />
|
||||
</div>
|
||||
<p class="dark:text-gray-100">Supporter</p>
|
||||
</div>
|
||||
</button>
|
||||
{:else if !$isPurchased && showBuyButton}
|
||||
<button
|
||||
type="button"
|
||||
on:click={openPurchaseModal}
|
||||
on:mouseover={onButtonHover}
|
||||
on:mouseleave={() => (hoverButton = false)}
|
||||
on:focus={onButtonHover}
|
||||
on:blur={() => (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">
|
||||
<div class="flex place-items-center place-content-center gap-1">
|
||||
<div class="h-6 w-6">
|
||||
<ImmichLogo noText />
|
||||
</div>
|
||||
<p class="flex text-immich-primary dark:text-immich-dark-primary font-medium">
|
||||
{$t('purchase_button_buy_immich')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Icon
|
||||
path={mdiInformationOutline}
|
||||
class="flex text-immich-primary dark:text-immich-dark-primary font-medium"
|
||||
size="18"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Portal target="body">
|
||||
{#if showMessage}
|
||||
<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)}
|
||||
role="dialog"
|
||||
>
|
||||
<div class="flex justify-between place-items-center">
|
||||
<div class="h-10 w-10">
|
||||
<ImmichLogo noText />
|
||||
</div>
|
||||
<CircleIconButton
|
||||
icon={mdiClose}
|
||||
on:click={() => {
|
||||
showMessage = false;
|
||||
}}
|
||||
title={$t('close')}
|
||||
size="18"
|
||||
class="text-immich-dark-gray/85 dark:text-immich-gray"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 class="text-lg font-medium my-3 dark:text-immich-dark-primary text-immich-primary">
|
||||
{$t('purchase_panel_title')}
|
||||
</h1>
|
||||
|
||||
<div class="text-gray-800 dark:text-white my-4">
|
||||
<p>
|
||||
{$t('purchase_panel_info_1')}
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
{$t('purchase_panel_info_2')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button class="mt-2" fullwidth on:click={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)}>
|
||||
{$t('purchase_button_never_show_again')}
|
||||
</Button>
|
||||
<Button size="sm" fullwidth shadow={false} color="transparent-gray" on:click={() => hideButton(false)}>
|
||||
{$t('purchase_button_reminder')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Portal>
|
||||
Loading…
Add table
Add a link
Reference in a new issue