feat(notification): new module (#914)

* Notifications

* Notification: global notification fired by `notify(...)`

* Notification: Bootstrap colors.

* Notification: Simplified version. Usage example.

package.json

@@ -78,6 +78,7 @@
     "react-dom": "^15.0.0",
     "react-intl": "^2.0.1",
     "react-key-handler": "^0.2.0",
+    "react-notify": "^2.0.1",
     "react-redux": "^4.4.0",
     "react-router": "^2.0.0",
     "react-router-redux": "^4.0.0",

src/common/notification.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import ReactNotify from 'react-notify'
+
+let instance
+
+export let error
+export let info
+export let success
+
+export class Notification extends Component {
+  constructor () {
+    super()
+
+    if (instance) {
+      throw new Error('Notification is a singleton!')
+    }
+    instance = this
+  }
+
+  render () {
+    return <ReactNotify ref={notification => {
+      error = (title, body) => notification.error(title, body, 3e3)
+      info = (title, body) => notification.info(title, body, 3e3)
+      success = (title, body) => notification.success(title, body, 3e3)
+    }} />
+  }
+}
+
+export { info as default }
+
+/* Example:
+
+import info, { success, error } from 'notification'
+
+<button onClick={() => info('Info', 'This is an info notification')}>
+  Info notification
+</button>
+
+<button onClick={() => success('Success', 'This is a success notification')}>
+  Success notification
+</button>
+
+<button onClick={() => error('Error', 'This is an error notification')}>
+  Error notification
+</button>
+*/

src/index.scss

@@ -924,16 +924,46 @@ $select-input-height: 40px; // Bootstrap input height
   text-align: center;
 }
 
-// Makes dropdown menus appear on hover instead of click
-.dropdown:hover .dropdown-menu {
-  display: block;
-  opacity: 1;
-  visibility: visible;
-  transition-delay: 0s;
+// NOTIFICATIONS STYLE =========================================================
+
+.notify-container {
+  align-content: flex-start;
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  position: absolute;
+  right: 10px;
+  top: 10px;
 }
-.dropdown .dropdown-menu {
-  display: block;
-  opacity: 0;
-  visibility: hidden;
-  transition-delay: .1s;
+
+.notify-item {
+  border-radius: 5px;
+  border: 1px solid black;
+  margin: 5px 10px;
+  width: 250px;
+  &.success {
+    background: $alert-success-bg;
+    border-color: $alert-success-border;
+    color: $alert-success-text;
+  }
+  &.info {
+    background: $alert-info-bg;
+    border-color: $alert-info-border;
+    color: $alert-info-text;
+  }
+  &.error {
+    background: $alert-danger-bg;
+    border-color: $alert-danger-border;
+    color: $alert-danger-text;
+  }
+}
+
+.notify-item > p {
+  margin: 10px;
+}
+
+.notify-title {
+  font-weight: 700;
 }

src/xo-app/index.js

@@ -19,6 +19,7 @@ import Host from './host'
 import HostHeader from './host/header'
 import Menu from './menu'
 import New from './new'
+import { Notification } from 'notification'
 import Settings from './settings'
 import Vm from './vm'
 import VmHeader from './vm/header'
@@ -58,6 +59,7 @@ export default class XoApp extends Component {
 
     return <IntlProvider>
       <div className='xo-main'>
+        <Notification />
         <Menu ref='menu' />
         <div className='xo-body' ref='body'>
           {children