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

Add toast timeout functionality

Browse Source
This commit is contained in:
Andras Bacsai
2024-03-14 09:10:32 +01:00
parent 965625ad01
commit 695d3b82b5
1 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/views/components/toast.blade.php
View File

@@ -27,6 +27,7 @@
<ul x-data="{ <ul x-data="{
toasts: [], toasts: [],
toastsHovered: false, toastsHovered: false,
timeout: null,
expanded: false, expanded: false,
layout: 'default', layout: 'default',
position: 'top-center', position: 'top-center',
@@ -286,14 +287,12 @@
} }
stackToasts(); stackToasts();
$watch('toastsHovered', function(value) { $watch('toastsHovered', function(value) {
if (layout == 'default') { if (layout == 'default') {
if (position.includes('bottom')) { if (position.includes('bottom')) {
resetBottom(); resetBottom();
} else { } else {
resetTop(); resetTop();
} }
if (value) { if (value) {
// calculate the new positions // calculate the new positions
expanded = true; expanded = true;
@@ -319,13 +318,32 @@
<template x-for="(toast, index) in toasts" :key="toast.id"> <template x-for="(toast, index) in toasts" :key="toast.id">
<li :id="toast.id" x-data="{ <li :id="toast.id" x-data="{
toastHovered: false toastHovered: false,
}" x-init="if (position.includes('bottom')) { }" x-init="if (position.includes('bottom')) {
$el.firstElementChild.classList.add('toast-bottom'); $el.firstElementChild.classList.add('toast-bottom');
$el.firstElementChild.classList.add('opacity-0', 'translate-y-full'); $el.firstElementChild.classList.add('opacity-0', 'translate-y-full');
} else { } else {
$el.firstElementChild.classList.add('opacity-0', '-translate-y-full'); $el.firstElementChild.classList.add('opacity-0', '-translate-y-full');
} }
$watch('toastsHovered', function(value) {
if (value && this.timeout) {
clearTimeout(this.timeout);
} else {
this.timeout = setTimeout(function() {
setTimeout(function() {
$el.firstElementChild.classList.remove('opacity-100');
$el.firstElementChild.classList.add('opacity-0');
if (toasts.length == 1) {
$el.firstElementChild.classList.remove('translate-y-0');
$el.firstElementChild.classList.add('-translate-y-full');
}
setTimeout(function() {
deleteToastWithId(toast.id)
}, 300);
}, 5);
}, 2000)
}
});
setTimeout(function() { setTimeout(function() {
setTimeout(function() { setTimeout(function() {
@@ -342,7 +360,7 @@
}, 5); }, 5);
}, 50); }, 50);
setTimeout(function() { this.timeout = setTimeout(function() {
setTimeout(function() { setTimeout(function() {
$el.firstElementChild.classList.remove('opacity-100'); $el.firstElementChild.classList.remove('opacity-100');
$el.firstElementChild.classList.add('opacity-0'); $el.firstElementChild.classList.add('opacity-0');
@@ -390,12 +408,12 @@
d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z"
fill="currentColor"></path> fill="currentColor"></path>
</svg> </svg>
<p class="leading-2 text-neutral-200" <p class="leading-2 text-neutral-200" x-html="toast.message">
x-html="toast.message">
</p> </p>
</div> </div>
<p x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }" <p x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }"
class="mt-1.5 text-xs leading-2 opacity-90 whitespace-pre-wrap" x-html="toast.description"></p> class="mt-1.5 text-xs leading-2 opacity-90 whitespace-pre-wrap"
x-html="toast.description"></p>
</div> </div>
</template> </template>
<template x-if="toast.html"> <template x-if="toast.html">