Improved the notification offcanvas UI

EasyAbp · Jul 9, 2024 · 682ce0c · 682ce0c
1 parent 7b83f62
commit 682ce0c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 10 deletions.
diff --git a/src/EasyAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/en.json b/src/EasyAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/en.json
@@ -6,6 +6,7 @@
     "More": "More",
     "Notifications": "Notifications",
     "ClearAllNotifications": "Clear all",
+    "NoNotification": "No notification",
     "Permission:Manage": "Manage",
     "Permission:Process": "Process",
     "Permission:ProcessManagement": "Process management",

diff --git a/...syAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/zh-Hans.json b/...syAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/zh-Hans.json
@@ -6,6 +6,7 @@
     "More": "更多",
     "Notifications": "通知",
     "ClearAllNotifications": "清空通知",
+    "NoNotification": "无通知",
     "Permission:Manage": "管理",
     "Permission:Process": "流程",
     "Permission:ProcessManagement": "流程管理",

diff --git a/...syAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/zh-Hant.json b/...syAbp.ProcessManagement.Domain.Shared/EasyAbp/ProcessManagement/Localization/zh-Hant.json
@@ -6,6 +6,7 @@
     "More": "更多",
     "Notifications": "通知",
     "ClearAllNotifications": "清空通知",
+    "NoNotification": "無通知",
     "Permission:Manage": "管理",
     "Permission:Process": "流程",
     "Permission:ProcessManagement": "流程管理",

diff --git a/src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.cshtml b/src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.cshtml
@@ -10,13 +10,18 @@
 <style>
     .clear-all-area {
         height: 40px;
+        display: none;
     }
     .clear-all-btn {
         float: right;
         padding: 0;
         text-decoration: none;
         color: var(--bs-offcanvas-color);
     }
+    .no-notification-text {
+        text-align: center;
+        margin-top: 30px;
+    }
     .svg-icon {
         width: 24px;
         height: 24px;
@@ -59,6 +64,7 @@
         <div class="clear-all-area">
             <button type="button" id="notification-offcanvas-clear-all-btn" class="clear-all-btn btn btn-link"><small>@L["ClearAllNotifications"]</small></button>
         </div>
+        <div id="no-notification-text" class="no-notification-text"><small>@L["NoNotification"]</small></div>
         <div id="alert-placeholder"></div>
     </div>
 </div>
diff --git a/src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.js b/src/EasyAbp.ProcessManagement.Web/Components/NotificationsOffcanvasWidget/Default.js
@@ -20,6 +20,12 @@
                     existingAlertIds.set(id, $(this));
                 });
 
+                existingAlertIds.forEach(function (alert, id) {
+                    if (!res.items.some(item => item.id === id)) {
+                        removeAlert(alert)
+                    }
+                });
+
                 res.items.forEach(function (item) {
                     if (!existingAlertIds.has(item.id)) {
                         var newAlert = createAlert(item);
@@ -33,16 +39,12 @@
                                 tryCreateInterval();
                             });
                         });
-                    }
-                });
-
-                existingAlertIds.forEach(function (alert, id) {
-                    if (!res.items.some(item => item.id === id)) {
-                        alert.addClass('fade-out').one('animationend', function () {
-                            $(this).remove();
+                        newAlertNode.addEventListener('closed.bs.alert', function () {
+                            refreshBaseUiElements()
                         });
                     }
                 });
+                refreshBaseUiElements()
             });
         }
 
@@ -92,7 +94,25 @@
         function tryClearInterval() {
             if (intervalId) clearInterval(intervalId);
         }
+
+        function removeAlert(alert) {
+            alert.addClass('fade-out').one('animationend', function () {
+                $(this).remove();
+                refreshBaseUiElements()
+            });
+        }
 
+        function refreshBaseUiElements(){
+            var alertPlaceholder = $('#alert-placeholder');
+            if (alertPlaceholder.find('.alert').length) {
+                $('#no-notification-text').hide();
+                $('.clear-all-area').show();
+            } else {
+                $('#no-notification-text').show();
+                $('.clear-all-area').hide();
+            }
+        }
+
         function init() {
             var offcanvasElement = document.getElementById('notificationsOffcanvas');
 
@@ -122,10 +142,9 @@
                     notificationIds: existingAlertIds.keys().toArray()
                 }).then(function () {
                     existingAlertIds.forEach(function (alert, id) {
-                        alert.addClass('fade-out').one('animationend', function () {
-                            $(this).remove();
-                        });
+                        removeAlert(alert)
                     });
+                }).always(function () {
                     tryCreateInterval();
                 });
             });