reimplement stacked notifications

src/UI/UIDesktop.js

@@ -929,6 +929,9 @@ async function UIDesktop(options){
     // prepend toolbar to desktop
     $(ht).insertBefore(el_desktop);
 
+    // notification container
+    $('body').append(`<div class="notification-container"></div>`);
+
     // adjust window container to take into account the toolbar height
     $('.window-container').css('top', window.toolbar_height);
 
@@ -1034,12 +1037,6 @@ async function UIDesktop(options){
             }
         })
     }
-
-    // setInterval(() => {
-    //     UINotification({
-    //         content: 'This is a notification',
-    //     })
-    // }, 1000);
 }
 
 $(document).on('contextmenu taphold', '.taskbar', function(event){

src/UI/UINotification.js

@@ -31,7 +31,7 @@ function UINotification(options){
         h += html_encode(options.content);
     h += `</div>`;
 
-    $('body').append(h);
+    $('.notification-container').prepend(h);
 
 
     const el_notification = document.getElementById(`ui-notification__${window.global_element_id}`);
@@ -44,21 +44,7 @@ function UINotification(options){
     })
 
     // Show Notification
-    $(el_notification).delay(100).show(0).
-    // In the right position (the mouse)
-    css({
-        top: window.toolbar_height + 15,
-    });
-
-    // if there are other older notifications, move them down
-    if(window.active_notifs.length > 1){
-        let older_notifs = $('.notification').not(el_notification);
-        for(let i = 0; i < older_notifs.length; i++){
-            let el = older_notifs[i];
-            let top = parseInt($(el).css('top'));
-            $(el).animate({'top': top + 65});
-        }
-    }
+    $(el_notification).delay(100).show(0);
     return el_notification;
 }
 
@@ -82,24 +68,11 @@ $(document).on('click', '.notification-close', function(e){
 window.close_notification = function(el_notification){
     $(el_notification).addClass('animate__fadeOutRight');
 
-    // move up older notifications up
-    if(window.active_notifs.length > 1){
-        // get older notif ids from the active_notifs array
-        let older_notifs = window.active_notifs.filter(function(id){
-            return id < parseInt($(el_notification).data('id'));
-        });
-        
-        // move older notifications up
-        for(let i = 0; i < older_notifs.length; i++){
-            let el = $(`#ui-notification__${older_notifs[i]}`);
-            let top = parseInt($(el).css('top'));
-            $(el).animate({'top': top - 65}, 10);
-        }
-    }
+
     // remove notification
     setTimeout(function(){
         $(el_notification).remove();
-    }, 500);
+    }, 300);
 }
 
 export default UINotification;

src/css/style.css

@@ -2435,14 +2435,13 @@ label {
 .notification {
     width: 250px;
     height: 54px;
-    position: absolute;
-    right: 10px;
     background: #ffffffcd;
     backdrop-filter: blur(5px);
     border-radius: 11px;
-    z-index: 9999999;
+    z-index: 99999999;
     box-shadow: 0px 0px 17px -9px #000;
     border: 1px solid #d5d5d5;
+    margin-bottom: 10px;
 }
 
 .notification-close {
@@ -3889,4 +3888,11 @@ fieldset[name=number-code] {
     flex-direction: row;
     gap: 10px;
     justify-content: flex-end;
+}
+
+.notification-container{
+    position: absolute;
+    top: 70px;
+    right: 10px;
+    z-index: 1000;
 }