add desktop version for notifications

js/components/global_notification.js

@@ -38,17 +38,27 @@ let GlobalNotification = React.createClass({
     },
 
     extractFirstElem(l) {
-        return l.length > 0 ? l[0] : {message: ''};
+        if(l.length > 0) {
+            return {
+                show: true,
+                message: l[0]
+            };
+        } else {
+            return {
+                show: false,
+                message: ''
+            };
+        }
     },
 
     onChange(state) {
         let notification = this.extractFirstElem(state.notificationQue);
 
-        if(notification) {
+        if(notification.show) {
             this.setState(notification);
         } else {
-            this.replaceState({
+            this.setState({
-                message: ''
+                show: false
             });
         }
     },
@@ -62,31 +72,36 @@ let GlobalNotification = React.createClass({
     render() {
         let notificationClass = 'ascribe-global-notification';
         let textClass;
-        let message = this.state && this.state.message ? this.state.message : null;
 
-        if(message) {
+        if(this.state.containerWidth > 768) {
-            notificationClass += ' ascribe-global-notification-on';
+            notificationClass = 'ascribe-global-notification-bubble';
+
+            if(this.state.show) {
+                notificationClass += ' ascribe-global-notification-bubble-on';
+            } else {
+                notificationClass += ' ascribe-global-notification-bubble-off';
+            }
+
         } else {
-            notificationClass += ' ascribe-global-notification-off';
+            notificationClass = 'ascribe-global-notification';
+
+            if(this.state.show) {
+                notificationClass += ' ascribe-global-notification-on';
+            } else {
+                notificationClass += ' ascribe-global-notification-off';
+            }
+
         }
 
-        if(this.state) {
+        switch(this.state.message.type) {
-            switch(this.state.type) {
+            case 'success':
-                case 'warning':
+                textClass = 'ascribe-global-notification-success';
-                    textClass = 'ascribe-global-notification-warning';
+                break;
-                    break;
+            case 'danger':
-                case 'success':
+                textClass = 'ascribe-global-notification-danger';
-                    textClass = 'ascribe-global-notification-success';
+                break;
-                    break;
+            default:
-                case 'info':
+                console.warn('Could not find a matching type in global_notification.js');
-                    textClass = 'ascribe-global-notification-info';
-                    break;
-                case 'danger':
-                    textClass = 'ascribe-global-notification-danger';
-                    break;
-                default:
-                    console.warn('Could not find a matching type in global_notification.js');
-            }
         }
 
         return (
@@ -94,7 +109,7 @@ let GlobalNotification = React.createClass({
                 <Row>
                     <Col>
                         <div className={notificationClass}>
-                            <div className={textClass}>{message ? message : null}</div>
+                            <div className={textClass}>{this.state.message.message}</div>
                         </div>
                     </Col>
                 </Row>

js/components/header.js

@@ -113,7 +113,7 @@ let Header = React.createClass({
                         <Nav navbar left>
                         </Nav>
                         <Nav navbar right>
-                            <HeaderNotificationDebug />
+                            <HeaderNotificationDebug show={false}/>
                             {addNewWork}
                             {collection}
                             {account}

js/components/header_notification_debug.js

@@ -14,15 +14,37 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
  */
 let HeaderNotificationDebug = React.createClass({
 
+    propTypes: {
+        show: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return {
+            index: 0
+        };
+    },
+
     triggerNotification() {
-        let notification = new GlobalNotificationModel('this is a test, please ignore', 'success');
+        if(this.state.index === 1) {
+            this.setState({index: 0});
+        } else {
+            this.setState({index: this.state.index + 1});
+        }
+
+        let actions = ['success', 'danger'];
+
+        let notification = new GlobalNotificationModel('this is a test, please ignore', actions[this.state.index]);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {
-        return (
+        if(this.props.show) {
-            <MenuItem onClick={this.triggerNotification}>Notification</MenuItem>
+            return (
-        );
+                <MenuItem onClick={this.triggerNotification}>Notification</MenuItem>
+            );
+        } else {
+            return null;
+        }
     }
 });
 

sass/ascribe-global-notification.scss

@@ -2,6 +2,7 @@
     position: fixed;
     
     background-color: #212121;
+    color: white;
     width: 100%;
     height:3.5em;
     left:0;
@@ -18,7 +19,7 @@
     bottom: 0;
 }
 
-.ascribe-global-notification > div {
+.ascribe-global-notification > div, .ascribe-global-notification-bubble > div {
     display:table-cell;
     vertical-align: middle;
     font-size: 1.25em;
@@ -27,18 +28,39 @@
     padding-right: 3em;
 }
 
-.ascribe-global-notification-warning {
+.ascribe-global-notification-bubble > div {
-    color: #f0ad4e;
+    padding: .75em 1.5em .75em 1.5em;
+}
+
+.ascribe-global-notification-bubble {
+    position: fixed;
+    bottom: 3em;
+    right: -50em;
+
+    display:table;
+
+    height: 3.5em;
+
+    background-color: #212121;
+    border-radius: 2px;
+
+    color: white;
+
+    transition: 1s right ease;
+}
+
+.ascribe-global-notification-bubble-off {
+    right: -50em;
+}
+
+.ascribe-global-notification-bubble-on {
+    right: 3.5em;
 }
 
 .ascribe-global-notification-danger {
-    color: #d9534f;
+    background-color: #d9534f;
 }
 
 .ascribe-global-notification-success {
-    color: #5cb85c;
+    background-color: rgba(2, 182, 163, 1);
-}
-
-.ascribe-global-notification-info {
-    color: rgba(2, 182, 163, 1);
 }