From f2dd38c7b2f45dc0aa754aa8a8ec87be7b41a8e9 Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Tue, 17 Apr 2018 21:16:32 +0900
Subject: [PATCH] design

---
 .../sensor/component/list/list.component.html | 104 +++++++++---------
 .../target/component/list/list.component.html |  14 +--
 2 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/src/packages/sensor/component/list/list.component.html b/src/packages/sensor/component/list/list.component.html
index eda3029..50dc137 100644
--- a/src/packages/sensor/component/list/list.component.html
+++ b/src/packages/sensor/component/list/list.component.html
@@ -1,43 +1,45 @@
 <h1>Sensors</h1>
 
-<div>
+<div class="ui-bottom-space-10">
     <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
         <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
     </p-dialog>
 
-    <button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensor()"></button>
-    <button type="button" label="Add Sensor with Target(temp)" icon="ui-icon-add" pButton (click)="onAddSensorWithTarget()"></button>
-    <button type="button" label="Add Sensor with Target2(temp)" icon="ui-icon-add" pButton (click)="onAddSensorWithTarget2()"></button>
+    <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-width-fit" (click)="onAddSensor()"></button>
+    <button type="button" label="Add Sensor with Target(temp)" icon="ui-icon-add" pButton class="ui-button-width-fit" (click)="onAddSensorWithTarget()"></button>
+    <button type="button" label="Add Sensor with Target2(temp)" icon="ui-icon-add" pButton class="ui-button-width-fit" (click)="onAddSensorWithTarget2()"></button>
 </div>
 
-<div class="ui-g-12 ui-md-3">
+<div class="ui-g">
+    <div class="ui-g-12 ui-md-3">
+        <p-panel [showHeader]="false">
+            <div class="ui-g">
+                <h3>Search</h3>
+                <div class="ui-g-12 ui-inputgroup ui-bottom-space-10">
+                    <span class="md-inputfield">
+                        <input type="text" pInputText>
+                        <label>IP or Application name</label>
+                    </span>
+                </div>
 
-    <button pButton type="button" label="Search" class="ui-button-secondary" (click)="onSearch()"></button>
+                <div class="ui-g-12 ui-bottom-space-10">
+                    <p-multiSelect [options]="targetOptions" [(ngModel)]="selectedTargets"></p-multiSelect>
+                    <!-- <p-multiSelect [options]="targetOptions" (onChange)="onTargetFilterSelect($event)"></p-multiSelect> -->
+                </div>
 
-    <div class="ui-inputgroup">
-        <span class="md-inputfield">
-            <input type="text" pInputText>
-            <label>IP or Application name</label>
-        </span>
+
+                <div class="ui-g-6">
+                    <p-checkbox name="cg" value="Active" label="Active" [(ngModel)]="checkboxValues"></p-checkbox>
+                </div>
+                <div class="ui-g-6">
+                    <p-checkbox name="cg" value="Inactive" label="Inactive" [(ngModel)]="checkboxValues"></p-checkbox>
+                </div>
+                <button pButton type="button" label="Search" class="ui-button-secondary ui-top-space-10" (click)="onSearch()"></button>
+            </div>
+        </p-panel>
     </div>
 
-    <div>
-        <p-multiSelect [options]="targetOptions" [(ngModel)]="selectedTargets"></p-multiSelect>
-        <!-- <p-multiSelect [options]="targetOptions" (onChange)="onTargetFilterSelect($event)"></p-multiSelect> -->
-    </div>
-
-
-    <div class="ui-g-12 ui-md-4">
-        <p-checkbox name="cg" value="Active" label="Active" [(ngModel)]="checkboxValues"></p-checkbox>
-    </div>
-    <div class="ui-g-12 ui-md-4">
-        <p-checkbox name="cg" value="Inactive" label="Inactive" [(ngModel)]="checkboxValues"></p-checkbox>
-    </div>
-</div>
-
-<div class="ui-g-12 ui-md-9">
-
-    <div class="card card-w-title">
+    <div class="ui-g-12 ui-md-9">
         <p-dataList [value]="targetSensor" [paginator]="true" styleClass="cars-datalist" [rows]="10">
             <!-- <p-header>
                 List of Cars
@@ -54,28 +56,28 @@
                 </div>
             </ng-template>
         </p-dataList>
-    </div>
 
-    <!-- <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
-        <ng-template pTemplate="header">
-            <tr>
-                <th>No.</th>
-                <th>Description</th>
-                <th>Status</th>
-                <th>Crawler</th>
-                <th>Items</th>
-                <th>Created at</th>
-            </tr>
-        </ng-template>
-        <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
-            <tr [pSelectableRow]="sensor">
-                <td>{{rowIndex + 1}}</td>
-                <td>{{sensor.Description}}</td>
-                <td>{{sensor.status.name}}</td>
-                <td>{{sensor.crawler.name}}</td>
-                <td>???</td>
-                <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
-            </tr>
-        </ng-template>
-    </p-table> -->
+        <!-- <p-table [value]="sensors" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+            <ng-template pTemplate="header">
+                <tr>
+                    <th>No.</th>
+                    <th>Description</th>
+                    <th>Status</th>
+                    <th>Crawler</th>
+                    <th>Items</th>
+                    <th>Created at</th>
+                </tr>
+            </ng-template>
+            <ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
+                <tr [pSelectableRow]="sensor">
+                    <td>{{rowIndex + 1}}</td>
+                    <td>{{sensor.Description}}</td>
+                    <td>{{sensor.status.name}}</td>
+                    <td>{{sensor.crawler.name}}</td>
+                    <td>???</td>
+                    <td>{{sensor.createDate | date: 'dd.MM.yyyy'}}</td>
+                </tr>
+            </ng-template>
+        </p-table> -->
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/packages/target/component/list/list.component.html b/src/packages/target/component/list/list.component.html
index 78a7585..30d85b7 100644
--- a/src/packages/target/component/list/list.component.html
+++ b/src/packages/target/component/list/list.component.html
@@ -3,13 +3,13 @@
 <p-table [value]="infras" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
   <ng-template pTemplate="header">
     <tr>
-      <th>No.</th>
-      <th>Status</th>
-      <th>Type</th>
+      <th style="width: 4em">No.</th>
+      <th style="width: 8em">Status</th>
+      <th style="width: 8em">Type</th>
       <th>Name</th>
-      <th>Sensors</th>
-      <th>Created at</th>
-      <th></th>
+      <th style="width: 15em">Sensors</th>
+      <th style="width: 8em">Created at</th>
+      <th style="width: 10em"></th>
     </tr>
   </ng-template>
   <ng-template pTemplate="body" let-infra let-rowIndex="rowIndex">
@@ -21,7 +21,7 @@
       <td>??</td>
       <td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>
       <td>
-          <button type="button" label="AddSensor" icon="ui-icon-add" pButton (click)="onAddSensor(infra.target)"></button>
+          <button type="button" label="AddSensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(infra.target)"></button>
       </td>
     </tr>
   </ng-template>