NotificationsOverlay UI

src/main/angular/src/app/api/Notification/notification.service.ts

@@ -7,9 +7,9 @@ import {Notification} from "./Notification";
 })
 export class NotificationService {
 
-  public notifications: Notification<any>[] = [
-    new Notification('', 'Test', new Date(), 'test', null),
-  ];
+  public visible: boolean = false;
+
+  public notifications: Notification<any>[] = [];
 
   constructor(
     protected readonly api: ApiService,
@@ -17,4 +17,16 @@ export class NotificationService {
     // -
   }
 
+  dismiss(notification: Notification<any>) {
+    this.notifications.splice(this.notifications.indexOf(notification), 1);
+    if (this.notifications.length === 0) {
+      this.visible = false;
+    }
+    // this.api.postNone(['Notification', 'dismiss'], notification.uuid);
+  }
+
+  toggle() {
+    this.visible = !this.visible;
+  }
+
 }

src/main/angular/src/app/app.component.html

@@ -27,14 +27,21 @@
 </div>
 <router-outlet (activate)="onActivate($event)"/>
 
-<div #notificationsOverlayMobile class="notificationsOverlay notificationsOverlayMobile" *ngIf="notificationsOverlayVisible" (window:resize)="onResize()">
+<ng-template #tmp>
   <div class="notificationOverlayEntry" *ngFor="let notification of notificationService.notifications">
+    <div class="title">
       {{ notification.title }}
     </div>
+    <div class="dismiss" (click)="notificationService.dismiss(notification)">
+      X
+    </div>
+  </div>
+</ng-template>
+
+<div #notificationsOverlayMobile class="notificationsOverlay notificationsOverlayMobile" *ngIf="notificationService.visible" (window:resize)="onResize()">
+  <ng-container *ngTemplateOutlet="tmp"></ng-container>
 </div>
 
-<div #notificationsOverlayDesktop class="notificationsOverlay notificationsOverlayDesktop" *ngIf="notificationsOverlayVisible" (window:resize)="onResize()">
-  <div class="notificationOverlayEntry" *ngFor="let notification of notificationService.notifications">
-    {{ notification.title }}
-  </div>
+<div #notificationsOverlayDesktop class="notificationsOverlay notificationsOverlayDesktop" *ngIf="notificationService.visible" (window:resize)="onResize()">
+  <ng-container *ngTemplateOutlet="tmp"></ng-container>
 </div>

src/main/angular/src/app/app.component.less

@@ -38,17 +38,37 @@
 
 .notificationsOverlay {
   position: fixed;
-  background-color: lightgray;
-  border: 1px solid gray;
+  background-color: #eaeaea;
+  border: 1px solid #aeaeae;
+  border-top: none;
   border-radius: 0 0 @space @space;
-  box-shadow: -0.5em 0.5em 1em rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.5);
 
   .notificationOverlayEntry {
-    border-bottom: 1px solid gray;
     padding: @halfSpace;
+
+    .title {
+      float: left;
     }
 
-  .notificationOverlayEntry:hover {
+    .dismiss {
+      float: right;
+      color: red;
+      width: 1.5em;
+      height: 1.5em;
+      font-weight: bold;
+      text-align: center;
+      border-radius: 50%;
+    }
+
+    .dismiss:hover {
+      background-color: red;
+      color: black;
+    }
+
+  }
+
+  .notificationOverlayEntry:hover:not(:has(div:hover)) {
     background-color: lightskyblue;
   }
 

src/main/angular/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
-import {JsonPipe, NgForOf, NgIf} from "@angular/common";
+import {JsonPipe, NgForOf, NgIf, NgTemplateOutlet} from "@angular/common";
 import {UserService} from "./api/User/user.service";
 import {Subscription, timer} from "rxjs";
 import {NotificationService} from "./api/Notification/notification.service";
@@ -8,7 +8,7 @@ import {NotificationService} from "./api/Notification/notification.service";
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, NgIf, NgForOf, JsonPipe],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, NgIf, NgForOf, JsonPipe, NgTemplateOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
@@ -41,8 +41,6 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
     this.onResize();
   }
 
-  protected notificationsOverlayVisible: boolean = true;
-
   constructor(
     protected readonly router: Router,
     protected readonly userService: UserService,
@@ -69,7 +67,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   toggleMenu() {
-    this.notificationsOverlayVisible = !this.notificationsOverlayVisible;
+    this.notificationService.toggle();
     this.onResize();
   }