add fade in - fade out popover animation

cisco-open · Oct 24, 2024 · 15e9225 · 15e9225
1 parent 70bed4d
commit 15e9225
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/...rc/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.html b/...rc/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.html
@@ -14,7 +14,11 @@
 
   SPDX-License-Identifier: Apache-2.0 -->
 
-<div class="tooltip-container" [ngClass]="data.position" [ngStyle]="data.width | iconPanelSizeStyles: data.height">
+<div
+	class="tooltip-container"
+	[ngClass]="data.position"
+	[ngStyle]="data.width | iconPanelSizeStyles: data.height"
+	[@fadeInOut]="isClosing">
 	<div class="tooltip-arrow"></div>
 
 	<div class="popover-content">

diff --git a/.../src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.ts b/.../src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.ts
@@ -14,11 +14,13 @@
 //
 //   SPDX-License-Identifier: Apache-2.0
 
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, HostListener, Inject, Input, Output, TemplateRef } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION } from '../../models/constants/popover.constants';
 import { PopoverStatus } from '../../models/enums/popover-status.enum';
 import { PopoverConfig } from '../../models/interfaces/popover-config.interface';
 import { PopoverSizeStylesPipe } from '../../pipes/popover-size-style.pipe';
@@ -31,12 +33,25 @@ import { POPOVER_DATA } from '../../popover.tokens';
 	standalone: true,
 	imports: [CommonModule, MatIconModule, MatButtonModule, PopoverSizeStylesPipe],
 	templateUrl: './ms-popover.component.html',
-	styleUrl: './ms-popover.component.scss'
+	styleUrl: './ms-popover.component.scss',
+	animations: [
+		trigger('fadeInOut', [
+			state('void', style({ opacity: 0 })),
+			state('true', style({ opacity: 0 })),
+			state('false', style({ opacity: 1 })),
+			transition(':enter', [
+				animate(`${DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION}ms ease-in`, style({ opacity: 1 }))
+			]),
+			transition('false => true', [animate(`${DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION}ms ease-out`)])
+		])
+	]
 })
 export class MsPopoverComponent {
 	@Input() contentTemplate?: TemplateRef<any>;
 	@Output() actionEvent: EventEmitter<PopoverStatus> = new EventEmitter<PopoverStatus>();
 
+	isClosing = false;
+
 	constructor(
 		private popoverRef: PopoverRef,
 		@Inject(POPOVER_DATA) public data: PopoverConfig
@@ -47,16 +62,19 @@ export class MsPopoverComponent {
 	onClose(): void {
 		this.actionEvent.emit(PopoverStatus.CLOSE);
 		this.popoverRef.close({ status: PopoverStatus.CLOSE });
+		this.isClosing = true;
 	}
 
 	onSave(): void {
 		this.actionEvent.emit(PopoverStatus.SAVE);
 		this.popoverRef.close({ status: PopoverStatus.SAVE });
+		this.isClosing = false;
 	}
 
 	onDismiss(): void {
 		this.actionEvent.emit(PopoverStatus.DISMISS);
 		this.popoverRef.close({ status: PopoverStatus.DISMISS });
+		this.isClosing = false;
 	}
 
 	private closeDrawerOnBackdropClick(): void {

diff --git a/frontend/src/app/modules/core/components/ms-popover/models/constants/popover.constants.ts b/frontend/src/app/modules/core/components/ms-popover/models/constants/popover.constants.ts
@@ -19,4 +19,6 @@ import { PopoverCSSSize } from '../types/popover-css-size.type';
 export const DEFAUlT_POPOVER_WIDTH: PopoverCSSSize = '200px';
 export const DEFAUlT_POPOVER_HEIGHT: PopoverCSSSize = '80px';
 
-export const DEFAULT_POPOVER_POSITION_VALUE = 'top';
+export const DEFAULT_POPOVER_POSITION_VALUE: 'top' | 'bottom' | 'left' | 'right' = 'top';
+
+export const DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION: number = 150;
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
@@ -16,6 +16,7 @@
 
 import { OverlayRef } from '@angular/cdk/overlay';
 import { Observable, Subject } from 'rxjs';
+import { DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION } from './models/constants/popover.constants';
 import { PopoverClose } from './models/interfaces/popover-config.interface';
 
 export class PopoverRef {
@@ -44,10 +45,14 @@ export class PopoverRef {
 	}
 
 	public close(result?: PopoverClose<any>) {
-		this.overlayRef.dispose();
 		this.afterClosedSubject.next(result);
 		this.afterClosedSubject.complete();
 		this.dataSubject.complete();
+
+		// Delay the disposal to allow fade-out animation to complete
+		setTimeout(() => {
+			this.overlayRef.dispose();
+		}, DEFAULT_POPOVER_FADE_IN_OUT_ANIMATION_DURATION);
 	}
 
 	public afterClosed(): Observable<any> {