overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-04-17 20:43:37 +09:00
parent e3013e95a6
commit fafee4071e
13 changed files with 159 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/targets/targets-page.component.html
View File

@ -1,9 +1,7 @@
<div class="ui-fluid"> <div class="ui-fluid">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<div class="card no-margin"> <of-target-list></of-target-list>
<of-target-list></of-target-list>
</div>
</div> </div>
</div> </div>
</div> </div>

87
src/packages/discovery/component/setting/setting.component.html
View File

@ -22,74 +22,79 @@
<span class="ui-float-label"> <span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP"> <input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP">
<label for="float-input">Start Ip</label> <label for="float-input">Start Ip</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-4">
<span class="ui-float-label"> <span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP"> <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP">
<label for="float-input">End Ip</label> <label for="float-input">End Ip</label>
</span> </span>
</div> </div>
</div>
</div>
<div class="ui-g" style="width:250px;margin-bottom:10px"> <div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"> <div class="ui-g-12">
<p-checkbox name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox> <p-checkbox name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox>
</div>
TCP &nbsp;
<p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
UDP &nbsp;
<p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch>
</div> </div>
<div class="ui-g-12">
<div class="ui-g form-group"> <div class="ui-g-4">
<div class="ui-g-12 ui-md-4"> TCP &nbsp;
<span class="ui-float-label"> <p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startPort">
<label for="float-input">Start Port</label>
</span>
</div> </div>
<div class="ui-g-4">
<div class="ui-g-12 ui-md-4"> UDP &nbsp;
<span class="ui-float-label"> <p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch>
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort">
<label for="float-input">End Port</label>
</span>
</div> </div>
</div> </div>
</div>
<!-- <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name"> <div class="ui-g form-group">
<p-header> <div class="ui-g-12 ui-md-4">
<i class="fa fa-car"></i> <span class="ui-float-label">
Cars <input id="float-input" type="text" size="30" pInputText [(ngModel)]="startPort">
</p-header> <label for="float-input">Start Port</label>
</p-listbox> --> </span>
<div> </div>
<div class="ui-g-12">
<p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
</div>
<div class="ui-g-12 ui-md-4">
<span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort">
<label for="float-input">End Port</label>
</span>
</div>
</div>
<!-- <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name">
<p-header>
<i class="fa fa-car"></i>
Cars
</p-header>
</p-listbox> -->
<div class="ui-g-12">
<div class="ui-g-12">
<p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
</div>
<div class="ui-g-12">
<p-pickList [source]="serviceItems" [target]="includeServices" sourceHeader="Available" targetHeader="Selected" [responsive]="true" <p-pickList [source]="serviceItems" [target]="includeServices" sourceHeader="Available" targetHeader="Selected" [responsive]="true"
filterBy="brand" dragdrop="true" dragdropScope="services" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand" filterBy="brand" dragdrop="true" dragdropScope="services" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand"
[sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}"> [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" class="ui-picklist-buttons-unvisible">
<ng-template let-service pTemplate="item"> <ng-template let-service pTemplate="item">
<div class="ui-helper-clearfix"> <div class="ui-helper-clearfix">
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{service.name}}</div> <div style="font-size:14px;float:right;margin:0;padding: 0;">{{service.name}}</div>
</div> </div>
</ng-template> </ng-template>
</p-pickList> </p-pickList>
</div> </div>
</div>
</div> </div>
<p-footer> <p-footer>
<button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary" (click)="closeDialog()"></button> <div dir="rtl">
<button pButton type="button" label="Start" icon="fa-check" (click)="discovery()"></button> <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="closeDialog()"></button>
<button pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit" (click)="discovery()"></button>
</div>
</p-footer> </p-footer>
</p-card> </p-card>

10
src/packages/infra/component/map/map.component.html
View File

