notification page

Author: Di Wang

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

@@ -63,7 +63,7 @@ <h4>Notification States</h4>
  <div class="card place">
  <h4 class="text-center">Notifications Places</h4>
  <p class="text-center">Click to view notifications</p>
- <div class="row page-title">
+ <div class="row" style="margin-top: 15px">
  <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
  <div class="col-md-4">
  <button md-raised-button class="btn btn-primary btn-block" (click)="btnClick('top-left')">TOP LEFT</button>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 declare const $: any;
 
 @Component({
@@ -8,36 +8,52 @@ declare const $: any;
 })
 export class NotificationComponent implements OnInit {
 
- constructor() { }
+ constructor() {
+ }
 
  ngOnInit() {
  }
 
  btnClick(position) {
  let from = 'top';
  let align = 'right';
+ let type = 'info';
  switch (position) {
  case 'top-left':
  align = 'left';
+ type = 'rose';
  break;
  case 'top-center':
  align = 'center';
+ type = 'success';
  break;
  case 'bottom-left':
  align = 'left';
  from = 'bottom';
+ type = 'primary';
  break;
  case 'bottom-center':
  align = 'center';
  from = 'bottom';
+ type = 'warning';
  break;
  case 'bottom-right':
  from = 'bottom';
+ type = 'danger';
  break;
  }
  $.notify({
- message: 'Welcome to <b>MATERIAL DASHBOARD</b> - a beautiful dashboard for every web developer.'
- }, {placement: {from, align}});
+ message: 'Welcome to <b>MATERIAL DASHBOARD</b> - a beautiful dashboard for every web developer.',
+ }, {
+ placement: {from, align},
+ offset: {x: 20, y: 35},
+ type,
+ template: `<div class="alert alert-{0} alert-with-icon col-md-4">
+ <i class="material-icons alert-icon">notifications</i>
+ <button class="close" type="button" data-dismiss="alert" aria-label="Close"><i class="material-icons">close</i></button>
+ <span>{2}</span>
+ </div>`
+ });
  }
 
 }

src/app/dashboard/sweetalert/sweetalert.component.html

@@ -1,6 +1,12 @@
 <div class="container">
  <app-navbar title="Sweet Alert"></app-navbar>
+ <div class="row page-title">
+ <h3 class="text-center">Sweet Alert 2</h3>
+ </div>
  <div class="row">
+ <p class="text-center subtitle">A beautiful plugin, that replace the classic alert, Handcrafted by our friend <a href="https://twitter.com/t4t5" target="_blank">Tristan Edwards</a>. Please checkout the <a href="http://limonte.github.io/sweetalert2/" target="_blank">full documentation</a>.</p>
+ </div>
+ <div class="row page-title">
  <div class="col-md-3 col-sm-6 col-xs-12">
  <div class="card">
  <h5>Basic example</h5>

src/styles.css

@@ -64,6 +64,10 @@ a:hover{
  text-decoration: none;
 }
 
+b{
+ font-weight: 300;
+}
+
 .subtitle{
  margin-top: 15px;
  color: #3C4858;
@@ -394,27 +398,27 @@ a:hover{
 }
 
 /* text color */
-.text-primary{
+.text-primary, .alert-primary .alert-icon{
  color: #9c27b0;
 }
 
-.text-danger{
+.text-danger, .alert-danger .alert-icon{
  color: #f44336;
 }
 
-.text-info{
+.text-info, .alert-info .alert-icon{
  color: #00bcd4;
 }
 
-.text-warning{
+.text-warning, .alert-warning .alert-icon{
  color: #ff9800;
 }
 
-.text-rose{
+.text-rose, .alert-rose .alert-icon{
  color: #e91e63;
 }
 
-.text-success{
+.text-success, .alert-success .alert-icon{
  color: #4caf50;
 }
 
@@ -494,11 +498,3 @@ a:hover{
  padding: 9px;
  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);
 }
-
-.alert-info .alert-icon{
- color: #00bcd4;
-}
-
-.alert-rose .alert-icon{
- color: #eb3573;
-}