ing

@overflow/commons/ui/component/index.ts

@@ -4,6 +4,7 @@ import {
 
 import {
   DropdownPanelComponent,
+  PopupPanelComponent
 } from './primeng';
 
 import {
@@ -18,6 +19,7 @@ import {
 export const COMPONENTS = [
   DropdownPanelComponent,
   MenuBarComponent,
+  PopupPanelComponent,
   ToolbarComponent,
   TitleBarComponent,
   WindowControlsComponent,

@overflow/commons/ui/component/primeng/dropdown-panel.component.html

@@ -1,18 +1,12 @@
-<div [class]="styleClass" [ngStyle]="style" [ngClass]="{'ui-dropdownpanel ui-widget': true}">
-  <div [ngClass]="{'ui-widget ui-dropdownpanel-header ui-state-default':true, 'ui-state-active':visible}" (click)="toggle($event)">
+<div [ngClass]="'ui-popuppanel-header'" *ngIf="headerFacet" [ngStyle]="headerStyle" [class]="headerStyleClass" (click)="popupPanel.toggle($event)">
   <ng-content select="p-header"></ng-content>
-  </div>
 </div>
 
-<div #container [ngClass]="{'ui-dropdownpanel-container ui-menu ui-widget ui-widget-content': true, 'ui-menu-dynamic ui-shadow': popup}"
-  [class]="dropdownStyleClass" [ngStyle]="dropdownStyle" (click)="preventDocumentDefault=true" *ngIf="!popup || visible" [@overlayAnimation]="'visible'"
-  [@.disabled]="popup !== true" (@overlayAnimation.start)="onOverlayAnimationStart($event)">
-  <div class="ui-dropdownpanel-content-wrapper" [ngClass]="{'ui-dropdownpanel-content-wrapper-overflown': !visible||animating}">
-    <div class="ui-dropdownpanel-content ui-widget-content">
+<of-p-popupPanel #popupPanel [style]="style" [styleClass]="styleClass" [appendTo]="blockTarget">
+  <div [ngClass]="'ui-popuppanel-content'">
     <ng-content></ng-content>
   </div>
-    <div class="ui-dropdownpanel-footer" *ngIf="footerFacet">
+  <div [ngClass]="'ui-popuppanel-footer'" *ngIf="footerFacet" [ngStyle]="footerStyle" [class]="footerStyleClass">
     <ng-content select="p-footer"></ng-content>
   </div>
-  </div>
-</div>
+</of-p-popupPanel>

@overflow/commons/ui/component/primeng/dropdown-panel.component.scss

@@ -1,24 +1,25 @@
-.ui-dropdownpanel {
+.ui-popuppanel-header {
     width: 100%;
     height: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-
-  &-header {
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    padding: var(--spacing);
-    overflow: hidden;
-    background-color: var(--toolbar-button-background-color)
-  }
-
-  .ui-dropdownpanel-container {
-    background-color: rgba(201, 76, 76, 0.3);
-  }
-
-  .ui-dropdownpanel-footer {
-    padding-top: 1em;
-  }
+}
+
+.ui-popuppanel-body {
+    padding: 1em;
+}
+
+.ui-popuppanel-title {
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-bottom: .5em;
+}
+
+.ui-popuppanel-subtitle {
+    opacity: .7;
+    margin-bottom: .5em;
+    margin-top: -.25em;
+    font-weight: bold;
+}
+
+.ui-popuppanel-footer {
+    padding-top: 1em;
 }

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

@@ -1,185 +1,30 @@
-import { Component, ElementRef, OnDestroy, Input, Renderer2, ViewChild, ContentChild } from '@angular/core';
-import { trigger, state, style, transition, animate, AnimationEvent } from '@angular/animations';
-import { Header, Footer, DomHandler } from 'primeng/primeng';
+import { Component, Input, ContentChild } from '@angular/core';
+import { Header, Footer } from 'primeng/primeng';
 
 @Component({
-  selector: 'p-dropdownPanel',
+  selector: 'of-p-dropdownPanel',
   templateUrl: './dropdown-panel.component.html',
   styleUrls: ['./dropdown-panel.component.scss'],
-  animations: [
-    trigger('overlayAnimation', [
-      state('void', style({
-        // transform: 'translateY(5%)',
-        transform: 'translate3d(0, 0, 0)',
-        opacity: 0
-      })),
-      state('visible', style({
-        // transform: 'translateY(0)',
-        transform: 'translate3d(0, 0, 0)',
-        opacity: 1
-      })),
-      transition('void => visible', animate('225ms ease-in-out')),
-      transition('visible => void', animate('195ms ease-in-out'))
-      // transition('void => visible', animate('225ms ease-out')),
-      // transition('visible => void', animate('195ms ease-in'))
-      // transition('visible => void', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
-      // transition('void => visible', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
-    ])
-  ],
-  providers: [DomHandler]
 })
-export class DropdownPanelComponent implements OnDestroy {
-
-  @Input() popup = true;
+export class DropdownPanelComponent {
+  @Input() blockTarget: any;
 
   @Input() style: any;
 
   @Input() styleClass: string;
 
-  @Input() dropdownStyle: any;
+  @Input() headerStyle: any;
 
-  @Input() dropdownStyleClass: string;
+  @Input() headerStyleClass: string;
 
-  @Input() appendTo: any;
+  @Input() footerStyle: any;
 
-  @Input() autoZIndex = true;
-
-  @Input() baseZIndex = 0;
-
-  @ViewChild('container') containerViewChild: ElementRef;
+  @Input() footerStyleClass: string;
 
   @ContentChild(Header) headerFacet;
 
   @ContentChild(Footer) footerFacet;
 
-  container: HTMLDivElement;
-
-  documentClickListener: any;
-
-  documentResizeListener: any;
-
-  preventDocumentDefault: boolean;
-
-  target: any;
-
-  visible = false;
-
-  constructor(
-    public el: ElementRef,
-    public domHandler: DomHandler,
-    public renderer: Renderer2
-  ) {
-
-  }
-
-  toggle(event) {
-    if (this.visible) {
-      this.hide();
-    } else {
-      this.show(event);
-    }
-
-    this.preventDocumentDefault = true;
-  }
-
-  show(event) {
-    this.target = event.currentTarget;
-    this.visible = true;
-    this.preventDocumentDefault = true;
-  }
-
-  onOverlayAnimationStart(event: AnimationEvent) {
-    switch (event.toState) {
-      case 'visible':
-        if (this.popup) {
-          this.container = event.element;
-          this.moveOnTop();
-          this.appendOverlay();
-          this.domHandler.absolutePosition(this.container, this.target);
-          this.bindDocumentClickListener();
-          this.bindDocumentResizeListener();
-        }
-        break;
-
-      case 'void':
-        this.onOverlayHide();
-        break;
-    }
-  }
-
-  appendOverlay() {
-    if (this.appendTo) {
-      if (this.appendTo === 'body') {
-        document.body.appendChild(this.container);
-      } else {
-        this.domHandler.appendChild(this.container, this.appendTo);
-      }
-    }
-  }
-
-  restoreOverlayAppend() {
-    if (this.container && this.appendTo) {
-      this.el.nativeElement.appendChild(this.container);
-    }
-  }
-
-  moveOnTop() {
-    if (this.autoZIndex) {
-      this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
-    }
-  }
-
-  hide() {
-    this.visible = false;
-  }
-
-  onWindowResize() {
-    this.hide();
-  }
-
-  bindDocumentClickListener() {
-    if (!this.documentClickListener) {
-      this.documentClickListener = this.renderer.listen('document', 'click', () => {
-        if (!this.preventDocumentDefault) {
-          this.hide();
-        }
-
-        this.preventDocumentDefault = false;
-      });
-    }
-  }
-
-  unbindDocumentClickListener() {
-    if (this.documentClickListener) {
-      this.documentClickListener();
-      this.documentClickListener = null;
-    }
-  }
-
-  bindDocumentResizeListener() {
-    this.documentResizeListener = this.onWindowResize.bind(this);
-    window.addEventListener('resize', this.documentResizeListener);
-  }
-
-  unbindDocumentResizeListener() {
-    if (this.documentResizeListener) {
-      window.removeEventListener('resize', this.documentResizeListener);
-      this.documentResizeListener = null;
-    }
-  }
-
-  onOverlayHide() {
-    this.unbindDocumentClickListener();
-    this.unbindDocumentResizeListener();
-    this.preventDocumentDefault = false;
-    this.target = null;
-  }
-
-  ngOnDestroy() {
-    if (this.popup) {
-      this.restoreOverlayAppend();
-      this.onOverlayHide();
-    }
-  }
+  constructor() { }
 
 }

@overflow/commons/ui/component/primeng/index.ts

@@ -1 +1,2 @@
 export { DropdownPanelComponent } from './dropdown-panel.component';
+export { PopupPanelComponent } from './popup-panel.component';

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

@@ -0,0 +1,8 @@
+<div #container [ngClass]="{'ui-popuppanel ui-widget ui-widget-content ui-corner-all': true, 'ui-popuppanel-dynamic ui-shadow': popup}"
+  [class]="styleClass" [ngStyle]="style" (click)="preventDocumentDefault=true" *ngIf="!popup || visible" [@overlayAnimation]="'visible'"
+  [@.disabled]="popup !== true" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
+  <ng-content></ng-content>
+</div>
+
+<p-blockUI id="block-ui" [target]="blockTarget" [blocked]="visible">
+</p-blockUI>

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

@@ -0,0 +1,12 @@
+.ui-popuppanel {
+    width: 12.5em;
+    padding: .25em;
+}
+
+.ui-popuppanel.ui-popuppanel-dynamic {
+    position: absolute;
+}
+
+#block-ui {
+  min-height:100vh;
+}

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

@@ -0,0 +1,173 @@
+import { NgModule, Component, ElementRef, OnDestroy, Input, Renderer2, ViewChild, Inject, forwardRef } from '@angular/core';
+import { trigger, state, style, transition, animate, AnimationEvent } from '@angular/animations';
+import { DomHandler } from 'primeng/primeng';
+
+
+@Component({
+  selector: 'of-p-popupPanel',
+  templateUrl: './popup-panel.component.html',
+  styleUrls: ['./popup-panel.component.scss'],
+  animations: [
+    trigger('overlayAnimation', [
+      state('void', style({
+        transform: 'translateY(5%)',
+        opacity: 0
+      })),
+      state('visible', style({
+        transform: 'translateY(0)',
+        opacity: 1
+      })),
+      transition('void => visible', animate('225ms ease-out')),
+      transition('visible => void', animate('195ms ease-in'))
+    ])
+  ],
+  providers: [DomHandler]
+})
+export class PopupPanelComponent implements OnDestroy {
+  @Input() blockTarget: any;
+
+  @Input() style: any;
+
+  @Input() styleClass: string;
+
+  @Input() appendTo: any;
+
+  @Input() autoZIndex = true;
+
+  @Input() baseZIndex = 0;
+
+  @ViewChild('container') containerViewChild: ElementRef;
+
+  private readonly popup = true;
+
+  container: HTMLDivElement;
+
+  documentClickListener: any;
+
+  documentResizeListener: any;
+
+  preventDocumentDefault: boolean;
+
+  target: any;
+
+  visible: boolean;
+
+  blockUIVisible = false;
+
+  constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer2) { }
+
+  toggle(event) {
+    if (this.visible) {
+      this.hide();
+    } else {
+      this.show(event);
+    }
+
+    this.preventDocumentDefault = true;
+  }
+
+  show(event) {
+    this.target = event.currentTarget;
+    this.visible = true;
+    this.preventDocumentDefault = true;
+  }
+
+  onOverlayAnimationStart(event: AnimationEvent) {
+    switch (event.toState) {
+      case 'visible':
+        if (this.popup) {
+          this.container = event.element;
+          this.moveOnTop();
+          this.appendOverlay();
+          this.domHandler.absolutePosition(this.container, this.target);
+          this.bindDocumentClickListener();
+          this.bindDocumentResizeListener();
+        }
+        break;
+
+      case 'void':
+        this.onOverlayHide();
+        break;
+    }
+  }
+
+  onOverlayAnimationDone(event: AnimationEvent) {
+    console.log('onOverlayAnimationDone');
+  }
+
+  appendOverlay() {
+    if (this.appendTo) {
+      if (this.appendTo === 'body') {
+        document.body.appendChild(this.container);
+      } else {
+        this.domHandler.appendChild(this.container, this.appendTo);
+      }
+    }
+  }
+
+  restoreOverlayAppend() {
+    if (this.container && this.appendTo) {
+      this.el.nativeElement.appendChild(this.container);
+    }
+  }
+
+  moveOnTop() {
+    if (this.autoZIndex) {
+      this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+    }
+  }
+
+  hide() {
+    this.visible = false;
+  }
+
+  onWindowResize() {
+    this.hide();
+  }
+
+  bindDocumentClickListener() {
+    if (!this.documentClickListener) {
+      this.documentClickListener = this.renderer.listen('document', 'click', () => {
+        if (!this.preventDocumentDefault) {
+          this.hide();
+        }
+
+        this.preventDocumentDefault = false;
+      });
+    }
+  }
+
+  unbindDocumentClickListener() {
+    if (this.documentClickListener) {
+      this.documentClickListener();
+      this.documentClickListener = null;
+    }
+  }
+
+  bindDocumentResizeListener() {
+    this.documentResizeListener = this.onWindowResize.bind(this);
+    window.addEventListener('resize', this.documentResizeListener);
+  }
+
+  unbindDocumentResizeListener() {
+    if (this.documentResizeListener) {
+      window.removeEventListener('resize', this.documentResizeListener);
+      this.documentResizeListener = null;
+    }
+  }
+
+  onOverlayHide() {
+    this.unbindDocumentClickListener();
+    this.unbindDocumentResizeListener();
+    this.preventDocumentDefault = false;
+    this.target = null;
+  }
+
+  ngOnDestroy() {
+    if (this.popup) {
+      this.restoreOverlayAppend();
+      this.onOverlayHide();
+    }
+  }
+
+}

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

@@ -8,6 +8,26 @@
                         <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton></button>
                     </div>
                 </p-panel>
+
+                <h3 class="first">Document</h3>
+                <p-blockUI [blocked]="blockedDocument"></p-blockUI>
+
+                <button type="button" pButton label="Block" (click)="blockDocument()"></button>
+
+                <h3>Panel</h3>
+                <button type="button" pButton label="Block" (click)="blockedPanel=true"></button>
+                <button type="button" pButton label="Unblock" (click)="blockedPanel=false"></button>
+
+                <p-blockUI [target]="pnl" [blocked]="blockedPanel">
+                    <i class="fa fa-lock fa-5x" style="position:absolute;top:25%;left:50%"></i>
+                </p-blockUI>
+                <p-panel #pnl header="Godfather I" [style]="{'margin-top':'20px'}">
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
+                    son Michael has just come home from the war, but does not intend to become part of his father's business.
+                    Through Michael's life the nature of the family business becomes clear. The business of the family is
+                    just like the head of the family, kind and benevolent to those who give respect, but given to ruthless
+                    violence whenever anything stands against the good of the family.
+                </p-panel>
             </div>
         </div>
     </div>

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

@@ -9,6 +9,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomePageComponent implements OnInit {
 
+  blockedPanel = false;
+
+  blockedDocument = false;
 
   constructor() { }
 
@@ -16,5 +19,10 @@ export class HomePageComponent implements OnInit {
   }
 
 
-
+  blockDocument() {
+    this.blockedDocument = true;
+    setTimeout(() => {
+      this.blockedDocument = false;
+    }, 3000);
+  }
 }

src/app/pages/pages.component.html

@@ -1,6 +1,6 @@
 <app-toolbar>
-  <app-nic-dropdown></app-nic-dropdown>
-  <app-scanner-setting-dropdown></app-scanner-setting-dropdown>
+  <app-nic-dropdown [blockTarget]="pagesContent"></app-nic-dropdown>
+  <app-scanner-setting-dropdown [blockTarget]="pagesContent"></app-scanner-setting-dropdown>
 
   <div class="sidebar-section" style="width: 250px;">
     <div class="toolbar-dropdown closed" aria-expanded="false">
@@ -53,6 +53,8 @@
   </div>
 </app-toolbar>
 
-<div #bodyPlaceholder>
+<p-panel #pagesContent [showHeader]="false">
+  <div id="pages-content">
     <router-outlet #o="outlet"></router-outlet>
-</div>
+  </div>
+</p-panel>

src/app/pages/pages.component.scss

@@ -0,0 +1,3 @@
+#pages-content {
+  min-height: 100vh;
+}

src/commons/component/nic-dropdown.component.html

@@ -1,4 +1,4 @@
-<p-dropdownPanel [style]="{'width':'300px'}" [dropdownStyle]="{'width':'500px', 'height':'500px'}">
+<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
   <p-header>
     192.168.1.0/24
   </p-header>
@@ -8,4 +8,4 @@
   <p-footer>
     Footer content here
   </p-footer>
-</p-dropdownPanel>
+</of-p-dropdownPanel>

src/commons/component/nic-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-nic-dropdown',
@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./nic-dropdown.component.scss'],
 })
 export class NicDropdownComponent {
+  @Input() blockTarget: any;
 
   constructor(
   ) {

src/commons/component/scanner-setting-dropdown.component.html

@@ -1,10 +1,28 @@
-<p-dropdownPanel [style]="{'width':'300px'}" [dropdownStyle]="{'width':'500px', 'height':'500px'}">
+<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
   <p-header>
     <div>IP Type: V4, Range: 192.168.1.1 ~ 192.168.1.254</div>
     <div>Port Type: TCP, UDP, Range: 1 ~ 1024</div>
   </p-header>
-  Body Content
+  <h3 class="first">Document</h3>
+  <p-blockUI [blocked]="blockedDocument"></p-blockUI>
+
+  <button type="button" pButton label="Block" (click)="blockDocument()"></button>
+
+  <h3>Panel</h3>
+  <button type="button" pButton label="Block" (click)="blockedPanel=true"></button>
+  <button type="button" pButton label="Unblock" (click)="blockedPanel=false"></button>
+
+  <p-blockUI [target]="pnl" [blocked]="blockedPanel">
+    <i class="fa fa-lock fa-5x" style="position:absolute;top:25%;left:50%"></i>
+  </p-blockUI>
+  <p-panel #pnl header="Godfather I" [style]="{'margin-top':'20px'}">
+    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
+    son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
+    life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good
+    of the family.
+  </p-panel>
   <p-footer>
     Footer content here
   </p-footer>
-</p-dropdownPanel>
+</of-p-dropdownPanel>

src/commons/component/scanner-setting-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-scanner-setting-dropdown',
@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./scanner-setting-dropdown.component.scss'],
 })
 export class ScannerSettingDropdownComponent {
+  @Input() blockTarget: any;
 
   constructor(
   ) {