Skip to content

Commit ca9c423

Browse files
author
Di Wang
committed
notification page
1 parent c02ebb7 commit ca9c423

File tree

4 files changed

+180
-23
lines changed

4 files changed

+180
-23
lines changed

‎src/app/dashboard/notification/notification.component.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.notification-card{
2+
padding: 23px 20px 18px 20px;
3+
}
4+
5+
.notification-card h4{
6+
margin-bottom: 15px;
7+
}
8+
9+
.place{
10+
padding: 20px;
11+
}

‎src/app/dashboard/notification/notification.component.html‎

Lines changed: 76 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,91 @@
44
<h3 class="text-center">Notifications</h3>
55
</div>
66
<div class="row">
7-
<p class="text-center">Handcrafted by our friend Robert McIntosh. Please checkout the full documentation.</p>
7+
<p class="text-center subtitle">Handcrafted by our friend <a href="https://github.com/mouse0270" target="_blank">Robert McIntosh</a>. Please checkout the <a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation</a>.</p>
88
</div>
99
<div class="row page-title">
1010
<div class="col-md-6 col-sm-12 col-xs-12">
11-
<div class="card">
11+
<div class="card notification-card">
1212
<h4>Notifications Style</h4>
13+
<div class="alert alert-info">
14+
<span>This is a plain notification</span>
15+
</div>
16+
<div class="alert alert-info">
17+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
18+
<span>This is a plain notification</span>
19+
</div>
20+
<div class="alert alert-info alert-with-icon">
21+
<i class="material-icons alert-icon">notifications</i>
22+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
23+
<span>This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
24+
</div>
25+
<div class="alert alert-rose alert-with-icon">
26+
<i class="material-icons alert-icon">notifications</i>
27+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
28+
<span>This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
29+
</div>
1330
</div>
1431
</div>
1532
<div class="col-md-6 col-sm-12 col-xs-12">
16-
<div class="card">
33+
<div class="card notification-card">
1734
<h4>Notification States</h4>
35+
<div class="alert alert-info">
36+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
37+
<span>INFO - This is a regular notification made with ".alert-info"</span>
38+
</div>
39+
<div class="alert alert-success">
40+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
41+
<span>SUCCESS - This is a regular notification made with ".alert-success"</span>
42+
</div>
43+
<div class="alert alert-warning">
44+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
45+
<span>WARNING - This is a regular notification made with ".alert-warning"</span>
46+
</div>
47+
<div class="alert alert-danger">
48+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
49+
<span>DANGER - This is a regular notification made with ".alert-danger"</span>
50+
</div>
51+
<div class="alert alert-primary">
52+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
53+
<span>PRIMARY - This is a regular notification made with ".alert-primary"</span>
54+
</div>
55+
<div class="alert alert-rose">
56+
<button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
57+
<span>ROSE - This is a regular notification made with ".alert-rose"</span>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
<div class="row" style="margin: 35px 0 20px 0;">
63+
<div class="card place">
64+
<h4 class="text-center">Notifications Places</h4>
65+
<p class="text-center">Click to view notifications</p>
66+
<div class="row page-title">
67+
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
68+
<div class="col-md-4">
69+
<button md-raised-button class="btn btn-primary btn-block" (click)="btnClick('top-left')">TOP LEFT</button>
70+
</div>
71+
<div class="col-md-4">
72+
<button md-raised-button class="btn btn-primary btn-block" (click)="btnClick('top-center')">TOP CENTER</button>
73+
</div>
74+
<div class="col-md-4">
75+
<button md-raised-button class="btn btn-primary btn-block" (click)="btnClick('top-right')">TOP RIGHT</button>
76+
</div>
77+
</div>
78+
</div>
79+
<div class="row page-title">
80+
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
81+
<div class="col-md-4">
82+
<button md-raised-button class="btn btn-primary btn-block" (click)="btnClick('bottom-left')">BOTTOM LEFT</button>
83+
</div>
84+
<div class="col-md-4">
85+
<button md-raised-button class="btn btn-primary btn-block" (click)="btnClick('bottom-center')">BOTTOM CENTER</button>
86+
</div>
87+
<div class="col-md-4">
88+
<button md-raised-button class="btn btn-primary btn-block" (click)="btnClick('bottom-right')">BOTTOM RIGHT</button>
89+
</div>
90+
</div>
1891
</div>
1992
</div>
2093
</div>
21-
2294
</div>

