design
This commit is contained in:
sunny
parent
e8cf16e8d8
commit
cb22bd642a
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,10 @@
|
|||
<div class="ui-g-12">
|
||||
<div class="card no-margin">
|
||||
<h1>Alert</h1>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-nopad">
|
||||
<of-alert-list></of-alert-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -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" [ngStyle]="{'background-color': bgMap.get('Down')}">
|
||||
<div class="ui-g-6">Down</div>
|
||||
<div class="ui-g-6">3</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" [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-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 form-group" [style]="{width: '700px'}">
|
||||
<p-dataList [value]="metricAlerts" [paginator]="true" [rows]="5" styleClass="cars-datalist">
|
||||
<div class="ui-g-12 form-group">
|
||||
<p-dataList [value]="metricAlerts" [paginator]="true" [rows]="5">
|
||||
<ng-template let-alert pTemplate="alert">
|
||||
<div [ngStyle]="{'border-bottom': '1px solid #bdbdbd','background-color': bgMap.get(alert.status)}" class="clearfix car-item">
|
||||
<div [ngStyle]="{'padding':'5px', 'border-style':'solid', 'border-width':'0 0 1px 0', 'border-color': bgMap.get(alert.status)}" class="clearfix">
|
||||
|
||||
<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 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 width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.status}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-dataList>
|
||||
|
||||
|
||||
|
||||
<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 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-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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<h1>Notifications</h1>
|
||||
<div>
|
||||
<a href="javascript:void(0)" (click)="onMarkAllAsRead()">Mark all as read</a>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user