From cb22bd642a5921d40888998254a3b75b24e25752 Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Sun, 22 Apr 2018 20:10:12 +0900
Subject: [PATCH] design

---
 .../app.notification.component.html           | 11 ++-
 .../layout/topbar/app.topbar.component.html   |  2 +-
 src/app/pages/alert/alert-page.component.html | 10 +-
 .../alert/component/list/list.component.html  | 91 ++++++++++---------
 .../notification/notification.component.html  |  6 +-
 src/styles.scss                               | 23 +++++
 6 files changed, 84 insertions(+), 59 deletions(-)

diff --git a/src/app/commons/component/layout/notification/app.notification.component.html b/src/app/commons/component/layout/notification/app.notification.component.html
index 63532fb..9d6b575 100644
--- a/src/app/commons/component/layout/notification/app.notification.component.html
+++ b/src/app/commons/component/layout/notification/app.notification.component.html
@@ -1,8 +1,11 @@
-<li role="menuitem" *ngFor="let noti of notifications; let i = index" >
+<div class="ui-g-12 ui-bottom-border-1">
+    No tifications
+</div>
+<li role="menuitem" *ngFor="let noti of notifications; let i = index" class="ui-bottom-border-1 ui-app-noti">
     <a *ngIf="i < 5" href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}">
-        <span>{{noti.title}}</span>
-        <span>{{noti.message}}</span>
-        <span>{{noti.createDate | date: 'short'}}</span>
+        <div class="ui-app-noti-title">{{noti.title}}</div>
+        <div class="ui-app-noti-content">{{noti.message}}</div>
+        <div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div>
     </a>
 </li>
 <li role="menuitem">
diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.html b/src/app/commons/component/layout/topbar/app.topbar.component.html
index e7695f4..77010f0 100644
--- a/src/app/commons/component/layout/topbar/app.topbar.component.html
+++ b/src/app/commons/component/layout/topbar/app.topbar.component.html
@@ -128,7 +128,7 @@
             </li>
             <li #messages [ngClass]="{'active-top-menu':app.activeTopbarItem === messages}">
                 <a href="#" (click)="app.onTopbarItemClick($event,messages)">
-                    <i class="topbar-icon material-icons animated swing">message</i>
+                    <i class="topbar-icon material-icons animated swing">notifications</i>
                     <span class="topbar-badge animated rubberBand" *ngIf="notificationCount > 0">
                         {{notificationCount}}
                     </span>
diff --git a/src/app/pages/alert/alert-page.component.html b/src/app/pages/alert/alert-page.component.html
index 9ca6ed3..86608ed 100644
--- a/src/app/pages/alert/alert-page.component.html
+++ b/src/app/pages/alert/alert-page.component.html
@@ -3,14 +3,10 @@
         <div class="ui-g-12">
             <div class="card no-margin">
                 <h1>Alert</h1>
-
-                <of-alert-list></of-alert-list>
             </div>
-
         </div>
-
-
+        <div class="ui-g-12 ui-nopad">
+            <of-alert-list></of-alert-list>
+        </div>
     </div>
-
-
 </div>
\ No newline at end of file
diff --git a/src/packages/alert/component/list/list.component.html b/src/packages/alert/component/list/list.component.html
index df157c0..d8c60b7 100644
--- a/src/packages/alert/component/list/list.component.html
+++ b/src/packages/alert/component/list/list.component.html
@@ -1,49 +1,52 @@
-<div class="ui-g form-group">
-    <div class="ui-g-12 ui-md-2">
-        <div class="ui-g">
-            <div class="ui-g-6">All</div>
-            <div class="ui-g-6">13</div>
+<div class="ui-g-12 ui-md-6">
+    <div class="card ui-g">
+        <h3>Metric Alert</h3>
+        <div class="ui-g-12 ui-xl-8 ui-xl-offset-4 ui-g-nopad">
+            <div class="ui-g-3">
+                <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>All : 13
+            </div>
+            <div class="ui-g-3">
+                <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Down : 3
+            </div>
+            <div class="ui-g-3">
+                <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn : 5
+            </div>
+            <div class="ui-g-3">
+                <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error : 5
+            </div>
         </div>
