From f4c50bc7a29350f7cc17d9f925afbbf588804598 Mon Sep 17 00:00:00 2001
From: Yura <yura.bondarenko@atmire.com>
Date: Tue, 5 Oct 2021 10:04:14 +0200
Subject: [PATCH] Pause all notifications when hovering over board

---
 .../notification/notification.component.html              | 2 --
 .../notifications/notification/notification.component.ts  | 8 ++++++--
 .../notifications-board.component.html                    | 7 +++++--
 .../notifications-board/notifications-board.component.ts  | 8 ++++++--
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index 57ac27d42f..e8b3d37b5f 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,6 +1,4 @@
 <div class="alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
-     (mouseenter)="isPaused$.next(true)"
-     (mouseleave)="isPaused$.next(false)"
      [@enterLeave]="animate">
 
   <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">
diff --git a/src/app/shared/notifications/notification/notification.component.ts b/src/app/shared/notifications/notification/notification.component.ts
index 6976b67834..aea7c5831b 100644
--- a/src/app/shared/notifications/notification/notification.component.ts
+++ b/src/app/shared/notifications/notification/notification.component.ts
@@ -1,4 +1,4 @@
-import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -48,6 +48,11 @@ export class NotificationComponent implements OnInit, OnDestroy {
 
   @Input() public notification = null as INotification;
 
+  /**
+   * Whether this notification's countdown should be paused
+   */
+  @Input() public isPaused$: Observable<boolean>;
+
   // Progress bar variables
   public title: Observable<string>;
   public content: Observable<string>;
@@ -66,7 +71,6 @@ export class NotificationComponent implements OnInit, OnDestroy {
   private count = 0;
   private start: any;
   private diff: any;
-  public isPaused$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public animate: string;
 
   constructor(private notificationService: NotificationsService,
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.html b/src/app/shared/notifications/notifications-board/notifications-board.component.html
index 15f5044bc4..854842f30d 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.html
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.html
@@ -1,7 +1,10 @@
-<div class="notifications-wrapper position-fixed" [ngClass]="position">
+<div class="notifications-wrapper position-fixed"
+     [ngClass]="position"
+     (mouseenter)="this.isPaused$.next(true);"
+     (mouseleave)="this.isPaused$.next(false);">
   <ds-notification
     class="notification"
     *ngFor="let a of notifications; let i = index"
-    [notification]="a">
+    [notification]="a" [isPaused$]="isPaused$">
   </ds-notification>
 </div>
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.ts b/src/app/shared/notifications/notifications-board/notifications-board.component.ts
index 829cfadf0f..f153d1009e 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.ts
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.ts
@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 
 import { select, Store } from '@ngrx/store';
-import { Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 import { difference } from 'lodash';
 
 import { NotificationsService } from '../notifications.service';
@@ -44,6 +44,11 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
   public rtl = false;
   public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
 
+  /**
+   * Whether to pause the dismiss countdown of all notifications on the board
+   */
+  public isPaused$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
   constructor(private service: NotificationsService,
               private store: Store<AppState>,
               private cdr: ChangeDetectorRef) {
@@ -129,7 +134,6 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
       }
     });
   }
-
   ngOnDestroy(): void {
     if (this.sub) {
       this.sub.unsubscribe();