animation bug

@overflow/commons/ui/component/primeng/popup-panel.component.ts

@@ -5,7 +5,8 @@ import {
 } from '@angular/core';
 import { trigger, state, style, transition, animate, AnimationEvent } from '@angular/animations';
 import { DomHandler } from 'primeng/primeng';
-
+import { Store } from '@ngrx/store';
+import * as UILayoutStore from 'src/app/store/ui/layout';
 
 @Component({
   selector: 'of-p-popupPanel',
@@ -60,7 +61,7 @@ export class PopupPanelComponent implements OnDestroy {
 
   blockUIVisible = false;
 
-  constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) { }
+  constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2, private store: Store<any>, ) { }
 
   toggle(event) {
     if (this.visible) {
@@ -76,6 +77,10 @@ export class PopupPanelComponent implements OnDestroy {
     this.target = event.currentTarget;
     this.visible = true;
     this.preventDocumentDefault = true;
+
+
+    /////
+    this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: true }));
   }
 
   onOverlayAnimationStart(event: AnimationEvent) {
@@ -125,6 +130,7 @@ export class PopupPanelComponent implements OnDestroy {
 
   hide() {
     this.visible = false;
+    this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: false }));
   }
 
   onWindowResize() {

src/app/app.component.html

@@ -29,7 +29,7 @@
   <app-menu-about></app-menu-about>
 
   <p-footer>
-    <button type="button" pButton icon="pi pi-check" (click)="displayAbout=false" label="OK"></button>
+    <button type="button" pButton icon="pi pi-check" (click)="onMenuClosed()" label="OK"></button>
   </p-footer>
 </p-dialog>
 
@@ -38,7 +38,7 @@
   <app-menu-export-jpeg #exportJPEG></app-menu-export-jpeg>
   <p-footer>
     <button type="button" pButton icon="pi pi-check" (click)="exportJPEG.export();" label="Yes"></button>
-    <button type="button" pButton icon="pi pi-close" (click)="displayExportJPEG=false" label="No" class="ui-button-secondary"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="onMenuClosed()" label="No" class="ui-button-secondary"></button>
   </p-footer>
 </p-dialog>
 
@@ -47,7 +47,7 @@
   <app-menu-export-png #exportPNG></app-menu-export-png>
   <p-footer>
     <button type="button" pButton icon="pi pi-check" (click)="exportPNG.export();" label="Yes"></button>
-    <button type="button" pButton icon="pi pi-close" (click)="displayExportPNG=false" label="No" class="ui-button-secondary"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="onMenuClosed()" label="No" class="ui-button-secondary"></button>
   </p-footer>
 </p-dialog>
 
@@ -56,7 +56,7 @@
   <app-menu-export-svg #exportSVG></app-menu-export-svg>
   <p-footer>
     <button type="button" pButton icon="pi pi-check" (click)="exportSVG.export();" label="Yes"></button>
-    <button type="button" pButton icon="pi pi-close" (click)="displayExportSVG=false" label="No" class="ui-button-secondary"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="onMenuClosed()" label="No" class="ui-button-secondary"></button>
   </p-footer>
 </p-dialog>
 
@@ -65,7 +65,7 @@
   <app-menu-preferences></app-menu-preferences>
   <p-footer>
     <button type="button" pButton icon="pi pi-check" (click)="displayPreferences=false" label="Yes"></button>
-    <button type="button" pButton icon="pi pi-close" (click)="displayPreferences=false" label="No" class="ui-button-secondary"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="onMenuClosed()" label="No" class="ui-button-secondary"></button>
   </p-footer>
 </p-dialog>
 
@@ -74,6 +74,6 @@
   <app-menu-print></app-menu-print>
   <p-footer>
     <button type="button" pButton icon="pi pi-check" (click)="displayPrint=false" label="Yes"></button>
-    <button type="button" pButton icon="pi pi-close" (click)="displayPrint=false" label="No" class="ui-button-secondary"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="onMenuClosed()" label="No" class="ui-button-secondary"></button>
   </p-footer>
 </p-dialog>

src/app/app.component.ts

@@ -12,6 +12,7 @@ import { MenuEvent } from '../commons/type';
 import * as AppStore from './store';
 import * as _AppStore from './store/app';
 import * as UserStore from './store/environment/user';
+import * as UILayoutStore from 'src/app/store/ui/layout';
 
 import * as log from './core/util/log';
 
@@ -67,15 +68,19 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
           switch (name) {
             case 'show-about':
               this.displayAbout = true;
+              this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: true }));
               break;
             case 'show-export-jpeg':
               this.displayExportJPEG = true;
+              this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: true }));
               break;
             case 'show-export-png':
               this.displayExportPNG = true;
+              this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: true }));
               break;
             case 'show-export-svg':
               this.displayExportSVG = true;
+              this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: true }));
               break;
             case 'show-preferences':
               this.displayPreferences = true;
@@ -126,7 +131,14 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
     this.menuSubscription.unsubscribe();
   }
 
-  // onMenuClosed(event) {
+  onMenuClosed() {
+    this.displayAbout = false;
+    this.displayExportJPEG = false;
+    this.displayExportPNG = false;
+    this.displayExportSVG = false;
+    this.displayPreferences = false;
+    this.displayPrint = false;
+    this.store.dispatch(new UILayoutStore.ChangeBlockPagesContent({ blockPagesContent: false }));
     // this.changeDetector.markForCheck();
-  // }
+  }
 }

src/app/pages/home/home-page.component.ts

@@ -1,5 +1,5 @@
 
-import { Component, OnInit, OnDestroy, } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { Observable } from 'rxjs';
 
@@ -43,4 +43,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
     DiscoverySession.requestDiscover(this.store, this.probeService);
   }
 
+
+
 }