From bc094bd381d92d567bb6dea1550a2d1233f0e024 Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Fri, 22 Jun 2018 19:18:20 +0900
Subject: [PATCH] design

---
 .../component/request-summary.component.html  | 13 ++++
 .../component/search-result.component.html    | 78 ++++++++++---------
 .../component/service-selector.component.html |  2 +-
 .../noauth-probe-general.component.html       | 50 ++++++------
 .../probe/component/probe-host.component.html |  4 +-
 src/styles.scss                               | 37 ++++++++-
 6 files changed, 116 insertions(+), 68 deletions(-)

diff --git a/@overflow/discovery/component/request-summary.component.html b/@overflow/discovery/component/request-summary.component.html
index 8acc404..7f5fa21 100644
--- a/@overflow/discovery/component/request-summary.component.html
+++ b/@overflow/discovery/component/request-summary.component.html
@@ -9,8 +9,20 @@
                 <span *ngIf="discoverZone.discoverHost.discoverPort.includeUDP">UDP</span>
             </span>
         </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">
             <p-overlayPanel #op>
                 <div *ngFor="let service of services">
@@ -20,5 +32,6 @@
 
             <a style="cursor: pointer" (click)="op.toggle($event)">{{services.length}} services has selected.</a>
         </div>
+-->
     </div>
 </div>
\ No newline at end of file
diff --git a/@overflow/discovery/component/search-result.component.html b/@overflow/discovery/component/search-result.component.html
index 7e17698..7db2272 100644
--- a/@overflow/discovery/component/search-result.component.html
+++ b/@overflow/discovery/component/search-result.component.html
@@ -1,53 +1,55 @@
 <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">
-        <!-- ZONE node template -->
-        <ng-template let-node pTemplate="ZONE">
-            <div>
-                {{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>
+        <p-tree [value]="zoneNode" layout="vertical">
+            <!-- ZONE node template -->
+            <ng-template let-node pTemplate="ZONE">
+                <div>
+                    {{node.label}}
                 </div>
+            </ng-template>
 
-                <ng-template #unhighlightHost>
-                    <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check"
-                        offIcon="fa-square" [style]="{'width':'200px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
-                </ng-template>
-            </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>
 
-        <!-- SERVICE node template -->
-        <ng-template let-node pTemplate="SERVICE">
-            <div @discoveryResultAnim>
-                <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>
+                    <ng-template #unhighlightHost>
+                        <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check"
+                            offIcon="fa-square" [style]="{'width':'200px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
+                    </ng-template>
                 </div>
+            </ng-template>
 
-                <ng-template #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', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
-                </ng-template>
+            <!-- SERVICE node template -->
+            <ng-template let-node pTemplate="SERVICE">
+                <div @discoveryResultAnim>
+                    <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>
-    </p-tree>
+                    <ng-template #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', '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"
-        label="Save" icon="ui-icon-close" pButton (click)="saveTargets()"></button>
+                </div>
+            </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"
diff --git a/@overflow/discovery/component/service-selector.component.html b/@overflow/discovery/component/service-selector.component.html
index fb92a7b..3d3ac1d 100644
--- a/@overflow/discovery/component/service-selector.component.html
+++ b/@overflow/discovery/component/service-selector.component.html
@@ -10,7 +10,7 @@
         </div>
 
         <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">
                 <tr [pSelectableRow]="rowData">
                     <!-- <td>
diff --git a/@overflow/noauth-probe/component/noauth-probe-general.component.html b/@overflow/noauth-probe/component/noauth-probe-general.component.html
index 0e03124..6d179c4 100644
--- a/@overflow/noauth-probe/component/noauth-probe-general.component.html
+++ b/@overflow/noauth-probe/component/noauth-probe-general.component.html
@@ -1,36 +1,34 @@
-<div class="ui-g">
+<div class="ui-g ui-bottom-space-10">
   <div class="ui-g-6 ui-nopad">
     <h3>General</h3>
   </div>
 
   <!-- info -->
-  <div class="ui-g ui-bottom-space-10">
-    <div class="ui-g-12 ui-nopad">
-      <p-panel [showHeader]="false">
-        <div *ngIf="noAuthProbe">
-          <div class="ui-g">
-            <div class="ui-g-12 ui-md-6 ui-key-value">
-              <of-key-value [key]="'API Key'" [value]="noAuthProbe.apiKey"></of-key-value>
-            </div>
-            <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>
-            </div>
-            <div class="ui-g-12 ui-md-6 ui-key-value">
-              <ng-container [ngSwitch]="noAuthProbe.connectDate">
-                <ng-container *ngSwitchCase="undefined">
-                  <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>
+  <div class="ui-g-12 ui-nopad">
+    <p-panel [showHeader]="false">
+      <div *ngIf="noAuthProbe">
+        <div class="ui-g">
+          <div class="ui-g-12 ui-md-6 ui-key-value">
+            <of-key-value [key]="'API Key'" [value]="noAuthProbe.apiKey"></of-key-value>
+          </div>
+          <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>
+          </div>
+          <div class="ui-g-12 ui-md-6 ui-key-value">
+            <ng-container [ngSwitch]="noAuthProbe.connectDate">
+              <ng-container *ngSwitchCase="undefined">
+                <of-key-value [key]="'Connection'" [value]="'Not connected.'"></of-key-value>
               </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>
+              <ng-container *ngSwitchDefault>
+                <of-key-value [key]="'Connection'" [value]="noAuthProbe.connectAddress"></of-key-value>
+              </ng-container>
+            </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>
-      </p-panel>
-    </div>
+      </div>
+    </p-panel>
   </div>
 </div>
\ No newline at end of file
diff --git a/@overflow/probe/component/probe-host.component.html b/@overflow/probe/component/probe-host.component.html
index 7333171..37292ec 100644
--- a/@overflow/probe/component/probe-host.component.html
+++ b/@overflow/probe/component/probe-host.component.html
@@ -3,7 +3,7 @@
 
 <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">
       <h3>Host</h3>
     </div>
@@ -13,7 +13,7 @@
   </div>
 
   <!-- Host info -->
-  <div class="ui-g ui-bottom-space-10">
+  <div class="ui-g">
     <div class="ui-g-12 ui-nopad">
       <p-panel [showHeader]="false">
         <div *ngIf="infraHost">
diff --git a/src/styles.scss b/src/styles.scss
index 38be3a7..6ecf190 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1902,4 +1902,39 @@ body .ui-progressbar .ui-progressbar-value {
 }
 .ui-confirmdialog-message {
     white-space: pre-line;
-}
\ No newline at end of file
+}
+.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; }