diff --git a/@overflow/commons/ui/component/index.ts b/@overflow/commons/ui/component/index.ts index c1b181c..a610d18 100644 --- a/@overflow/commons/ui/component/index.ts +++ b/@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, diff --git a/@overflow/commons/ui/component/primeng/dropdown-panel.component.html b/@overflow/commons/ui/component/primeng/dropdown-panel.component.html new file mode 100644 index 0000000..48390e6 --- /dev/null +++ b/@overflow/commons/ui/component/primeng/dropdown-panel.component.html @@ -0,0 +1,18 @@ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/@overflow/commons/ui/component/primeng/dropdown-panel.component.scss b/@overflow/commons/ui/component/primeng/dropdown-panel.component.scss new file mode 100644 index 0000000..5331137 --- /dev/null +++ b/@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; + } +} diff --git a/@overflow/commons/ui/component/primeng/dropdown-panel.component.ts b/@overflow/commons/ui/component/primeng/dropdown-panel.component.ts new file mode 100644 index 0000000..244b786 --- /dev/null +++ b/@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(); + } + } + +} diff --git a/@overflow/commons/ui/component/primeng/index.ts b/@overflow/commons/ui/component/primeng/index.ts new file mode 100644 index 0000000..d72b5de --- /dev/null +++ b/@overflow/commons/ui/component/primeng/index.ts @@ -0,0 +1 @@ +export { DropdownPanelComponent } from './dropdown-panel.component'; diff --git a/@overflow/commons/ui/component/toolbar/toolbar.component.html b/@overflow/commons/ui/component/toolbar/toolbar.component.html index 1fff1d2..c41530e 100644 --- a/@overflow/commons/ui/component/toolbar/toolbar.component.html +++ b/@overflow/commons/ui/component/toolbar/toolbar.component.html @@ -1,51 +1,3 @@
-
- -
- -
- -
+
\ No newline at end of file diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index cfcd28f..33d27f3 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1,2 +1,55 @@ - + + + + +
+ +
+ +
+ +
+ \ No newline at end of file diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 54d6c02..a4cdfcb 100644 --- a/src/app/pages/pages.module.ts +++ b/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, diff --git a/src/commons/commons.module.ts b/src/commons/commons.module.ts index f2f0d9a..db2701e 100644 --- a/src/commons/commons.module.ts +++ b/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, diff --git a/src/commons/component/index.ts b/src/commons/component/index.ts new file mode 100644 index 0000000..953e13e --- /dev/null +++ b/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, +]; diff --git a/src/commons/component/nic-dropdown.component.html b/src/commons/component/nic-dropdown.component.html new file mode 100644 index 0000000..cab24b7 --- /dev/null +++ b/src/commons/component/nic-dropdown.component.html @@ -0,0 +1,11 @@ + + + 192.168.1.0/24 + + +
Body Content
+ + + Footer content here + + \ No newline at end of file diff --git a/src/commons/component/nic-dropdown.component.scss b/src/commons/component/nic-dropdown.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/commons/component/nic-dropdown.component.ts b/src/commons/component/nic-dropdown.component.ts new file mode 100644 index 0000000..d23625a --- /dev/null +++ b/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( + ) { + + } +} diff --git a/src/commons/component/scanner-setting-dropdown.component.html b/src/commons/component/scanner-setting-dropdown.component.html new file mode 100644 index 0000000..a742dd9 --- /dev/null +++ b/src/commons/component/scanner-setting-dropdown.component.html @@ -0,0 +1,10 @@ + + +
IP Type: V4, Range: 192.168.1.1 ~ 192.168.1.254
+
Port Type: TCP, UDP, Range: 1 ~ 1024
+ + Body Content + + Footer content here + + \ No newline at end of file diff --git a/src/commons/component/scanner-setting-dropdown.component.scss b/src/commons/component/scanner-setting-dropdown.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/commons/component/scanner-setting-dropdown.component.ts b/src/commons/component/scanner-setting-dropdown.component.ts new file mode 100644 index 0000000..4446a04 --- /dev/null +++ b/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( + ) { + + } +}