ing

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

@@ -2,6 +2,10 @@ import {
   MenuBarComponent,
 } from './menu';
 
+import {
+  DropdownPanelComponent,
+} from './primeng';
+
 import {
   ToolbarComponent,
 } from './toolbar';
@@ -12,6 +16,7 @@ import {
 } from './window';
 
 export const COMPONENTS = [
+  DropdownPanelComponent,
   MenuBarComponent,
   ToolbarComponent,
   TitleBarComponent,

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

@@ -0,0 +1,18 @@
+<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)">
+    <ng-content select="p-header"></ng-content>
+  </div>
+</div>
+
+<div #container [ngClass]="{'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">
+      <ng-content></ng-content>
+    </div>
+    <div class="ui-dropdownpanel-footer" *ngIf="footerFacet">
+      <ng-content select="p-footer"></ng-content>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+.ui-dropdownpanel {
+  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-footer {
+    padding-top: 1em;
+  }
+}

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

@@ -0,0 +1,185 @@
+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';
+
+@Component({
+  selector: '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;
+
+  @Input() style: any;
+
+  @Input() styleClass: string;
+
+  @Input() dropdownStyle: any;
+
+  @Input() dropdownStyleClass: string;
+
+  @Input() appendTo: any;
+
+  @Input() autoZIndex = true;
+
+  @Input() baseZIndex = 0;
+
+  @ViewChild('container') containerViewChild: ElementRef;
+
+  @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();
+    }
+  }
+
+}

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

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

@overflow/commons/ui/component/toolbar/toolbar.component.html

@@ -1,51 +1,3 @@
 <div id="app-toolbar" class="toolbar">
-  <div class="sidebar-section" style="width: 250px;">
+  <ng-content></ng-content>
-    <div class="toolbar-dropdown closed" aria-expanded="false">
-      <div class="toolbar-button" title="C:\Users\crusader\Documents\GitHub\gateway">
-        <button class="button-component" type="button">
-          <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16">
-            <path d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
-          </svg>
-          <div class="text">
-            <div class="description">Current repository</div>
-            <div class="title">gateway</div>
-          </div>
-          <svg aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16">
-            <path d="M0 5l6 6 6-6z"></path>
-          </svg>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div class="toolbar-dropdown closed branch-button" aria-expanded="false">
-    <div class="toolbar-button" title="Current branch is master">
-      <button class="button-component" type="button">
-        <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16">
-          <path d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
-        </svg>
-        <div class="text">
-          <div class="description">Current branch</div>
-          <div class="title">master</div>
-        </div>
-        <svg aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16">
-          <path d="M0 5l6 6 6-6z"></path>
-        </svg>
-      </button>
-    </div>
-  </div>
-  <div class="toolbar-button push-pull-button">
-    <button class="button-component" type="button">
-      <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 12 16">
-        <path d="M10.24 7.4a4.15 4.15 0 0 1-1.2 3.6 4.346 4.346 0 0 1-5.41.54L4.8 10.4.5 9.8l.6 4.2 1.31-1.26c2.36 1.74 5.7 1.57 7.84-.54a5.876 5.876 0 0 0 1.74-4.46l-1.75-.34zM2.96 5a4.346 4.346 0 0 1 5.41-.54L7.2 5.6l4.3.6-.6-4.2-1.31 1.26c-2.36-1.74-5.7-1.57-7.85.54C.5 5.03-.06 6.65.01 8.26l1.75.35A4.17 4.17 0 0 1 2.96 5z"></path>
-      </svg>
-      <div class="text">
-        <div class="title">Fetch origin</div>
-        <div class="description">
-          <span>Last fetched
-            <span title="Tuesday, August 14, 2018 10:06 PM">a day ago</span>
-          </span>
-        </div>
-      </div>
-    </button>
-  </div>
 </div>

src/app/pages/pages.component.html

