overflow_scanner/app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-09-12 16:24:02 +09:00
parent b9df48a54c
commit 17d142a740
9 changed files with 180 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/commons/component/host-detail.component.html
View File

@ -1,4 +1,4 @@
<div class="ui-g-12 detail-view-box"> <div class="ui-g-12">
<div class="detail-img"> <div class="detail-img">
<!-- <svg width="200" height="200" viewBox="20 40 140 100"> <!-- <svg width="200" height="200" viewBox="20 40 140 100">
@ -7,66 +7,62 @@
<svg width="140" height="140" viewBox="15 35 140 100"> <svg width="140" height="140" viewBox="15 35 140 100">
<image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" /> <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" />
</svg> </svg>
</div>
<div class="detail-content">
<h3>{{host.name}} <span>{{host.address}}</span></h3> <h3>{{host.name}} <span>{{host.address}}</span></h3>
<p-tabView>
<p-tabPanel header="General">
<ul class="key-value">
<li *ngIf="host.address">
IP Address
<span class="meta-value">{{host.address}}</span>
</li>
<li *ngIf="host.deviceType">
Type
<span class="meta-value">{{host.deviceType}}</span>
</li>
<li *ngIf="host.deviceVendor">
Vendor
<span class="meta-value">{{host.deviceVendor}}</span>
</li>
<li *ngIf="host.model">
Model
<span class="meta-value">{{host.model}}</span>
</li>
<li *ngIf="host.osType">
OS
<span class="meta-value">{{host.osType}}</span>
</li>
<li *ngIf="host.mac">
Mac Address
<span class="meta-value">{{host.mac}}</span>
</li>
</ul>
</p-tabPanel>
<p-tabPanel header="Metadata" *ngIf="host.meta">
<ul>
<li *ngFor="let key of host.meta | objectKeys">
{{key | stringPrettify}}
<ul class="key-value">
<li *ngFor="let skey of host.meta[key] | objectKeys">
{{skey | stringPrettify}}
<span class="meta-value">{{host.meta[key][skey]}}</span>
</li>
</ul>
</li>
</ul>
</p-tabPanel>
<p-tabPanel header="Ports" *ngIf="host.portList">
<p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
</p-tabPanel>
</p-tabView>
</div> </div>
<p-tabView class="detail-content">
<p-tabPanel header="General">
<ul class="key-value">
<li *ngIf="host.address">
IP Address
<span class="meta-value">{{host.address}}</span>
</li>
<li *ngIf="host.deviceType">
Type
<span class="meta-value">{{host.deviceType}}</span>
</li>
<li *ngIf="host.deviceVendor">
Vendor
<span class="meta-value">{{host.deviceVendor}}</span>
</li>
<li *ngIf="host.model">
Model
<span class="meta-value">{{host.model}}</span>
</li>
<li *ngIf="host.osType">
OS
<span class="meta-value">{{host.osType}}</span>
</li>
<li *ngIf="host.mac">
Mac Address
<span class="meta-value">{{host.mac}}</span>
</li>
</ul>
</p-tabPanel>
<p-tabPanel header="Metadata" *ngIf="host.meta">
<ul>
<li *ngFor="let key of host.meta | objectKeys">
{{key | stringPrettify}}
<ul class="key-value">
<li *ngFor="let skey of host.meta[key] | objectKeys">
{{skey | stringPrettify}}
<span class="meta-value">{{host.meta[key][skey]}}</span>
</li>
</ul>
</li>
</ul>
</p-tabPanel>
<p-tabPanel header="Ports" *ngIf="host.portList">
<p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
</p-tabPanel>
</p-tabView>

61
src/commons/component/host-detail.component.scss
View File

