popover - don't dispay fade out animation in case of sudden close

cisco-open · Oct 28, 2024 · a698195 · a698195
1 parent 99686ea
commit a698195
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git a/frontend/src/app/modules/core/components/ms-popover/popover.ref.ts b/frontend/src/app/modules/core/components/ms-popover/popover.ref.ts
@@ -58,17 +58,19 @@ export class PopoverRef {
 		return this.overlayRef.backdropClick();
 	}
 
-	public close(result?: PopoverClose<any>) {
+	public close(result?: PopoverClose<any>, showAnimation: boolean = true): void {
 		this.isClosing = true;
 
 		this.afterClosedSubject.next(result);
 		this.afterClosedSubject.complete();
 		this.dataSubject.complete();
 
-		// Delay the disposal to allow fade-out animation to complete
+		// If showAnimation is false, close immediately; otherwise, delay to allow fade-out animation
+		const closeDelay = showAnimation ? DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION : 0;
+
 		setTimeout(() => {
 			this.overlayRef.dispose();
-		}, DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION);
+		}, closeDelay);
 	}
 
 	public afterClosed(): Observable<any> {

diff --git a/frontend/src/app/modules/core/components/ms-popover/service/popover-manager.service.ts b/frontend/src/app/modules/core/components/ms-popover/service/popover-manager.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { PopoverClose } from '../models/interfaces/popover-config.interface';
 import { PopoverRef } from '../popover.ref';
 
 // The PopoverManagerService is responsible for managing all active popovers within the application. It allows popovers to be registered and tracked by a unique id so that they can be closed or managed globally. This service provides the ability to open, close, and check the status of popovers using these unique identifiers.
@@ -24,10 +25,10 @@ export class PopoverManagerService {
 		this.activePopovers.delete(id);
 	}
 
-	closePopoverById(id: string): void {
+	closePopoverById(id: string, result: PopoverClose<any>, showAnimation = true): void {
 		const popoverRef = this.activePopovers.get(id);
 		if (popoverRef) {
-			popoverRef.close();
+			popoverRef.close(result, showAnimation);
 			this.activePopovers.delete(id);
 		}
 	}

diff --git a/...minal/components/ms-terminal-fullscreen-dialog/ms-terminal-fullscreen-dialog.component.ts b/...minal/components/ms-terminal-fullscreen-dialog/ms-terminal-fullscreen-dialog.component.ts
@@ -18,7 +18,7 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { DialogRef, MsDialogComponent } from '../../../../../core/components/ms-dialog';
-import { DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION } from '../../../../../core/components/ms-popover/models/constants/popover.constants';
+import { PopoverClose, PopoverStatus } from '../../../../../core/components/ms-popover';
 import { PopoverManagerService } from '../../../../../core/components/ms-popover/service/popover-manager.service';
 import { MsTerminalToolbarComponent } from '../ms-terminal-toolbar/ms-terminal-toolbar.component';
 import { MsTerminalXtermComponent } from '../ms-terminal-xterm/ms-terminal-xterm.component';
@@ -41,12 +41,15 @@ export class MsTerminalFullscreenDialogComponent {
 
 	closeDialog(): void {
 		if (this.popoverManager.hasActivePopover(this.fullscreenPopoverId)) {
-			this.popoverManager.closePopoverById(this.fullscreenPopoverId);
-			setTimeout(() => {
-				this.dialogRef.close();
-			}, DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION);
-		} else {
-			this.dialogRef.close();
+			this.popoverManager.closePopoverById(
+				this.fullscreenPopoverId,
+				{
+					result: {},
+					status: PopoverStatus.CLOSE
+				} as PopoverClose<any>,
+				false
+			);
 		}
+		this.dialogRef.close();
 	}
 }
diff --git a/...nal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts b/...nal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts
@@ -16,6 +16,7 @@
 
 import { Component, ElementRef, OnDestroy, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { PopoverClose, PopoverStatus } from '../../../../../core/components/ms-popover';
 import { PopoverManagerService } from '../../../../../core/components/ms-popover/service/popover-manager.service';
 import { MsTerminalToolbarComponent } from '../ms-terminal-toolbar/ms-terminal-toolbar.component';
 import { MsTerminalXtermComponent } from '../ms-terminal-xterm/ms-terminal-xterm.component';
@@ -51,7 +52,10 @@ export class MsTerminalXtermWithToolbarComponent implements OnDestroy {
 
 		if (this.terminalWrapper && !this.terminalWrapper.nativeElement.contains(event.target) && !clickedInsidePopover) {
 			if (this.popoverManager.hasActivePopover('terminal-popover')) {
-				this.popoverManager.closePopoverById('terminal-popover');
+				this.popoverManager.closePopoverById('terminal-popover', {
+					result: {},
+					status: PopoverStatus.CLOSE
+				} as PopoverClose<any>);
 			}
 		}
 	}