dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(ui): add heart icon and enhance popup messaging for sponsorship support

Browse Source
This commit is contained in:
Andras Bacsai
2025-06-25 15:00:39 +02:00
parent 3cd2405b5d
commit 3d4162d3dc
3 changed files with 61 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

9
resources/views/components/popup.blade.php
View File

@@ -6,21 +6,22 @@
x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0"
x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
class="fixed bottom-0 right-0 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 w-full z-999"
x-cloak>
class="fixed bottom-0 right-0 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 w-full z-999" x-cloak>
<div
class="flex items-center flex-col justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded-sm">
class="flex lg:items-center flex-col justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded-sm">
<div
class="flex flex-col items-start h-full pb-6 text-xs lg:items-center lg:flex-row lg:pb-0 lg:pr-6 lg:space-x-5 dark:text-neutral-300">
@if (isset($icon))
<div class="hidden lg:block">
{{ $icon }}
</div>
@endif
<div class="pt-6 lg:pt-0">
<h4 class="w-full mb-1 text-xl font-bold leading-none -translate-y-1 text-neutral-900 dark:text-white">
{{ $title }}
</h4>
<p class="">{{ $description }}</span></p>
<p>{{ $description }}</span></p>
</div>
</div>
<button

64
resources/views/livewire/layout-popups.blade.php
View File

@@ -4,9 +4,11 @@
notification: true,
realtime: false,
},
isDevelopment: {{ isDev() ? 'true' : 'false' }},
init() {
this.popups.sponsorship = localStorage.getItem('popupSponsorship') !== 'false';
this.popups.notification = localStorage.getItem('popupNotification') !== 'false';
console.log(this.isDevelopment);
this.popups.sponsorship = this.shouldShowMonthlyPopup('popupSponsorship');
this.popups.notification = this.shouldShowMonthlyPopup('popupNotification');
this.popups.realtime = localStorage.getItem('popupRealtime');
let checkNumber = 1;
@@ -31,6 +33,35 @@
}
}, 2000);
}
},
shouldShowMonthlyPopup(storageKey) {
const disabledTimestamp = localStorage.getItem(storageKey);
// If never disabled, show the popup
if (!disabledTimestamp || disabledTimestamp === 'false') {
return true;
}
// If disabled timestamp is not a valid number, show the popup
const disabledTime = parseInt(disabledTimestamp);
if (isNaN(disabledTime)) {
return true;
}
const now = new Date();
const disabledDate = new Date(disabledTime);
{{-- if (this.isDevelopment) {
// In development: check if 10 seconds have passed
const timeDifference = now.getTime() - disabledDate.getTime();
const tenSecondsInMs = 10 * 1000;
return timeDifference >= tenSecondsInMs;
} else { --}}
// In production: check if we're in a different month or year
const isDifferentMonth = now.getMonth() !== disabledDate.getMonth() ||
now.getFullYear() !== disabledDate.getFullYear();
return isDifferentMonth;
{{-- } --}}
}
}">
@auth
@@ -59,20 +90,23 @@
<span x-show="popups.sponsorship">
<x-popup>
<x-slot:title>
Love Coolify as we do?
Would you like to help us to make more cool things?
</x-slot:title>
<x-slot:icon>
<img src="https://cdn-icons-png.flaticon.com/512/8236/8236748.png"
class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
<img src="{{ asset('heart.png') }}" class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
</x-slot:icon>
<x-slot:description>
<span>Please
consider donating on <a href="https://github.com/sponsors/coollabsio"
class="text-xs underline dark:text-white">GitHub</a> or <a
href="https://opencollective.com/coollabsio"
class="text-xs underline dark:text-white">OpenCollective</a>.<br><br></span>
<span>It enables us to keep creating features without paywalls, ensuring our work remains free and
open.</span>
<div class="text-md dark:text-white">
<span>We are already profitable, but we would like to scale even further.</span>
<br><span>Please
consider donating on one (or both) of the following platforms.<br /><br /> <a
href="https://github.com/sponsors/coollabsio"
class="underline text-lg font-bold dark:text-white">GitHub
Sponsors</a> (registration required) <br /><br />
<a href="https://opencollective.com/coollabsio/donate?interval=month&amount=10&name=&legalName=&email="
class="underline text-lg font-bold dark:text-white">OpenCollective</a> (no registration
required).</span>
</div>
</x-slot:description>
<x-slot:button-text @click="disableSponsorship()">
Disable This Popup
@@ -128,11 +162,13 @@
@endif
<script>
function disableSponsorship() {
localStorage.setItem('popupSponsorship', false);
// Store current timestamp instead of just 'false'
localStorage.setItem('popupSponsorship', Date.now().toString());
}
function disableNotification() {
localStorage.setItem('popupNotification', false);
// Store current timestamp instead of just 'false'
localStorage.setItem('popupNotification', Date.now().toString());
}
function disableRealtime() {