@ -1,37 +1,38 @@
.detail-view-box { .detail-img {
width: 100%; display: inline;
padding : 10px 160px 0 0; width: 140px;
padding: 10px;
svg{
display: inline;
}
h3{ h3{
padding: 20px 0 20px 5px; display: inline;
padding: 10px 0 10px 5px;
// padding: 5px; // padding: 5px;
// height: 60px; // height: 60px;
// span{
// font-size: 0.7em;
// color: #757575;
// }
} }
.key-value { }
list-style-type: none; .detail-content {
margin: 0; display: inline;
padding: 0; }
box-sizing: border-box;
width: 100%; .key-value {
li { list-style-type: none;
padding: 8px 14px; margin: 0;
border-bottom: 1px solid #d8dae2; padding: 0;
position: relative; box-sizing: border-box;
font-weight: bold; width: 100%;
width: 100%; li {
.meta-value { padding: 8px 14px;
font-weight: 100; border-bottom: 1px solid #d8dae2;
position: relative; position: relative;
width: 70%; font-weight: bold;
left: 10px; width: 100%;
} .meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
} }
} }
} }
.tab-border-bottom .ui-widget-header {
border: 0 !important;
}

16
src/commons/component/nic-dropdown.component.scss
View File

@ -2,9 +2,15 @@
border: 0px; border: 0px;
} }
#nic-list-border .ui-widget-content .ui-listbox .ui-listbox-list { // #nic-list-border.ui-widget-content .ui-listbox .ui-listbox-list {
line-height: 2em; // line-height: 2em;
} // }
#nic-list-border .ui-widget-content .ui-listbox .ui-listbox-item { #nic-list-border.ui-listbox-item {
padding: 0.5em; padding: 1em;
.title{
}
.description {
font-size: 0.8em;
}
} }

34
src/commons/component/node-detail.component.html
View File

@ -1,21 +1,23 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12">
<ng-container [ngSwitch]="node.group"> <ng-container [ngSwitch]="node.group">
<ng-container *ngSwitchCase="'zone'">
<app-zone-detail [zone]="node.target"></app-zone-detail>
</ng-container>
<ng-container *ngSwitchCase="'host'">
<app-host-detail [host]="node.target"></app-host-detail>
</ng-container>
<ng-container *ngSwitchCase="'service'">
<app-service-detail [service]="node.target"></app-service-detail>
</ng-container>
<ng-container *ngSwitchDefault>
</ng-container>
<ng-container *ngSwitchCase="'zone'">
<app-zone-detail [zone]="node.target"></app-zone-detail>
</ng-container> </ng-container>
</div>
<ng-container *ngSwitchCase="'host'">
<app-host-detail [host]="node.target"></app-host-detail>
</ng-container>
<ng-container *ngSwitchCase="'service'">
<app-service-detail [service]="node.target"></app-service-detail>
</ng-container>
<ng-container *ngSwitchDefault>
</ng-container>
</ng-container>
</div> </div>

14
src/commons/component/node-detail.component.scss
View File

@ -1,14 +0,0 @@
.detail-img {
position: absolute;
top: 0px;
left: 0px;
width: 140px;
padding: 10px;
}
.detail-content {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0 0 0 150px
}

11
src/commons/component/service-detail.component.html
View File

@ -1,4 +1,4 @@
<div class="ui-g-12 detail-view-box"> <div class="ui-g-12">
<div class="detail-img"> <div class="detail-img">
<!-- <svg width="200" height="200" viewBox="20 40 140 100"> <!-- <svg width="200" height="200" viewBox="20 40 140 100">
@ -7,13 +7,12 @@
<svg width="140" height="140" viewBox="15 35 140 100"> <svg width="140" height="140" viewBox="15 35 140 100">
<image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" /> <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" />
</svg> </svg>
<h3>
{{service.name}} {{service.port.host.address}}
</h3>
</div> </div>
<h3> <p-tabView class="detail-content">
{{service.name}} {{service.port.host.address}}
</h3>
<p-tabView>
<p-tabPanel header="General"> <p-tabPanel header="General">
<ul class="key-value"> <ul class="key-value">

