From 93ad3b7effa0cd29ea0f1d3b4738de5bcef2ec42 Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Wed, 23 May 2018 15:27:37 +0900
Subject: [PATCH] design

---
 .../component/detail/detail.component.html    | 28 +++++++++++++++----
 src/styles.scss                               | 12 +++++++-
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/packages/probe/component/detail/detail.component.html b/src/packages/probe/component/detail/detail.component.html
index b26d28f..9b7a7a7 100644
--- a/src/packages/probe/component/detail/detail.component.html
+++ b/src/packages/probe/component/detail/detail.component.html
@@ -1,6 +1,12 @@
-<h1>Info</h1>
-<button *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
-<button *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()"></button>
+<div class="ui-g">
+  <div class="ui-g-6 ui-nopad">
+      <h1>Info</h1>
+  </div>
+  <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
+    <button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
+    <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()"></button>
+  </div>
+</div>
 
 <p-dialog [showHeader]="false" [closeOnEscape]="false" [modal]="true" header="Discovery" [width]="800" [(visible)]="display">
   <of-discovery-setting [probe]="probe" [visible]="display" (close)="onDiscoveryClose()"></of-discovery-setting>
@@ -13,7 +19,12 @@
       <div class="ui-g form-group">
 
         <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-          <input *ngIf="editMode" #input type="text" pInputText value="{{probe.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+          <div *ngIf="editMode" class="of-key-value-div">
+            <span>Name</span>
+            <span class="ng-star-inserted">
+              <input #input type="text" pInputText value="{{probe.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+            </span>
+          </div>
           <of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probe.displayName"></of-key-value>
         </div>
 
@@ -21,7 +32,12 @@
           <of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
         </div>
         <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-          <input *ngIf="editMode" #input type="text" pInputText value="{{probe.description}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+          <div *ngIf="editMode" class="of-key-value-div">
+              <span>Description</span>
+              <span class="ng-star-inserted">
+                 <input *ngIf="editMode" #input type="text" pInputText value="{{probe.description}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+              </span>
+            </div>
           <of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probe.description"></of-key-value>
         </div>
         <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
@@ -30,7 +46,7 @@
         <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
           <of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
         </div>
-        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-sm-1 ui-nopad">
+        <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
           <of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
         </div>
         <div class="ui-g-12 ui-md-6 ui-key-value ui-nopad">
diff --git a/src/styles.scss b/src/styles.scss
index 6eaac38..d556ffa 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -280,6 +280,11 @@
         min-width: 250px;
         margin: 0 -5px;        
     }
+    .of-key-value-div{
+        width: 100%;
+        min-width: 250px;
+        margin: 13px 0;        
+    }
     div {
         width: 100%;
         margin: 0;
@@ -308,7 +313,12 @@
     }
     span.ng-star-inserted::after, a.ng-star-inserted>span::after {
         content: " ";
-     }
+    }
+    input {
+        border: 0px;
+        background : #f5f5f5;
+        padding: 5px;
+    }
 }
 
 .ui-bottom-border-1 {