‎src/app/dashboard/notification/notification.component.ts‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,31 @@ export class NotificationComponent implements OnInit {
1313
ngOnInit() {
1414
}
1515

16-
btnNotify() {
16+
btnClick(position) {
17+
let from = 'top';
18+
let align = 'right';
19+
switch (position) {
20+
case 'top-left':
21+
align = 'left';
22+
break;
23+
case 'top-center':
24+
align = 'center';
25+
break;
26+
case 'bottom-left':
27+
align = 'left';
28+
from = 'bottom';
29+
break;
30+
case 'bottom-center':
31+
align = 'center';
32+
from = 'bottom';
33+
break;
34+
case 'bottom-right':
35+
from = 'bottom';
36+
break;
37+
}
1738
$.notify({
1839
message: 'Welcome to <b>MATERIAL DASHBOARD</b> - a beautiful dashboard for every web developer.'
19-
}, {
20-
placement: {
21-
from: 'top',
22-
align: 'left'
23-
}
24-
});
40+
}, {placement: {from, align}});
2541
}
2642

2743
}

‎src/styles.css‎

Lines changed: 70 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,21 @@ p {
5454
color: #999;
5555
}
5656

57+
a {
58+
color: #9c27b0;
59+
text-decoration: none;
60+
}
61+
62+
a:hover{
63+
color: #89229b;
64+
text-decoration: none;
65+
}
66+
67+
.subtitle{
68+
margin-top: 15px;
69+
color: #3C4858;
70+
}
71+
5772
.container{
5873
padding: 15px 30px;
5974
}
@@ -403,44 +418,87 @@ p {
403418
color: #4caf50;
404419
}
405420

406-
.alert-primary{
407-
background-color: #af2cc5;
421+
/** alert **/
422+
.alert{
423+
border: none;
424+
position: relative;
425+
padding: 20px 15px;
408426
color: #ffffff;
409427
border-radius: 3px;
428+
}
429+
430+
.alert span{
431+
font-weight: 100;
432+
width: 93%;
433+
display: block;
434+
}
435+
436+
.alert .close{
437+
text-shadow: none;
438+
opacity: 1;
439+
color: #fff;
440+
position: relative;
441+
top: -6px;
442+
outline: none;
443+
}
444+
445+
.alert .close i{
446+
font-size: 11px;
447+
}
448+
449+
.alert-primary{
450+
background-color: #af2cc5;
410451
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
411452
}
412453

413454
.alert-info{
414455
background-color: #00bcd4;
415-
color: #ffffff;
416-
border-radius: 3px;
417456
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
418457
}
419458

420459
.alert-rose{
421460
background-color: #eb3573;
422-
color: #ffffff;
423-
border-radius: 3px;
424461
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
425462
}
426463

427464
.alert-success{
428465
background-color: #5cb860;
429-
color: #ffffff;
430-
border-radius: 3px;
431466
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
432467
}
433468

434469
.alert-warning{
435470
background-color: #ffa21a;
436-
color: #ffffff;
437-
border-radius: 3px;
438471
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
439472
}
440473

441474
.alert-danger{
442475
background-color: #f55a4e;
443-
color: #ffffff;
444-
border-radius: 3px;
445476
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
446477
}
478+
479+
.alert-with-icon{
480+
margin-top: 43px;
481+
}
482+
483+
.alert-with-icon span{
484+
padding-left: 55px;
485+
}
486+
487+
.alert-with-icon .alert-icon{
488+
position: absolute;
489+
top: -17px;
490+
left: 17px;
491+
background-color: #fff;
492+
border-radius: 50%;
493+
font-size: 20px;
494+
padding: 9px;
495+
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
496+
}
497+
498+
.alert-info .alert-icon{
499+
color: #00bcd4;
500+
}
501+
502+
.alert-rose .alert-icon{
503+
color: #eb3573;
504+
}

0 commit comments

Comments
 (0)