diff --git a/frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.html b/frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.html index 8310181..eb07b4f 100644 --- a/frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.html +++ b/frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.html @@ -15,10 +15,10 @@ SPDX-License-Identifier: Apache-2.0 -->
+ [@fadeInOut]="popoverRef.isClosing">
diff --git a/frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.ts b/frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.ts index e3fe51d..80c0942 100644 --- a/frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.ts +++ b/frontend/src/app/modules/core/components/ms-popover/components/ms-popover/ms-popover.component.ts @@ -50,10 +50,8 @@ export class MsPopoverComponent { @Input() contentTemplate?: TemplateRef; @Output() actionEvent: EventEmitter = new EventEmitter(); - isClosing = false; - constructor( - private popoverRef: PopoverRef, + public popoverRef: PopoverRef, @Inject(POPOVER_DATA) public data: PopoverConfig ) { this.closeDrawerOnBackdropClick(); @@ -62,19 +60,16 @@ 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/popover.ref.ts b/frontend/src/app/modules/core/components/ms-popover/popover.ref.ts index b0bc90c..a511bc9 100644 --- a/frontend/src/app/modules/core/components/ms-popover/popover.ref.ts +++ b/frontend/src/app/modules/core/components/ms-popover/popover.ref.ts @@ -29,6 +29,11 @@ import { PopoverClose } from './models/interfaces/popover-config.interface'; // - Handle Backdrop Clicks: Allows listening to backdrop clicks, providing a way to close the popover or take action when the user clicks outside of the popover. export class PopoverRef { + /** + * Based on this value we trigger the fade-in and fade-out animations. + */ + public isClosing: boolean = false; + private afterClosedSubject = new Subject(); /** @@ -54,6 +59,8 @@ export class PopoverRef { } public close(result?: PopoverClose) { + this.isClosing = true; + this.afterClosedSubject.next(result); this.afterClosedSubject.complete(); this.dataSubject.complete(); diff --git a/frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-toolbar/ms-terminal-toolbar.component.ts b/frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-toolbar/ms-terminal-toolbar.component.ts index f851fd7..8c37d20 100644 --- a/frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-toolbar/ms-terminal-toolbar.component.ts +++ b/frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-toolbar/ms-terminal-toolbar.component.ts @@ -109,6 +109,7 @@ export class MsTerminalToolbarComponent implements OnInit, OnDestroy { .pipe(take(1)) .subscribe(() => { this.searchPanelRef = undefined; + this.disposeSearch.emit(); }); } @@ -135,6 +136,10 @@ export class MsTerminalToolbarComponent implements OnInit, OnDestroy { } openTerminalMessagesHistoryDialog() { + if (!isNil(this.searchPanelRef)) { + this.searchPanelRef?.close(); + } + this.terminalDialogService.openMessagesHistoryDialog(); } diff --git a/frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts b/frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts index 6cc8110..21cb703 100644 --- a/frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts +++ b/frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-xterm-with-toolbar/ms-terminal-xterm-with-toolbar.component.ts @@ -31,6 +31,7 @@ import { MsTerminalXtermComponent } from '../ms-terminal-xterm/ms-terminal-xterm }) export class MsTerminalXtermWithToolbarComponent implements OnDestroy { @ViewChild('terminalWrapper') terminalWrapper!: ElementRef; + @ViewChild('popoverElement') popoverElement!: ElementRef; private clickListener!: () => void; @@ -46,7 +47,9 @@ export class MsTerminalXtermWithToolbarComponent implements OnDestroy { } handleClickOutside(event: Event): void { - if (this.terminalWrapper && !this.terminalWrapper.nativeElement.contains(event.target)) { + const clickedInsidePopover = (event.target as HTMLElement).closest('.popover-element'); + + if (this.terminalWrapper && !this.terminalWrapper.nativeElement.contains(event.target) && !clickedInsidePopover) { if (this.popoverManager.hasActivePopover('terminal-popover')) { this.popoverManager.closePopoverById('terminal-popover'); }