[ACS-7419] Fix broken styling of notifications, apply pr remarks

This commit is contained in:
Tomasz Nastaly
2024-04-04 15:59:30 +02:00
committed by Vito Albano
parent a1cd7d0140
commit 84300a7674
2 changed files with 20 additions and 19 deletions

View File

@@ -35,23 +35,26 @@
<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>
<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 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>
</mat-list-item>
</ng-container>

View File

@@ -4,17 +4,15 @@ $notification-item-height: 72px;
.adf {
&-notification-history-list {
/* stylelint-disable */
.mat-mdc-list-item-unscoped-content {
.adf-notification-history-menu-item-content-wrapper {
height: 100%;
display: flex !important;
align-items: center !important;
display: flex;
align-items: center;
}
.mdc-list-item__secondary-text::before {
height: auto;
}
/* stylelint-enable */
}
&-notification-history-menu-item-content {