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-06-22 19:18:20 +09:00
parent 97b7d34177
commit bc094bd381
6 changed files with 116 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
@overflow/discovery/component/request-summary.component.html
View File

@ -9,8 +9,20 @@
<span *ngIf="discoverZone.discoverHost.discoverPort.includeUDP">UDP</span> <span *ngIf="discoverZone.discoverHost.discoverPort.includeUDP">UDP</span>
</span> </span>
</div> </div>
<div *ngIf="services && services.length > 0" class="of-key-value-div">
<p-overlayPanel #op>
<div *ngFor="let service of services">
{{service}}
</div>
</p-overlayPanel>
<span>Services</span>
<span class="ng-star-inserted ui-nopad">
<a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a>
</span>
</div>
<!--
<div *ngIf="services && services.length > 0" class="ui-g-12 ui-top-border-1" style="text-align: right"> <div *ngIf="services && services.length > 0" class="ui-g-12 ui-top-border-1" style="text-align: right">
<p-overlayPanel #op> <p-overlayPanel #op>
<div *ngFor="let service of services"> <div *ngFor="let service of services">
@ -20,5 +32,6 @@
<a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a> <a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a>
</div> </div>
-->
</div> </div>
</div> </div>

78
@overflow/discovery/component/search-result.component.html
View File

@ -1,53 +1,55 @@
<of-block-progressbar [target]="content" [pending]="!finished"></of-block-progressbar> <of-block-progressbar [target]="content" [pending]="!finished"></of-block-progressbar>
<p-panel #content [showHeader]="false" class="block-panel"> <div class="ui-discovery">
<p-panel #content [showHeader]="false" class="block-panel">
<p-messages [(value)]="msgs"></p-messages> <p-messages [(value)]="msgs"></p-messages>
<p-tree [value]="zoneNode" layout="vertical"> <p-tree [value]="zoneNode" layout="vertical">
<!-- ZONE node template --> <!-- ZONE node template -->
<ng-template let-node pTemplate="ZONE"> <ng-template let-node pTemplate="ZONE">
<div> <div>
{{node.label}} {{node.label}}
</div>
</ng-template>
<!-- HOST node template -->
<ng-template let-node pTemplate="HOST">
<div @discoveryResultAnim>
<div *ngIf="checkHighlight(node.label, 0) else unhighlightHost">
<p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check"
offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
</div> </div>
</ng-template>
<ng-template #unhighlightHost> <!-- HOST node template -->
<p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" <ng-template let-node pTemplate="HOST">
offIcon="fa-square" [style]="{'width':'200px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> <div @discoveryResultAnim>
</ng-template> <div *ngIf="checkHighlight(node.label, 0) else unhighlightHost">
</div> <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check"
</ng-template> offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
</div>
<!-- SERVICE node template --> <ng-template #unhighlightHost>
<ng-template let-node pTemplate="SERVICE"> <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check"
<div @discoveryResultAnim> offIcon="fa-square" [style]="{'width':'200px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
<div *ngIf="checkHighlight(node.data.name, 1) else unhighlightServ"> </ng-template>
<p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
</div> </div>
</ng-template>
<ng-template #unhighlightServ> <!-- SERVICE node template -->
<p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}" <ng-template let-node pTemplate="SERVICE">
onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton> <div @discoveryResultAnim>
</ng-template> <div *ngIf="checkHighlight(node.data.name, 1) else unhighlightServ">
<p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
</div>
</div> <ng-template #unhighlightServ>
</ng-template> <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
</p-tree> onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
</ng-template>
<button class="ui-button-width-fit ui-float-right ui-top-space-10" [disabled]="selectedItems.length === 0" type="button" </div>
label="Save" icon="ui-icon-close" pButton (click)="saveTargets()"></button> </ng-template>
</p-tree>
</p-panel> <button class="ui-button-width-fit ui-float-right ui-top-space-10" [disabled]="selectedItems.length === 0" type="button"
label="Save" icon="ui-icon-close" pButton (click)="saveTargets()"></button>
</p-panel>
</div>
<p-dialog header="Title" [(visible)]="targetSaved" [modal]="true" [responsive]="true" [width]="600" [minWidth]="200" [minY]="70" <p-dialog header="Title" [(visible)]="targetSaved" [modal]="true" [responsive]="true" [width]="600" [minWidth]="200" [minY]="70"

2
@overflow/discovery/component/service-selector.component.html
View File

@ -10,7 +10,7 @@
</div> </div>
<p-table selectionMode="multiple" [scrollable]="true" scrollHeight="200px" [value]="metaCrawlers" [(selection)]="includeServices" <p-table selectionMode="multiple" [scrollable]="true" scrollHeight="200px" [value]="metaCrawlers" [(selection)]="includeServices"
dataKey="id" (onRowSelect)="onSelect($event.data)" (onRowUnselect)="onUnselect($event.data)"> dataKey="id" (onRowSelect)="onSelect($event.data)" (onRowUnselect)="onUnselect($event.data)" class="ui-unbg-table">
<ng-template pTemplate="body" let-rowData let-columns="columns"> <ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData"> <tr [pSelectableRow]="rowData">
<!-- <td> <!-- <td>

50
@overflow/noauth-probe/component/noauth-probe-general.component.html
View File

