From 7b724ff1eb92b85c6d4007d86f5a75fea167fa4e Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <n.jelveh@gmail.com>
Date: Sat, 15 Jun 2024 13:01:33 -0700
Subject: [PATCH] show the "Close All" button on multiple notifications

---
 src/UI/UIDesktop.js      |  2 +-
 src/UI/UINotification.js | 37 +++++++++++++++++++++++++++-------
 src/css/style.css        | 43 +++++++++++++++++++++++++++++++---------
 3 files changed, 65 insertions(+), 17 deletions(-)

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(`<div class="notification-container"></div>`);
+    $('body').append(`<div class="notification-container"><div class="notifications-close-all">Close all</div></div>`);
 
     // 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 <https://www.gnu.org/licenses/>.
  */
 
-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 += `<div id="ui-notification__${window.global_element_id}" data-el-id="${window.global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`;
@@ -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