77
src/commons/component/service-detail.component.scss
View File

@ -1,53 +1,38 @@
.detail-view-box { .detail-img {
width: 100%; display: inline;
padding : 10px 160px 0 0; width: 140px;
padding: 10px;
svg{
display: inline;
}
h3{ h3{
padding: 20px 0 20px 5px; display: inline;
padding: 10px 0 10px 5px;
// padding: 5px; // padding: 5px;
// height: 60px; // height: 60px;
} }
.key-value { }
list-style-type: none; .detail-content {
margin: 0; display: inline;
padding: 0; }
box-sizing: border-box;
width: 100%; .key-value {
li { list-style-type: none;
padding: 8px 14px; margin: 0;
border-bottom: 1px solid #d8dae2; padding: 0;
position: relative; box-sizing: border-box;
font-weight: bold; width: 100%;
width: 100%; li {
.meta-value { padding: 8px 14px;
font-weight: 100; border-bottom: 1px solid #d8dae2;
position: relative; position: relative;
width: 70%; font-weight: bold;
left: 10px; width: 100%;
} .meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
} }
} }
} }
.tab-border-bottom .ui-widget-header {
border: 0 !important;
}
// .key-value {
// list-style-type: none;
// margin: 28px 0 0 0;
// padding: 0;
// box-sizing: border-box;
// width: 500px;
// li {
// padding: 8px 14px;
// border-bottom: 1px solid #d8dae2;
// position: relative;
// font-weight: bold;
// width: 180px;
// .meta-value {
// font-weight: 100;
// position: absolute;
// width: 300px;
// right: 40px;
// }
// }
// }

11
src/commons/component/zone-detail.component.html
View File

@ -1,4 +1,4 @@
<div id="detail-view-box"> <div class="ui-g-12">
<div class="detail-img"> <div class="detail-img">
<!-- <svg width="200" height="200" viewBox="20 40 140 100"> <!-- <svg width="200" height="200" viewBox="20 40 140 100">
@ -7,13 +7,12 @@
<svg width="140" height="140" viewBox="15 35 140 100"> <svg width="140" height="140" viewBox="15 35 140 100">
<image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" /> <image x="-50" y="-40" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/icon/icon_router.svg" />
</svg> </svg>
<h3>
{{zone.network}}
</h3>
</div> </div>
<h3> <p-tabView class="detail-content">
{{zone.network}}
</h3>
<p-tabView class="tab-border-bottom">
<p-tabPanel header="General"> <p-tabPanel header="General">
<ul class="key-value"> <ul class="key-value">

57
src/commons/component/zone-detail.component.scss
View File

@ -1,33 +1,38 @@
#detail-view-box { .detail-img {
width: 100%; display: inline;
padding : 10px 160px 0 0; width: 140px;
padding: 10px;
svg{
display: inline;
}
h3{ h3{
padding: 20px 0 20px 5px; display: inline;
padding: 10px 0 10px 5px;
// padding: 5px; // padding: 5px;
// height: 60px; // height: 60px;
} }
.key-value { }
list-style-type: none; .detail-content {
margin: 0; display: inline;
padding: 0; }
box-sizing: border-box;
width: 100%; .key-value {
li { list-style-type: none;
padding: 8px 14px; margin: 0;
border-bottom: 1px solid #d8dae2; padding: 0;
position: relative; box-sizing: border-box;
font-weight: bold; width: 100%;
width: 100%; li {
.meta-value { padding: 8px 14px;
font-weight: 100; border-bottom: 1px solid #d8dae2;
position: relative; position: relative;
width: 70%; font-weight: bold;
left: 10px; width: 100%;
} .meta-value {
font-weight: 100;
position: relative;
width: 70%;
left: 10px;
} }
} }
} }
#detail-view-box .ui-widget-header {
border: 0 0 1px 0 !important;
}