@ -1,36 +1,34 @@
<div class="ui-g"> <div class="ui-g ui-bottom-space-10">
<div class="ui-g-6 ui-nopad"> <div class="ui-g-6 ui-nopad">
<h3>General</h3> <h3>General</h3>
</div> </div>
<!-- info --> <!-- info -->
<div class="ui-g ui-bottom-space-10"> <div class="ui-g-12 ui-nopad">
<div class="ui-g-12 ui-nopad"> <p-panel [showHeader]="false">
<p-panel [showHeader]="false"> <div *ngIf="noAuthProbe">
<div *ngIf="noAuthProbe"> <div class="ui-g">
<div class="ui-g"> <div class="ui-g-12 ui-md-6 ui-key-value">
<div class="ui-g-12 ui-md-6 ui-key-value"> <of-key-value [key]="'API Key'" [value]="noAuthProbe.apiKey"></of-key-value>
<of-key-value [key]="'API Key'" [value]="noAuthProbe.apiKey"></of-key-value> </div>
</div> <div class="ui-g-12 ui-md-6 ui-key-value">
<div class="ui-g-12 ui-md-6 ui-key-value"> <of-key-value [key]="'Created at'" [value]="noAuthProbe.createDate | date: 'dd/MM/yyyy'"></of-key-value>
<of-key-value [key]="'Created at'" [value]="noAuthProbe.createDate | date: 'dd/MM/yyyy'"></of-key-value> </div>
</div> <div class="ui-g-12 ui-md-6 ui-key-value">
<div class="ui-g-12 ui-md-6 ui-key-value"> <ng-container [ngSwitch]="noAuthProbe.connectDate">
<ng-container [ngSwitch]="noAuthProbe.connectDate"> <ng-container *ngSwitchCase="undefined">
<ng-container *ngSwitchCase="undefined"> <of-key-value [key]="'Connection'" [value]="'Not connected.'"></of-key-value>
<of-key-value [key]="'Connection'" [value]="'Not connected.'"></of-key-value>
</ng-container>
<ng-container *ngSwitchDefault>
<of-key-value [key]="'Connection'" [value]="noAuthProbe.connectAddress"></of-key-value>
</ng-container>
</ng-container> </ng-container>
</div> <ng-container *ngSwitchDefault>
<div class="ui-g-12 ui-md-6 ui-key-value"> <of-key-value [key]="'Connection'" [value]="noAuthProbe.connectAddress"></of-key-value>
<of-key-value [key]="'Uptime'" [value]="'TODO'"></of-key-value> </ng-container>
</div> </ng-container>
</div>
<div class="ui-g-12 ui-md-6 ui-key-value">
<of-key-value [key]="'Uptime'" [value]="'TODO'"></of-key-value>
</div> </div>
</div> </div>
</p-panel> </div>
</div> </p-panel>
</div> </div>
</div> </div>

4
@overflow/probe/component/probe-host.component.html
View File

@ -3,7 +3,7 @@
<p-panel #content [showHeader]="false" class="block-panel"> <p-panel #content [showHeader]="false" class="block-panel">
<div class="ui-g"> <div class="ui-g ui-bottom-space-10">
<div class="ui-g-6 ui-nopad"> <div class="ui-g-6 ui-nopad">
<h3>Host</h3> <h3>Host</h3>
</div> </div>
@ -13,7 +13,7 @@
</div> </div>
<!-- Host info --> <!-- Host info -->
<div class="ui-g ui-bottom-space-10"> <div class="ui-g">
<div class="ui-g-12 ui-nopad"> <div class="ui-g-12 ui-nopad">
<p-panel [showHeader]="false"> <p-panel [showHeader]="false">
<div *ngIf="infraHost"> <div *ngIf="infraHost">

35
src/styles.scss
View File

@ -1903,3 +1903,38 @@ body .ui-progressbar .ui-progressbar-value {
.ui-confirmdialog-message { .ui-confirmdialog-message {
white-space: pre-line; white-space: pre-line;
} }
.ui-unbg-table{
.ui-table .ui-table-tbody > tr:nth-child(odd) .ui-state-active, .ui-state-highlight {
background-color: #f4f4f4 !important;
color: #203976 !important;
font-weight: bold;
.fa {
color: #ffffff;
}
}
.ui-table .ui-table-tbody > tr:nth-child(odd) .ui-state-active, .ui-state-highlight .ui-chkbox .ui-chkbox-box.ui-state-active {
border-color: #3e464c!important;
background-color: #3e464c!important;
}
.ui-table .ui-table-tbody > tr:nth-child .ui-state-active, .ui-state-highlight {
background-color: #ffffff !important;
color: #203976 !important;
.fa {
color: #ffffff;
}
}
}
//ui-togglebutton
body .ui-discovery .ui-button, .ui-togglebutton {
background-color: #f1f1f1 !important;
border: 1px solid #bdbdbd !important;
color: #212121 !important;
}
body .ui-discovery .ui-button, .ui-togglebutton:not(.ui-state-active):not(.ui-state-disabled):hover {
background-color: #e2e2e2 !important; }
body .ui-discovery .ui-button, .ui-togglebutton.ui-state-active {
background-color: #5180ce !important;
color: #ffffff !important; }