diff --git a/@overflow/commons/ui/component/index.ts b/@overflow/commons/ui/component/index.ts index a610d18..c54030d 100644 --- a/@overflow/commons/ui/component/index.ts +++ b/@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, diff --git a/@overflow/commons/ui/component/primeng/dropdown-panel.component.html b/@overflow/commons/ui/component/primeng/dropdown-panel.component.html index 03e7674..dd9f1bd 100644 --- a/@overflow/commons/ui/component/primeng/dropdown-panel.component.html +++ b/@overflow/commons/ui/component/primeng/dropdown-panel.component.html @@ -1,18 +1,12 @@ -
-
- -
+
+
-
-
-
- -
-
- -
+ +
+
-
\ No newline at end of file +
+ +
+ \ 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 index 0a3a9a9..52eb9d3 100644 --- a/@overflow/commons/ui/component/primeng/dropdown-panel.component.scss +++ b/@overflow/commons/ui/component/primeng/dropdown-panel.component.scss @@ -1,24 +1,25 @@ -.ui-dropdownpanel { - width: 100%; - height: 100%; - display: flex; - flex-direction: row; - flex-shrink: 0; - - &-header { +.ui-popuppanel-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; +} \ No newline at end of file diff --git a/@overflow/commons/ui/component/primeng/dropdown-panel.component.ts b/@overflow/commons/ui/component/primeng/dropdown-panel.component.ts index 244b786..05733d8 100644 --- a/@overflow/commons/ui/component/primeng/dropdown-panel.component.ts +++ b/@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() { } } diff --git a/@overflow/commons/ui/component/primeng/index.ts b/@overflow/commons/ui/component/primeng/index.ts index d72b5de..c245be3 100644 --- a/@overflow/commons/ui/component/primeng/index.ts +++ b/@overflow/commons/ui/component/primeng/index.ts @@ -1 +1,2 @@ export { DropdownPanelComponent } from './dropdown-panel.component'; +export { PopupPanelComponent } from './popup-panel.component'; diff --git a/@overflow/commons/ui/component/primeng/popup-panel.component.html b/@overflow/commons/ui/component/primeng/popup-panel.component.html new file mode 100644 index 0000000..2a86172 --- /dev/null +++ b/@overflow/commons/ui/component/primeng/popup-panel.component.html @@ -0,0 +1,8 @@ +
+ +
+ + + \ No newline at end of file diff --git a/@overflow/commons/ui/component/primeng/popup-panel.component.scss b/@overflow/commons/ui/component/primeng/popup-panel.component.scss new file mode 100644 index 0000000..7516a70 --- /dev/null +++ b/@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; +} diff --git a/@overflow/commons/ui/component/primeng/popup-panel.component.ts b/@overflow/commons/ui/component/primeng/popup-panel.component.ts new file mode 100644 index 0000000..31a61e4 --- /dev/null +++ b/@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(); + } + } + +} diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html index 01ecb09..bc93f3f 100644 --- a/src/app/pages/home/home-page.component.html +++ b/src/app/pages/home/home-page.component.html @@ -8,6 +8,26 @@
+ +

Document

+ + + + +

Panel

+ + + + + + + + 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. +
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts index 1c9a09f..f2b4949 100644 --- a/src/app/pages/home/home-page.component.ts +++ b/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); + } } diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 225baea..2903d50 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1,6 +1,6 @@ - - + +
-
- -
\ No newline at end of file + +
+ +
+ \ No newline at end of file diff --git a/src/app/pages/pages.component.scss b/src/app/pages/pages.component.scss index e69de29..c751480 100644 --- a/src/app/pages/pages.component.scss +++ b/src/app/pages/pages.component.scss @@ -0,0 +1,3 @@ +#pages-content { + min-height: 100vh; +} diff --git a/src/commons/component/nic-dropdown.component.html b/src/commons/component/nic-dropdown.component.html index cab24b7..e39a18c 100644 --- a/src/commons/component/nic-dropdown.component.html +++ b/src/commons/component/nic-dropdown.component.html @@ -1,4 +1,4 @@ - + 192.168.1.0/24 @@ -8,4 +8,4 @@ Footer content here - \ No newline at end of file + \ No newline at end of file diff --git a/src/commons/component/nic-dropdown.component.ts b/src/commons/component/nic-dropdown.component.ts index d23625a..0184fe0 100644 --- a/src/commons/component/nic-dropdown.component.ts +++ b/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( ) { diff --git a/src/commons/component/scanner-setting-dropdown.component.html b/src/commons/component/scanner-setting-dropdown.component.html index a742dd9..d90c7a5 100644 --- a/src/commons/component/scanner-setting-dropdown.component.html +++ b/src/commons/component/scanner-setting-dropdown.component.html @@ -1,10 +1,28 @@ - +
IP Type: V4, Range: 192.168.1.1 ~ 192.168.1.254
Port Type: TCP, UDP, Range: 1 ~ 1024
 - Body Content +

Document

+ + + + +

Panel

+ + + + + + + + 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. + Footer content here - \ No newline at end of file + \ No newline at end of file diff --git a/src/commons/component/scanner-setting-dropdown.component.ts b/src/commons/component/scanner-setting-dropdown.component.ts index 4446a04..1fd1158 100644 --- a/src/commons/component/scanner-setting-dropdown.component.ts +++ b/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( ) {