75 lines
2.6 KiB
HTML
75 lines
2.6 KiB
HTML
<button
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="notificationMenu"
|
|
[matBadge]="unreadCount"
|
|
[matBadgeHidden]="unreadCount === 0"
|
|
matBadgeColor="warn"
|
|
matBadgeSize="small">
|
|
<mat-icon>notifications</mat-icon>
|
|
</button>
|
|
|
|
<mat-menu #notificationMenu="matMenu" class="notification-menu">
|
|
<div mat-menu-item disabled class="notification-header">
|
|
<div class="flex items-center justify-between w-full px-2">
|
|
<span class="font-semibold">Notifications</span>
|
|
@if (notifications.length > 0) {
|
|
<div class="flex gap-2">
|
|
<button mat-button (click)="markAllAsRead()" class="text-xs">
|
|
Mark all read
|
|
</button>
|
|
<button mat-button (click)="clearAll()" class="text-xs">
|
|
Clear all
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
@if (notifications.length === 0) {
|
|
<div mat-menu-item disabled class="notification-empty">
|
|
<div class="text-center py-4 text-gray-500">
|
|
<mat-icon class="text-2xl">notifications_none</mat-icon>
|
|
<p class="mt-1 text-sm">No notifications</p>
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
@for (notification of notifications.slice(0, 5); track notification.id) {
|
|
<div
|
|
mat-menu-item
|
|
class="notification-item"
|
|
[class.unread]="!notification.read"
|
|
(click)="markAsRead(notification)">
|
|
<div class="flex items-start gap-3 w-full">
|
|
<mat-icon [class]="getNotificationColor(notification.type)" class="mt-1">
|
|
{{ getNotificationIcon(notification.type) }}
|
|
</mat-icon>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<p class="font-medium text-sm truncate">{{ notification.title }}</p>
|
|
<button
|
|
mat-icon-button
|
|
(click)="clearNotification(notification); $event.stopPropagation()"
|
|
class="text-gray-400 hover:text-gray-600 ml-2">
|
|
<mat-icon class="text-lg">close</mat-icon>
|
|
</button>
|
|
</div>
|
|
<p class="text-gray-600 text-xs mt-1 line-clamp-2">{{ notification.message }}</p>
|
|
<p class="text-gray-400 text-xs mt-1">{{ formatTime(notification.timestamp) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@if (!$last) {
|
|
<mat-divider></mat-divider>
|
|
}
|
|
}
|
|
|
|
@if (notifications.length > 5) {
|
|
<mat-divider></mat-divider>
|
|
<div mat-menu-item disabled class="text-center text-sm text-gray-500">
|
|
{{ notifications.length - 5 }} more notifications...
|
|
</div>
|
|
}
|
|
}
|
|
</mat-menu>
|