add different kinds of notifications

js/components/global_notification.js

@@ -3,7 +3,6 @@
 import React from 'react';
 
 import GlobalNotificationStore from '../stores/global_notification_store';
-import GlobalNotificationActions from '../actions/global_notification_actions';
 
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
@@ -37,20 +36,37 @@ let GlobalNotification = React.createClass({
     },
 
     render() {
-        let className = 'ascribe-global-notification ';
+        let notificationClass = 'ascribe-global-notification ';
         let message = this.state && this.state.message ? this.state.message : null;
 
-        className += message ? 'ascribe-global-notification-on' : 'ascribe-global-notification-off';
+        if(message) {
+            let colors = {
+                warning: '#f0ad4e',
+                success: '#5cb85c',
+                info: 'rgba(2, 182, 163, 1)',
+                danger: '#d9534f'
+            };
 
-        return (
-            <Row>
-                <Col>
-                    <div className={className}>
-                        <div>{message ? message : null}</div>
-                    </div>
-                </Col>
-            </Row>
-        );
+            let text = (<div style={{color: colors[this.state.type]}}>{message ? message : null}</div>);
+
+            return (
+                <Row>
+                    <Col>
+                        <div className={notificationClass + 'ascribe-global-notification-on'}>
+                            {text}
+                        </div>
+                    </Col>
+                </Row>
+            );
+        } else {
+            return (
+                <Row>
+                    <Col>
+                        <div className={notificationClass + 'ascribe-global-notification-off'} />
+                    </Col>
+                </Row>
+            );
+        }
     }
 });
 

js/components/header.js

@@ -13,9 +13,6 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
 
 import { getLangText } from '../utils/lang_utils';
 
-import GlobalNotificationActions from '../actions/global_notification_actions';
-import GlobalNotificationModel from '../models/global_notification_model';
-
 let Link = Router.Link;
 
 let Header = React.createClass({
@@ -37,11 +34,6 @@ let Header = React.createClass({
         this.setState(state);
     },
 
-    showNotification() {
-        let notification = new GlobalNotificationModel('transaction successful', 3500);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
-
     render() {
         return (
             <Navbar>
@@ -50,7 +42,6 @@ let Header = React.createClass({
                         <span>ascribe </span>
                         <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
                     </a>
-                    <MenuItem onClick={this.showNotification}>test notification</MenuItem>
                 </Nav>
                 <Nav right>
                     <DropdownButton eventKey="1" title={this.state.currentUser.username}>

js/models/global_notification_model.js

@@ -1,13 +1,19 @@
 'use strict';
 
 export default class GlobalNotificationModel {
-    constructor(message, dismissAfter) {
-        if(!message) {
-            throw new Error('A notifications message must be defined.');
-        } else {
+    constructor(message, type = 'info', dismissAfter = 3500) {
+        if(message) {
             this.message = message;
+        } else {
+            throw new Error('A notifications message must be defined.');
         }
 
-        this.dismissAfter = dismissAfter ? dismissAfter : 0;
+        if(type === 'info' || type === 'success' || type === 'warning' || type === 'danger') {
+            this.type = type;
+        } else {
+            throw new Error('A notification\'s type either has to be info, success, warning, danger. Not: ' + type);
+        }
+
+        this.dismissAfter = dismissAfter;
     }
 }