[ACS-7419] Fix notifications (#9503)

* [ACS-7419] Fix broken styling of notifications * [ACS-7419] Fix broken styling of notifications, apply pr remarks * [ACS-7419] Fix broken styling of notifications, apply pr remarks * [ACS-7419] Fix broken styling of notifications, apply pr remarks
Alfresco · Apr 4, 2024 · 747c101 · 747c101
1 parent 098cfe3
commit 747c101
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 12 deletions.
diff --git a/lib/core/src/lib/notifications/components/notification-history.component.html b/lib/core/src/lib/notifications/components/notification-history.component.html
@@ -34,22 +34,27 @@
 
             <mat-list role="menuitem">
                 <ng-container *ngIf="notifications.length; else empty_list_template">
+
                     <mat-list-item *ngFor="let notification of paginatedNotifications"
                                    class="adf-notification-history-menu-item"
                                    (click)="onNotificationClick(notification)">
-                        <div *ngIf="notification.initiator; else no_avatar"
-                             matListAvatar
-                             [outerHTML]="notification.initiator | usernameInitials:'adf-notification-initiator-pic'">
+                        <div class="adf-notification-history-menu-item-content-wrapper">
+                            <div *ngIf="notification.initiator; else no_avatar"
+                                 matListAvatar
+                                 [outerHTML]="notification.initiator | usernameInitials:'adf-notification-initiator-pic'">
+                            </div>
+                            <ng-template #no_avatar>
+                                <mat-icon matListItemLine
+                                          class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon>
+                            </ng-template>
+                            <div class="adf-notification-history-menu-item-content">
+                                <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
+                                   *ngFor="let message of notification.messages"
+                                   matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
+                                <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
+                                   matListItemLine> {{notification.datetime | adfTimeAgo}} </p>
+                            </div>
                         </div>
-                        <ng-template #no_avatar>
-                            <mat-icon matListItemLine
-                                      class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon>
-                        </ng-template>
-                        <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
-                           *ngFor="let message of notification.messages"
-                           matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
-                        <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
-                           matListItemLine> {{notification.datetime | adfTimeAgo}} </p>
                     </mat-list-item>
                 </ng-container>
                 <ng-template #empty_list_template>

diff --git a/lib/core/src/lib/notifications/components/notification-history.component.scss b/lib/core/src/lib/notifications/components/notification-history.component.scss
@@ -1,6 +1,34 @@
 @import 'styles/mat-selectors';
 
+$notification-item-height: 72px;
+
 .adf {
+    &-notification-history-list {
+        .adf-notification-history-menu-item-content-wrapper {
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
+
+        /* stylelint-disable selector-class-pattern */
+        .mdc-list-item__secondary-text::before {
+            height: auto;
+        }
+    }
+
+    &-notification-history-menu-item-content {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        overflow: hidden;
+        padding: 0 0 0 16px;
+
+        p {
+            line-height: 16px;
+            margin-bottom: 0;
+        }
+    }
+
     &-notification-history-menu_button#{$mat-button} {
         margin-right: 0;
         border-radius: 90%;
@@ -10,12 +38,15 @@
     }
 
     &-notification-history-list #{$mat-subheader} {
+        display: flex;
         justify-content: space-between;
+        align-items: center;
     }
 
     &-notification-history-menu:has(.adf-notification-history-list) {
         .adf-notification-history-menu-item {
             cursor: pointer;
+            height: $notification-item-height;
         }
 
         .adf-notification-history-menu-item:focus {
@@ -60,6 +91,10 @@
         display: flex;
         justify-content: center;
         padding: 10px;
+
+        button {
+            width: 100%;
+        }
     }
 }