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-25 20:14:54 +09:00
parent aeb949161e
commit c5e1b49b53
3 changed files with 53 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,15 @@
<div class="ui-g-12 ui-bottom-border-1"> <div class="ui-g ui-g-12 ui-g-nopad ui-app-noti">
No tifications <h4>No tifications</h4>
</div> <li role="menuitem" *ngFor="let noti of notifications; let i = index">
<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'}">
<a *ngIf="i < 5" href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}"> <div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div>
<div class="ui-app-noti-title">{{noti.title}}</div> <div class="ui-app-noti-title">{{noti.title}}</div>
<div class="ui-app-noti-content">{{noti.message}}</div> <div class="ui-app-noti-content">{{noti.message}}</div>
<div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div> </a>
</a> </li>
</li> <li>
<li role="menuitem"> <a href="javascript:void(0)" (click)="onViewAllClick(noti)">
<a href="javascript:void(0)" class="topbar-message" (click)="onViewAllClick(noti)"> <span>View All</span>
<span>View All</span> </a>
</a> </li>
</li> </div>

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

@ -4,7 +4,15 @@
</div> </div>
<p-table [value]="notifications" selectionMode="single" (onRowSelect)="onRowSelect($event)" > <p-table [value]="notifications" selectionMode="single" (onRowSelect)="onRowSelect($event)" >
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" > <ng-template pTemplate="header">
<tr>
<th style="width:9em">Date</th>
<th style="width:12em">Title</th>
<th pResizableColumn>Message</th>
<th style="width:8em">User</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}"> <tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td> <td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
<td>{{notification.title}}</td> <td>{{notification.title}}</td>

50
src/styles.scss
View File

@ -189,27 +189,35 @@ img.ui-img-profile-responsive {
.ui-bottom-border-1 { .ui-bottom-border-1 {
border-bottom: #bdbdbd 1px solid; border-bottom: #bdbdbd 1px solid;
} }
.ultima-menu li a{
.ui-app-noti{ .layout-container .ultima-menu .ui-app-noti{
li{ h4 {
padding: 10px !important; line-height: 1.2em;
line-height: 1.2em !important; border-top : 1px solid #bdbdbd;
width: 100% !important; border-bottom : 1px solid #bdbdbd;
a { margin: 0;
.ui-app-noti-title { width: 100%;
font-weight: bold !important; padding: 7px 10px;
float: left !important; color: #bdbdbd;
padding: 10px !important; }
margin: 0 !important; li{
} padding: 0 ;
.ui-app-noti-date{ width: 100%;
float: right !important; border-bottom: #bdbdbd 1px solid;
font-size: 0.6em !important; a {
color: gray !important; display: block;
} .ui-app-noti-title {
.ui-app-noti-content{ font-weight: bold;
float: left !important; float: left;
} }
.ui-app-noti-date{
float: right;
font-size: 0.8em;
color: #5e6166;
}
.ui-app-noti-content{
float: left;
overflow: hidden;
} }
} }
} }