git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 <ng-template #notificationItemTemplate
   2              let-notification="notification"
   3              let-last="last">
   4   <div class="notification-wrapper">
   5     <div class="notification-item">
   6       <div class="notification-icon">
   7         <cd-icon [type]="notificationIconMap[notification.type] || notificationIconMap['default']">
   8         </cd-icon>
   9       </div>
  10       <div class="notification-content">
  11         <div class="notification-timestamp">{{ notification.timestamp | relativeDate }}</div>
  12         <div class="notification-title">{{ notification.title }}</div>
  13         <div class="notification-message"
  14              [innerHTML]="notification.message | sanitizeHtml"></div>
  15       </div>
  16       <button cdsButton="ghost"
  17               size="sm"
  18               class="notification-close"
  19               (click)="removeNotification(notification, $event)">
  20         <cd-icon type="destroy"></cd-icon>
  21       </button>
  22     </div>
  23   @if (!last) {
  24     <div class="notification-divider"></div>
  25   }
  26   </div>
  27 </ng-template>
  28
  29 @if (todayNotifications.length > 0) {
  30   <div class="notification-section-heading"
  31        i18n>Today</div>
  32   @for (notification of todayNotifications; track notification.timestamp; let last = $last) {
  33     <ng-container *ngTemplateOutlet="notificationItemTemplate; context: { notification: notification, last: last }"></ng-container>
  34   }
  35 }
  36
  37 @if (previousNotifications.length > 0) {
  38   <div class="notification-section-heading"
  39        i18n>Previous</div>
  40   @for (notification of previousNotifications; track notification.timestamp; let last = $last) {
  41     <ng-container *ngTemplateOutlet="notificationItemTemplate; context: { notification: notification, last: last }"></ng-container>
  42   }
  43 }
  44
  45 @if (todayNotifications.length === 0 && previousNotifications.length === 0) {
  46   <div class="notification-empty">
  47     <div i18n>No notifications</div>
  48   </div>
  49 }