@@ -1,2 +1,55 @@
-<app-toolbar></app-toolbar>
+<app-toolbar>
+  <app-nic-dropdown></app-nic-dropdown>
+  <app-scanner-setting-dropdown></app-scanner-setting-dropdown>
+
+  <div class="sidebar-section" style="width: 250px;">
+    <div class="toolbar-dropdown closed" aria-expanded="false">
+      <div class="toolbar-button" title="C:\Users\crusader\Documents\GitHub\gateway">
+        <button class="button-component" type="button">
+          <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16">
+            <path d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
+          </svg>
+          <div class="text">
+            <div class="description">Current repository</div>
+            <div class="title">gateway</div>
+          </div>
+          <svg aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16">
+            <path d="M0 5l6 6 6-6z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="toolbar-dropdown closed branch-button" aria-expanded="false">
+    <div class="toolbar-button" title="Current branch is master">
+      <button class="button-component" type="button">
+        <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16">
+          <path d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
+        </svg>
+        <div class="text">
+          <div class="description">Current branch</div>
+          <div class="title">master</div>
+        </div>
+        <svg aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16">
+          <path d="M0 5l6 6 6-6z"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div class="toolbar-button push-pull-button">
+    <button class="button-component" type="button">
+      <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 12 16">
+        <path d="M10.24 7.4a4.15 4.15 0 0 1-1.2 3.6 4.346 4.346 0 0 1-5.41.54L4.8 10.4.5 9.8l.6 4.2 1.31-1.26c2.36 1.74 5.7 1.57 7.84-.54a5.876 5.876 0 0 0 1.74-4.46l-1.75-.34zM2.96 5a4.346 4.346 0 0 1 5.41-.54L7.2 5.6l4.3.6-.6-4.2-1.31 1.26c-2.36-1.74-5.7-1.57-7.85.54C.5 5.03-.06 6.65.01 8.26l1.75.35A4.17 4.17 0 0 1 2.96 5z"></path>
+      </svg>
+      <div class="text">
+        <div class="title">Fetch origin</div>
+        <div class="description">
+          <span>Last fetched
+            <span title="Tuesday, August 14, 2018 10:06 PM">a day ago</span>
+          </span>
+        </div>
+      </div>
+    </button>
+  </div>
+</app-toolbar>
 <router-outlet #o="outlet"></router-outlet>

src/app/pages/pages.module.ts

@@ -3,6 +3,8 @@ import { CommonModule, LocationStrategy, HashLocationStrategy } from '@angular/c
 
 import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
 
+import { CommonsModule } from '../../commons/commons.module';
+
 import { PagesComponent } from './pages.component';
 import { PagesRoutingModule } from './pages-routing.module';
 
@@ -12,6 +14,7 @@ import { PagesRoutingModule } from './pages-routing.module';
     PagesRoutingModule,
 
     CommonsUIModule,
+    CommonsModule,
   ],
   declarations: [
     PagesComponent,

src/commons/commons.module.ts

@@ -1,14 +1,23 @@
 import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
 
+
+import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 
 @NgModule({
   imports: [
     CommonModule,
+
+    CommonsUIModule,
+  ],
+  exports: [
+    ...COMPONENTS,
   ],
   declarations: [
+    ...COMPONENTS,
   ],
   providers: [
     ...SERVICES,

src/commons/component/index.ts

@@ -0,0 +1,7 @@
+import { NicDropdownComponent } from './nic-dropdown.component';
+import { ScannerSettingDropdownComponent } from './scanner-setting-dropdown.component';
+
+export const COMPONENTS = [
+  NicDropdownComponent,
+  ScannerSettingDropdownComponent,
+];

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

@@ -0,0 +1,11 @@
+<p-dropdownPanel [style]="{'width':'300px'}" [dropdownStyle]="{'width':'500px', 'height':'500px'}">
+  <p-header>
+    192.168.1.0/24
+  </p-header>
+
+  <div>Body Content</div>
+
+  <p-footer>
+    Footer content here
+  </p-footer>
+</p-dropdownPanel>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-nic-dropdown',
+  templateUrl: './nic-dropdown.component.html',
+  styleUrls: ['./nic-dropdown.component.scss'],
+})
+export class NicDropdownComponent {
+
+  constructor(
+  ) {
+
+  }
+}

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

@@ -0,0 +1,10 @@
+<p-dropdownPanel [style]="{'width':'300px'}" [dropdownStyle]="{'width':'500px', 'height':'500px'}">
+  <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
+  <p-footer>
+    Footer content here
+  </p-footer>
+</p-dropdownPanel>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-scanner-setting-dropdown',
+  templateUrl: './scanner-setting-dropdown.component.html',
+  styleUrls: ['./scanner-setting-dropdown.component.scss'],
+})
+export class ScannerSettingDropdownComponent {
+
+  constructor(
+  ) {
+
+  }
+}