@ -5,12 +5,12 @@
</p-dialog> </p-dialog>
<div class="ui-g-12 ui-g-nopad"> <div class="ui-g-12 ui-g-nopad">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-6 ui-g-nopad" style="padding-bottom:10px;"> <div class="ui-g-6 ui-g-nopad ui-bottom-space-10">
<button pButton type="button" class="ui-button-large" icon="ui-icon-play-arrow" label="Discovery" style="width:auto" (click)="showDialog()"></button> <button pButton type="button" class="ui-button-large ui-button-width-fit" icon="ui-icon-play-arrow" label="Discovery" (click)="showDialog()"></button>
</div> </div>
<div class="ui-g-6 ui-g-nopad ui-rtl" dir="rtl"> <div class="ui-g-6 ui-g-nopad" dir="rtl">
<button pButton type="button" class="ui-button-secondary" label="Expand all" style="width:auto; margin-top: 16px;" (click)="expandAll()"></button> <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;" (click)="expandAll()"></button>
<button pButton type="button" class="ui-button-secondary" label="Collapse all" style="width:auto;" (click)="collapseAll()"></button> <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;" (click)="collapseAll()"></button>
</div> </div>
</div> </div>
</div> </div>

18
src/packages/noauth/component/list/list.component.html
View File

@ -3,9 +3,9 @@
<ng-template pTemplate="header" let-columns> <ng-template pTemplate="header" let-columns>
<tr> <tr>
<th style="width: 3.25em" pResizableColumn></th> <th style="width: 3.25em" pResizableColumn></th>
<th>Probe Key</th> <th style="width: 20em">Probe Key</th>
<th>Description</th> <th>Description</th>
<th>Created at</th> <th style="width: 7em">Created at</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-probe> <ng-template pTemplate="body" let-probe>
@ -14,19 +14,15 @@
<p-tableRadioButton [value]="probe"></p-tableRadioButton> <p-tableRadioButton [value]="probe"></p-tableRadioButton>
</td> </td>
<td>{{probe.tempProbeKey}}</td> <td>{{probe.tempProbeKey}}</td>
<td>{{probe.description}}</td> <td style="overflow: auto;">{{probe.description}}</td>
<td>{{probe.createDate | date: 'dd/MM/yyyy'}}</td> <td>{{probe.createDate | date: 'dd/MM/yyyy'}}</td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="footer" let-columns>
<tr>
<td colspan="4">
<button [disabled]="!selected" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true)"></button>
<button [disabled]="!selected" class="ui-button-danger" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false)"></button>
</td>
</tr>
</ng-template>
</p-table> </p-table>
<div class="ui-top-space-10" dir="rtl">
<button [disabled]="!selected" class="ui-button-danger ui-button-width-fit" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false)"></button>
<button [disabled]="!selected" class=" ui-button-width-fit" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true)"></button>
</div>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog> <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
<p-growl [(value)]="msgs"></p-growl> <p-growl [(value)]="msgs"></p-growl>

21
src/packages/probe/component/detail/detail.component.html
View File

@ -1,44 +1,45 @@
<h1>Info</h1>
<div *ngIf="probe"> <div *ngIf="probe">
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.displayName}}"> <input type="text" pInputText readonly value="{{probe.displayName}}">
<label>Alias</label> <label>Alias</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.cidr}}"> <input type="text" pInputText readonly value="{{probe.cidr}}">
<label>CIDR</label> <label>CIDR</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.description}}"> <input type="text" pInputText readonly value="{{probe.description}}">
<label>Description</label> <label>Description</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.probeKey}}"> <input type="text" pInputText readonly value="{{probe.probeKey}}">
<label>Key</label> <label>Key</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.authorizeDate | date: 'dd/MM/yyyy'}}"> <input type="text" pInputText readonly value="{{probe.authorizeDate | date: 'dd/MM/yyyy'}}">
<label>Authrozied at</label> <label>Authrozied at</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-6 ui-lg-4">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText readonly value="{{probe.authorizeMember.name}}"> <input type="text" pInputText readonly value="{{probe.authorizeMember.name}}">
<label>Authrozied by</label> <label>Authrozied by</label>
</span> </span>
</div> </div>
</div> </div>
<div> <div class="ui-bottom-space-10" dir="rtl">
<button type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button> <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>
<button class="ui-button-danger" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button> <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
</div> </div>
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>

