[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"> <mat-list role="menuitem">
<ng-container *ngIf="notifications.length; else empty_list_template"> <ng-container *ngIf="notifications.length; else empty_list_template">
<mat-list-item *ngFor="let notification of paginatedNotifications" <mat-list-item *ngFor="let notification of paginatedNotifications"
class="adf-notification-history-menu-item" class="adf-notification-history-menu-item"
(click)="onNotificationClick(notification)"> (click)="onNotificationClick(notification)">
<div *ngIf="notification.initiator; else no_avatar" <div class="adf-notification-history-menu-item-content-wrapper">
matListAvatar <div *ngIf="notification.initiator; else no_avatar"
[outerHTML]="notification.initiator | usernameInitials:'adf-notification-initiator-pic'"> matListAvatar
</div> [outerHTML]="notification.initiator | usernameInitials:'adf-notification-initiator-pic'">
<ng-template #no_avatar> </div>
<mat-icon matListItemLine <ng-template #no_avatar>
class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon> <mat-icon matListItemLine
</ng-template> class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon>
<div class="adf-notification-history-menu-item-content"> </ng-template>
<p class="adf-notification-history-menu-text adf-notification-history-menu-message" <div class="adf-notification-history-menu-item-content">
*ngFor="let message of notification.messages" <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p> *ngFor="let message of notification.messages"
<p class="adf-notification-history-menu-text adf-notification-history-menu-date" matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
matListItemLine> {{notification.datetime | adfTimeAgo}} </p> <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
matListItemLine> {{notification.datetime | adfTimeAgo}} </p>
</div>
</div> </div>
</mat-list-item> </mat-list-item>
</ng-container> </ng-container>

View File

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