inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-02 17:35:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-7419] Fix broken styling of notifications

Browse Source
This commit is contained in:
Tomasz Nastaly 2024-04-03 12:16:00 +02:00 committed by VitoAlbano
parent e1cbb774c1
commit 3bfcd323b3
2 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/src/lib/notifications/components/notification-history.component.html
View File

@ -47,11 +47,13 @@
<mat-icon matListItemLine <mat-icon matListItemLine
class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon> class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon>
</ng-template> </ng-template>
<div class="adf-notification-history-menu-item-content">
<p class="adf-notification-history-menu-text adf-notification-history-menu-message" <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
*ngFor="let message of notification.messages" *ngFor="let message of notification.messages"
matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p> matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
<p class="adf-notification-history-menu-text adf-notification-history-menu-date" <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
matListItemLine> {{notification.datetime | adfTimeAgo}} </p> matListItemLine> {{notification.datetime | adfTimeAgo}} </p>
</div>
</mat-list-item> </mat-list-item>
</ng-container> </ng-container>
<ng-template #empty_list_template> <ng-template #empty_list_template>

35
lib/core/src/lib/notifications/components/notification-history.component.scss
View File

@ -1,6 +1,35 @@
@import 'styles/mat-selectors'; @import 'styles/mat-selectors';
$notification-item-height: 72px;
.adf { .adf {
&-notification-history-list {
/* stylelint-disable */
.mat-mdc-list-item-unscoped-content {
height: 100%;
display: flex !important;
align-items: center !important;
}
.mdc-list-item__secondary-text::before {
height: auto;
}
/* stylelint-enable */
}
&-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} { &-notification-history-menu_button#{$mat-button} {
margin-right: 8px; margin-right: 8px;
border-radius: 90%; border-radius: 90%;
@ -16,12 +45,14 @@
} }
&-notification-history-list #{$mat-subheader} { &-notification-history-list #{$mat-subheader} {
display: flex;
justify-content: space-between; justify-content: space-between;
} }
&-notification-history-menu:has(.adf-notification-history-list) { &-notification-history-menu:has(.adf-notification-history-list) {
.adf-notification-history-menu-item { .adf-notification-history-menu-item {
cursor: pointer; cursor: pointer;
height: $notification-item-height;
} }
.adf-notification-history-menu-item:focus { .adf-notification-history-menu-item:focus {
@ -66,6 +97,10 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px; padding: 10px;
button {
width: 100%;
}
} }
} }