mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
94ec7d06a7
* [AAE-4529] Refactor Notification History Component * Improve code * Add maxNotifications * More changes * Add documentation * Rebase branch * Fix build * Update notification-history.component.md * Fix e2e tests Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
74 lines
3.3 KiB
HTML
74 lines
3.3 KiB
HTML
<div (keyup)="onKeyPress($event)">
|
|
<button mat-button
|
|
[matMenuTriggerFor]="menu"
|
|
class="adf-notification-history-menu_button"
|
|
id="adf-notification-history-open-button"
|
|
(menuOpened)="onMenuOpened()">
|
|
<mat-icon matBadge="⁠"
|
|
[matBadgeHidden]="!notifications.length"
|
|
matBadgeColor="accent"
|
|
matBadgeSize="small">notifications</mat-icon>
|
|
</button>
|
|
<mat-menu #menu="matMenu"
|
|
[xPosition]="menuPositionX"
|
|
[yPosition]="menuPositionY"
|
|
id="adf-notification-history-menu"
|
|
class="adf-notification-history-menu">
|
|
|
|
<div class="adf-notification-history-list"
|
|
(click)="$event.stopPropagation()">
|
|
<div mat-subheader>
|
|
<span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
|
|
<button (click)="markAsRead()"
|
|
id="adf-notification-history-mark-as-read"
|
|
mat-button
|
|
color="accent"
|
|
*ngIf="notifications.length">
|
|
{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<mat-list>
|
|
<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 mat-list-icon
|
|
class="adf-notification-history-menu-initiator">{{ notification | notificationIcon
|
|
}}</mat-icon>
|
|
</ng-template>
|
|
<p class="adf-notification-history-menu-message"
|
|
*ngFor="let message of notification.messages"
|
|
mat-line>{{ message }}</p>
|
|
<p class="adf-notification-history-menu-date"
|
|
mat-line> {{notification.datetime | adfTimeAgo}} </p>
|
|
</mat-list-item>
|
|
</ng-container>
|
|
<ng-template #empty_list_template>
|
|
<mat-list-item id="adf-notification-history-component-no-message"
|
|
class="adf-notification-history-menu-no-message">
|
|
<h4 mat-line>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</h4>
|
|
</mat-list-item>
|
|
</ng-template>
|
|
</mat-list>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<div class="adf-notification-history-load-more"
|
|
*ngIf="hasMoreNotifications()">
|
|
<button mat-button
|
|
(click)="loadMore()">
|
|
{{ 'NOTIFICATIONS.LOAD_MORE' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-menu>
|
|
</div>
|