Reverted New UI Design of WeKan v8.29 and added more fixes and performance improvements.

Thanks to xet7 !

client/components/notifications/notification.js

@@ -5,7 +5,7 @@ Template.notification.events({
     const update = {};
     const newReadValue = this.read ? null : Date.now();
     update[`profile.notifications.${this.index}.read`] = newReadValue;
-    
+
     Users.update(Meteor.userId(), { $set: update }, (error, result) => {
       if (error) {
         console.error('Error updating notification:', error);
@@ -34,13 +34,13 @@ Template.notification.helpers({
   activityDate() {
     const activity = this.activityData;
     if (!activity || !activity.createdAt) return '';
-    
+
     const user = ReactiveCache.getCurrentUser();
     if (!user) return '';
-    
+
     const dateFormat = user.getDateFormat ? user.getDateFormat() : 'L';
     const timeFormat = user.getTimeFormat ? user.getTimeFormat() : 'LT';
-    
+
     return moment(activity.createdAt).format(`${dateFormat} ${timeFormat}`);
   },
 });

client/components/notifications/notificationIcon.jade

@@ -33,7 +33,7 @@ template(name='notificationIcon')
 
   else if($in activityType 'createList' 'removeList' 'archivedList')
     +listNotificationIcon
-  else if($in activityType  'importList')
+  else if($in activityType 'importList')
     +listNotificationIcon
     //- $in can only handle up to 3 cases so we have to break this case over 2 cases... use a simple template to keep it
     //- DRY and consistant

client/components/notifications/notifications.css

@@ -1,40 +1,17 @@
-.notifications-container {
-    /* absolute to render close to emoji and render on top,
-    "naturally" on top because no parent stacking context */
-    position: absolute;
-    right: 0;
-    top: 1.5lh;
-    background-color: #fafafa;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-    border-radius: 2px;
-    color: #000;
-    z-index: 1;
+#notifications {
+  position: relative;
+}
+#notifications .notifications-drawer-toggle {
+  display: block;
+  line-height: 28px;
+  color: #f2f2f2;
+  margin: 0 10px;
+  width: 28px;
+  height: 28px;
+  text-align: center;
+  border: 0;
+  padding: 0;
 }
-
 #notifications .notifications-drawer-toggle.alert {
   background-color: #eb4646;
 }
-
-#notifications {
-  /* to position popup */
-  position: relative;
-  overflow: visible;
-}
-
-#notifications-drawer {
-  position: relative;
-  min-height: min-content;
-  height: fit-content;
-  max-height: 100vh;
-  z-index: 300;
-  width: max-content;
-  .fa {
-    color: #bcbcbc !important;
-  }
-}
-
-body.mobile-mode {
-  #notifications-drawer .header {
-    flex-direction: column;
-  }
-}

client/components/notifications/notifications.jade

@@ -1,7 +1,6 @@
 template(name='notifications')
   #notifications.board-header-btns.right
-    .notifications-container
-      if $.Session.get 'showNotificationsDrawer'
-        +notificationsDrawer(unreadNotifications=unreadNotifications)
     a.notifications-drawer-toggle(class="{{#if $gt unreadNotifications 0}}alert{{/if}}" title="{{_ 'notifications'}}")
       i.fa.fa-bell
+    if $.Session.get 'showNotificationsDrawer'
+      +notificationsDrawer(unreadNotifications=unreadNotifications)

client/components/notifications/notificationsDrawer.css

@@ -1,16 +1,38 @@
+section#notifications-drawer {
+  position: fixed;
+  top: 48px;
+  right: 0;
+  width: 400px;
+  background-color: #fafafa;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  border-radius: 2px;
+  max-height: calc(100vh - 28px - 36px);
+  color: #000;
+  padding-top: 36px;
+}
 section#notifications-drawer a:hover {
   color: #2980b9 !important;
 }
-section#notifications-drawer  .header {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.5lh 2ch;
-  gap: 0.5lh;
-  align-items: center;
+section#notifications-drawer .header {
+  position: fixed;
+  top: 48px;
+  right: 0;
+  width: calc(400px - 32px);
+  padding: 8px 16px;
   background: #ededed;
   border-bottom: 1px solid #dbdbdb;
+  z-index: 2;
 }
-section#notifications-drawer .header .toggle-read {
+section#notifications-drawer .header .notification-menu-toggle {
+  position: absolute;
+  left: 16px;
+  top: calc(50% - 12px);
+  font-size: 20px;
+  cursor: pointer;
+  color: #333;
+  line-height: 24px;
+}
+section#notifications-drawer .header .notification-menu-toggle:hover {
   color: #2980b9;
 }
 section#notifications-drawer .header .notification-menu {
@@ -66,13 +88,19 @@ section#notifications-drawer .header h5 {
   margin: 0;
 }
 section#notifications-drawer .header .close {
-  display: flex;
+  position: absolute;
+  top: calc(50% - 12px);
+  right: 12px;
+  font-size: 24px;
+  height: 24px;
+  line-height: 24px;
   opacity: 1;
 }
 
 section#notifications-drawer ul.notifications {
+  display: block;
+  padding: 0px 16px 0px 16px;
   margin: 0;
-  height: fit-content;
-  display: flex;
-  flex-direction: column;
+  height: calc(100vh - 122px);
+  overflow-y: scroll;
 }

client/components/notifications/notificationsDrawer.jade

@@ -3,7 +3,6 @@ template(name='notificationsDrawer')
     .header
       a.notification-menu-toggle
         i.fa.fa-bars
-      //- #FIXME could be replaced by a popup to help placement ?
       .notification-menu(class="{{#if $.Session.get 'showNotificationMenu'}}is-open{{/if}}")
         .menu-section
           a.menu-item(class="{{#unless $.Session.get 'showReadNotifications'}}selected{{/unless}}")
@@ -45,10 +44,9 @@ template(name='notificationsDrawer')
             span.menu-icon
               i.fa.fa-trash
             span {{_ 'delete-all-notifications'}}
-      if($gt unreadNotifications 0)
-        |(#{unreadNotifications}) {{_ 'notifications'}}
-      else
-        |0 {{_ 'notifications'}}
+      h5 {{_ 'notifications'}}
+        if($gt unreadNotifications 0)
+          |(#{unreadNotifications})
       a.close
         i.fa.fa-times-thin
     ul.notifications

client/components/notifications/notificationsDrawer.js

@@ -36,7 +36,7 @@ Template.notificationsDrawer.events({
   },
   'click .notification-menu .menu-item'(event) {
     const target = event.currentTarget;
-    
+
     if (target.classList.contains('mark-all-read')) {
       const notifications = ReactiveCache.getCurrentUser().profile.notifications;
       for (const index in notifications) {