10
src/packages/probe/component/list/list.component.html
View File

@ -3,12 +3,12 @@
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Probe Name</th> <th>Probe Name</th>
<th>IP</th> <th style="width:10em">IP</th>
<th>OS</th> <th style="width:8em">OS</th>
<th>CIDR</th> <th style="width:10em">CIDR</th>
<th pResizableColumn>Targets</th> <th pResizableColumn>Targets</th>
<th>Authroized at</th> <th style="width:8em">Authroized at</th>
<th>Authroized by</th> <th style="width:9em">Authroized by</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="body" let-probe> <ng-template pTemplate="body" let-probe>

4
src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
View File

@ -1,5 +1,5 @@
<p-panel> <p-panel [showHeader]="false">
<div *ngIf="crawler; else info" class="ui-g" style="height: 180px; overflow: auto"> <div *ngIf="crawler; else info" class="ui-g ui-width-100-" style="height: 180px; overflow: auto">
<div class="ui-g-12" *ngFor="let item of inputItems"> <div class="ui-g-12" *ngFor="let item of inputItems">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="name" type="text" pInputText /> <input id="name" type="text" pInputText />

6
src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
View File

@ -1,16 +1,16 @@
<div *ngIf="target; else info"> <div *ngIf="target; else info" class="ui-width-100-">
<p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="name" <p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="name"
(onSelectionChange)="onSelectionChange($event)"> (onSelectionChange)="onSelectionChange($event)">
<ng-template let-crawler pTemplate="item"> <ng-template let-crawler pTemplate="item">
<div class="ui-helper-clearfix"> <div class="ui-helper-clearfix">
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{crawler.name}}</div> <div style="font-size:14px;float:right;margin:0">{{crawler.name}}</div>
</div> </div>
</ng-template> </ng-template>
</p-orderList> </p-orderList>
</div> </div>
<ng-template #info> <ng-template #info>
<p-panel> <p-panel [showHeader]="false">
<div>개발자의 배려가 돋보이는 친절한 안내 메시지</div> <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
</p-panel> </p-panel>
</ng-template> </ng-template>

4
src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
View File

@ -1,5 +1,5 @@
<p-panel> <p-panel [showHeader]="false">
<div *ngIf="crawler && target; else info" class="ui-g" style="height: 200px; overflow: auto"> <div *ngIf="crawler && target; else info" class="ui-g ui-width-100- ui-no-border" style="height: 200px; overflow: auto">
<p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)" <p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)"
(onNodeUnselect)="onNodeUnselect($event)"></p-tree> (onNodeUnselect)="onNodeUnselect($event)"></p-tree>
</div> </div>

2
src/packages/sensor/component/setting/setting-etc/setting-etc.component.html
View File

@ -1,3 +1,3 @@
<div> <div style="height: 70%;">
page 2222222 page 2222222
</div> </div>

19
src/packages/sensor/component/setting/setting.component.html
View File

