diff --git a/src/UI/UIDesktop.js b/src/UI/UIDesktop.js
index 498d8c6c2..c6a7dfcf8 100644
--- a/src/UI/UIDesktop.js
+++ b/src/UI/UIDesktop.js
@@ -930,7 +930,7 @@ async function UIDesktop(options){
$(ht).insertBefore(el_desktop);
// notification container
- $('body').append(`
`);
+ $('body').append(``);
// adjust window container to take into account the toolbar height
$('.window-container').css('top', window.toolbar_height);
diff --git a/src/UI/UINotification.js b/src/UI/UINotification.js
index 2afe5f265..20da00d26 100644
--- a/src/UI/UINotification.js
+++ b/src/UI/UINotification.js
@@ -17,13 +17,9 @@
* along with this program. If not, see .
*/
-window.active_notifs = []
-
function UINotification(options){
window.global_element_id++;
-
options.text = options.text ?? '';
- window.active_notifs.push(window.global_element_id);
let h = '';
h += ``;
@@ -66,6 +62,15 @@ function UINotification(options){
// Show Notification
$(el_notification).delay(100).show(0);
+
+ // count notifications
+ let count = $('.notification-container').find('.notification-wrapper').length;
+ if(count <= 1){
+ $('.notification-container').removeClass('has-multiple');
+ }else{
+ $('.notification-container').addClass('has-multiple');
+ }
+
return el_notification;
}
@@ -84,19 +89,37 @@ $(document).on('click', '.notification-close', function(e){
return false;
});
-
+$(document).on('click', '.notifications-close-all', function(e){
+ $('.notification-container').find('.notification-wrapper').each(function(){
+ window.close_notification(this);
+ });
+ $('.notifications-close-all').animate({
+ opacity: 0
+ }, 300);
+ $('.notification-container').removeClass('has-multiple');
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+})
window.close_notification = function(el_notification){
$(el_notification).closest('.notification-wrapper').animate({
height: 0,
opacity: 0
- }, 200);
+ }, 300);
$(el_notification).addClass('animate__fadeOutRight');
// remove notification
setTimeout(function(){
$(el_notification).closest('.notification-wrapper').remove();
$(el_notification).remove();
- }, 300);
+ // count notifications
+ let count = $('.notification-container').find('.notification-wrapper').length;
+ if(count <= 1){
+ $('.notification-container').removeClass('has-multiple');
+ }else{
+ $('.notification-container').addClass('has-multiple');
+ }
+ }, 500);
}
export default UINotification;
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index b12097493..f2712a993 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -2434,12 +2434,12 @@ label {
*****************************************************/
.notification, .notification-wrapper{
width: 320px;
+ border-radius: 11px;
}
.notification {
min-height: 54px;
background: #ffffffcd;
backdrop-filter: blur(5px);
- border-radius: 11px;
z-index: 99999999;
box-shadow: 0px 0px 17px -9px #000;
border: 1px solid #d5d5d5;
@@ -2447,7 +2447,9 @@ label {
display: flex;
flex-direction: row;
}
-
+.notification-wrapper{
+ overflow: visible;
+}
.notification-close {
position: absolute;
background: white;
@@ -2491,6 +2493,36 @@ label {
flex-direction: column;
padding: 10px;
}
+.notification-container{
+ position: absolute;
+ top: 40px;
+ right: 10px;
+ z-index: 1000;
+ padding-top: 30px;
+}
+
+.notifications-close-all{
+ opacity: 0;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ background-color: #d5d9dc;
+ padding: 3px 7px;
+ border-radius: 3px;
+ border: 1px solid #d5d5d5;
+ font-size: 12px;
+ transition: 0.15s;
+ pointer-events: none;
+ cursor: pointer;
+ filter: drop-shadow(0px 0px 0.5px rgb(51, 51, 51));
+}
+.notifications-close-all:hover{
+ background-color: #dee1e3;
+}
+.notification-container.has-multiple:hover .notifications-close-all{
+ pointer-events: all;
+ opacity: 1 !important;
+}
/*****************************************************
* Start
*****************************************************/
@@ -3926,11 +3958,4 @@ fieldset[name=number-code] {
flex-direction: row;
gap: 10px;
justify-content: flex-end;
-}
-
-.notification-container{
- position: absolute;
- top: 70px;
- right: 10px;
- z-index: 1000;
}
\ No newline at end of file