overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-04-22 20:10:12 +09:00
parent e8cf16e8d8
commit cb22bd642a
6 changed files with 84 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/commons/component/layout/notification/app.notification.component.html
View File

@ -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">

2
src/app/commons/component/layout/topbar/app.topbar.component.html
View File

@ -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>

10
src/app/pages/alert/alert-page.component.html
View File

@ -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>

91
src/packages/alert/component/list/list.component.html
View File

@ -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>

4
src/packages/notification/component/notification/notification.component.html
View File

@ -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">

23
src/styles.scss
View File

@ -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;
}
}
}
}