inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-17 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-7530] - Notifications popup looks a bit differently (#9543)

Browse Source
This commit is contained in:
dominikiwanekhyland
2024-04-12 15:13:12 +02:00
committed by GitHub
parent 289c7aebae
commit ffdd409875
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,12 +16,12 @@
[xPosition]="menuPositionX" [xPosition]="menuPositionX"
[yPosition]="menuPositionY" [yPosition]="menuPositionY"
id="adf-notification-history-menu" id="adf-notification-history-menu"
class="adf-notification-history-menu"> class="adf-notification-history-menu adf-notification-history-menu-panel">
<div class="adf-notification-history-list" <div class="adf-notification-history-list"
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
<div mat-subheader role="menuitem"> <div mat-subheader role="menuitem">
<span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span> <span class="adf-notification-history-menu-title">{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
<button *ngIf="notifications.length" <button *ngIf="notifications.length"
id="adf-notification-history-mark-as-read" id="adf-notification-history-mark-as-read"
mat-icon-button mat-icon-button
@@ -51,7 +51,7 @@
<div class="adf-notification-history-menu-item-content"> <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">&nbsp;{{ 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> </div>
@@ -61,7 +61,7 @@
<ng-template #empty_list_template> <ng-template #empty_list_template>
<mat-list-item id="adf-notification-history-component-no-message" <mat-list-item id="adf-notification-history-component-no-message"
class="adf-notification-history-menu-no-message"> class="adf-notification-history-menu-no-message">
<p matListItemLine>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p> <p class="adf-notification-history-menu-no-message-text" matListItemLine>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p>
</mat-list-item> </mat-list-item>
</ng-template> </ng-template>
</mat-list> </mat-list>

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

@@ -30,9 +30,14 @@ $notification-item-height: 72px;
p { p {
line-height: 16px; line-height: 16px;
margin-bottom: 0; margin-bottom: 0;
color: var(--theme-sidenav-user-menu-color);
} }
} }
&-notification-history-menu-title {
font-size: 14px;
}
&-notification-history-menu_button#{$mat-button} { &-notification-history-menu_button#{$mat-button} {
margin-right: 6px; margin-right: 6px;
border-radius: 90%; border-radius: 90%;
@@ -73,6 +78,12 @@ $notification-item-height: 72px;
font-size: var(--theme-body-1-font-size); font-size: var(--theme-body-1-font-size);
} }
.adf-notification-history-menu-no-message-text {
font-size: 16px;
color: var(--theme-sidenav-user-menu-color);
margin-bottom: 0;
}
.adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) { .adf-notification-history-menu-date.adf-notification-history-menu-text:is(p) {
font-size: var(--theme-caption-font-size); font-size: var(--theme-caption-font-size);
} }
@@ -108,7 +119,7 @@ $notification-item-height: 72px;
} }
} }
#{$mat-menu-panel}.adf-notification-history-menu { #{$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel {
min-width: 320px; min-width: 320px;
max-height: 500px; max-height: 500px;