-        <div class="ui-g"  [ngStyle]="{'background-color': bgMap.get('Down')}">
-            <div class="ui-g-6">Down</div>
-            <div class="ui-g-6">3</div>
-        </div>
-        <div class="ui-g" [ngStyle]="{'background-color': bgMap.get('Warn')}">
-            <div class="ui-g-6">Warn</div>
-            <div class="ui-g-6">5</div>
-        </div>
-        <div class="ui-g" [ngStyle]="{'background-color': bgMap.get('Error')}">
-            <div class="ui-g-6">Error</div>
-            <div class="ui-g-6">5</div>
+
+        <div class="ui-g-12 form-group">
+            <p-dataList [value]="metricAlerts" [paginator]="true" [rows]="5">
+                <ng-template let-alert pTemplate="alert">
+                    <div [ngStyle]="{'padding':'5px', 'border-style':'solid', 'border-width':'0 0 1px 0', 'border-color': bgMap.get(alert.status)}" class="clearfix">
+
+                        <div class="ui-g-3">{{alert.created}}</div>
+                        <div class="ui-g-7">
+                            <i class="fa ui-icon-stop ui-status-icon ui-status-{{bgMap.get(alert.status)}}"></i>{{alert.msg}}
+                        </div>
+                        <div class="ui-g-2" [ngStyle]="{'font-color': bgMap.get(alert.status)}">{{alert.status}}</div>
+                    </div>
+                </ng-template>
+            </p-dataList>
         </div>
     </div>
 </div>
-
-<div class="ui-g form-group" [style]="{width: '700px'}">
-    <p-dataList [value]="metricAlerts" [paginator]="true" [rows]="5" styleClass="cars-datalist">
-        <ng-template let-alert pTemplate="alert">
-            <div [ngStyle]="{'border-bottom': '1px solid #bdbdbd','background-color': bgMap.get(alert.status)}" class="clearfix car-item">
-
-                <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.created}}</div>
-                <div class="car-details" style="display:inline-block;vertical-align:middle">
-                    {{alert.msg}}
-                </div>
-                <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.status}}</div>
-            </div>
-        </ng-template>
-    </p-dataList>
-
-    &nbsp;
-
-    <p-dataList [value]="systemAlerts" [paginator]="true" [rows]="5" styleClass="cars-datalist">
-        <ng-template let-alert pTemplate="alert">
-            <div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
-                <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.created}}</div>
-                <div class="car-details" style="display:inline-block;vertical-align:middle">
-                    {{alert.msg}}
-                </div>
-                <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.status}}</div>
-            </div>
-        </ng-template>
-    </p-dataList>
+<div class="ui-g-12 ui-md-6">
+    <div class="card ui-g">
+        <div class="ui-g-12">
+            <h3>System Alert</h3>
+            <p-dataList [value]="systemAlerts" [paginator]="true" [rows]="5">
+                <ng-template let-alert pTemplate="alert">
+                    <div style="border-bottom: 1px solid #bdbdbd; padding: 7px" class="clearfix">
+                        <div class="ui-g-3">{{alert.created}}</div>
+                        <div class="ui-g-7">
+                            {{alert.msg}}
+                        </div>
+                        <div class="ui-g-2">{{alert.status}}</div>
+                    </div>
+                </ng-template>
+            </p-dataList>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/packages/notification/component/notification/notification.component.html b/src/packages/notification/component/notification/notification.component.html
index 60b649a..b0ab03e 100644
--- a/src/packages/notification/component/notification/notification.component.html
+++ b/src/packages/notification/component/notification/notification.component.html
@@ -1,7 +1,7 @@
 <h1>Notifications</h1>
-<div>
-    <a href="javascript:void(0)" (click)="onMarkAllAsRead()">Mark all as read</a>
-</div>
+<div class="ui-g-12" dir="rtl">
+    <button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
+</div>    
 
 <p-table [value]="notifications" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
   <ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
diff --git a/src/styles.scss b/src/styles.scss
index 4a004fe..bdf3c70 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -189,3 +189,26 @@ img.ui-img-profile-responsive {
 .ui-bottom-border-1 {
     border-bottom: #bdbdbd 1px solid;
 }
+.ui-app-noti{
+    li{
+        padding: 10px !important;
+        line-height: 1.2em !important;
+        width: 100% !important;
+        a {
+            .ui-app-noti-title {
+            font-weight: bold !important;
+            float: left !important;
+            padding: 10px !important;
+            margin: 0 !important;
+            }
+            .ui-app-noti-date{
+                float: right !important;
+                font-size: 0.6em !important;
+                color: gray !important;
+            }
+            .ui-app-noti-content{
+                float: left !important;
+            }
+        }
+    }
+}