@ -1,15 +1,16 @@
<h1>Add Sensor</h1>
<div *ngIf="page === 1; else etc"> <div *ngIf="page === 1; else etc">
<p-accordion [multiple]="false" [activeIndex]="step" (onOpen)="onTabOpen($event)"> <p-accordion [multiple]="false" [activeIndex]="step" (onOpen)="onTabOpen($event)">
<p-accordionTab header="{{getTitle(0)}}" [disabled]="preTarget"> <p-accordionTab header="{{getTitle(0)}}" [disabled]="preTarget" class="ui-nopad">
<of-target-selector [visible]="visible" [preTarget]="preTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector> <of-target-selector [visible]="visible" [preTarget]="preTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector>
</p-accordionTab> </p-accordionTab>
<p-accordionTab header="{{getTitle(1)}}"> <p-accordionTab header="{{getTitle(1)}}" class="ui-nopad">
<of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector> <of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector>
</p-accordionTab> </p-accordionTab>
<p-accordionTab header="{{getTitle(2)}}"> <p-accordionTab header="{{getTitle(2)}}" class="ui-nopad">
<of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth> <of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth>
</p-accordionTab> </p-accordionTab>
<p-accordionTab header="{{getTitle(3)}}"> <p-accordionTab header="{{getTitle(3)}}" class="ui-nopad">
<of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector> <of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector>
</p-accordionTab> </p-accordionTab>
</p-accordion> </p-accordion>
@ -19,12 +20,12 @@
<of-sensor-setting-etc></of-sensor-setting-etc> <of-sensor-setting-etc></of-sensor-setting-etc>
</ng-template> </ng-template>
<div> <div class="ui-top-space-10" dir="rtl">
<button pButton *ngIf="page === 1" class="ui-button-danger" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button> <button pButton *ngIf="page === 1" class=" ui-button-width-fit" [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button>
<button pButton *ngIf="page === 2" class="ui-button-danger" type="button" label="Prev" icon="ui-icon-close" (click)="onPrev()"></button> <button pButton *ngIf="page === 2" class=" ui-button-width-fit" type="button" label="Done" icon="fa-check" (click)="onDone()"></button>
<button pButton *ngIf="page === 1" [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button> <button pButton *ngIf="page === 1" class="ui-button-danger ui-button-width-fit" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button>
<button pButton *ngIf="page === 2" type="button" label="Done" icon="fa-check" (click)="onDone()"></button> <button pButton *ngIf="page === 2" class="ui-button-danger ui-button-width-fit" type="button" label="Prev" icon="ui-icon-close" (click)="onPrev()"></button>
</div> </div>

5
src/packages/sensor/component/setting/target-selector/target-selector.component.html
View File

@ -1,5 +1,6 @@
<div *ngIf="preTarget === null"> <div *ngIf="preTarget === null" class="ui-width-100-">
<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="displayName" (onSelectionChange)="onSelectionChange($event)"> <p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="displayName"
(onSelectionChange)="onSelectionChange($event)">
<ng-template let-target pTemplate="item"> <ng-template let-target pTemplate="item">
<div class="ui-helper-clearfix"> <div class="ui-helper-clearfix">
<img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" /> <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" />

61
src/styles.scss
View File

@ -19,8 +19,14 @@
} }
} }
.ui-button-secondary{
background-color : #f5f6f8 !important;
.ui-button-icon-left{
color: #5e6166 !important;
}
}
.ui-button-secondary:hover{ .ui-button-secondary:hover{
color : white !important; color : #5e6166 !important;
} }
.ui-button-large { .ui-button-large {
@ -31,3 +37,56 @@
display: none !important; display: none !important;
visibility: hidden; visibility: hidden;
} }
.ui-picklist-buttons-unvisible{
.ng-star-inserted.ui-picklist-buttons{
visibility:hidden !important;
}
}
.ui-bottom-space-10{
margin-bottom: 10px;
}
.ui-top-space-10{
margin-top: 10px;
}
.ui-float-right{
float:right;
}
.ui-button-width-fit{
width: auto !important;
}
.ui-nopad{
padding: 0px !important;
.ui-accordion-content{
padding: 0px !important;
border: 0px !important;
}
}
.ui-width-100-{
.ui-orderlist-list-container{
width : 100% !important;
}
}
.ui-no-border{
border: 0px !important;
.ui-tree{
border : 0px !important;
}
}
.ui-s-button{
.ui-button-text {
padding: 2px !important;
.ui-button-text-icon-left {
padding: 2px 12px 2px 4px !important;
}
.ui-button-text-icon-right {
padding: 2px 4px 2px 12px !important;
}
}
font-size: 0.8em !important;
}