-Add growl like notifications.

bower.json

@@ -22,7 +22,9 @@
     "stf-graphics": "git@ghe.amb.ca.local:stf/stf-graphics.git",
     "angular-bootstrap": "~0.10.0",
     "angular-dialog-service": "~3.1.0",
-    "ng-file-upload": "~1.2.9"
+    "ng-file-upload": "~1.2.9",
+    "angular-animate": "~1.2.15",
+    "angular-growl-v2": "JanStevens/angular-growl-2#~0.5.3"
   },
   "private": true,
   "resolutions": {

res/app/app.js

@@ -1,6 +1,7 @@
 require('angular')
 require('angular-route')
 
+
 require('angular-gettext')
 require('ng-file-upload')
 

res/app/components/stf/common-ui/index.js

@@ -2,5 +2,6 @@ module.exports = angular.module('stf/common-ui', [
   require('./clear-button').name,
   require('./filter-button').name,
   require('./nothing-to-show').name,
-  require('./table').name
+  require('./table').name,
+  require('./notifications').name
 ])

res/app/components/stf/common-ui/notifications/growl.css

@@ -0,0 +1,26 @@
+.growl {
+  position: fixed;
+  top: 60px;
+  right: 15px;
+  float: right;
+  width: 250px;
+  z-index: 9999;
+}
+
+.growl-item.ng-enter,
+.growl-item.ng-leave {
+  -webkit-transition: 0.3s linear all;
+  -moz-transition: 0.3s linear all;
+  -o-transition: 0.3s linear all;
+  transition: 0.3s linear all;
+}
+
+.growl-item.ng-enter,
+.growl-item.ng-leave.ng-leave-active {
+  opacity: 0;
+}
+
+.growl-item.ng-leave,
+.growl-item.ng-enter.ng-enter-active {
+  opacity: 1;
+}

res/app/components/stf/common-ui/notifications/index.js

@@ -0,0 +1,9 @@
+require('angular-animate')
+//require('angular-growl-v2/build/angular-growl.min.css')
+require('./growl.css')
+require('angular-growl-v2/build/angular-growl.js')
+
+module.exports = angular.module('stf/common-ui/notifications', [
+  'ngAnimate',
+  'angular-growl'
+])

res/app/layout/index.js

@@ -15,6 +15,7 @@ require('./stf-styles.css')
 require('./small.css')
 
 module.exports = angular.module('layout', [
-  'fa.directive.borderLayout'
+  'fa.directive.borderLayout',
+  require('stf/common-ui').name
 ])
   .controller('LayoutCtrl', require('./layout-controller'))

res/app/views/index.jade

@@ -10,6 +10,7 @@ html
           div(ng-include='"menu.jade"')
         div(pane, pane-anchor='center').fill-height
           socket-state
+          div(growl)
           div(ng-view).fill-height
 
     script(src='/static/build/bundle.js')

webpack.config.js

@@ -18,6 +18,8 @@ module.exports = {
     ]
   , alias: {
       'angular-bootstrap': 'angular-bootstrap/ui-bootstrap-tpls'
+    , 'angular-growl': 'angular-growl-v2/build/angular-growl.js'
+    , 'angular-growl-css': 'angular-growl-v2/build/angular-growl.min.css'
     , 'localforage': 'localforage/dist/localforage.js'
     , 'socket.io': 'socket.io-client/dist/socket.io'
     , 'oboe': 'oboe/dist/oboe-browser'
@@ -45,6 +47,8 @@ module.exports = {
     , { test: /\.html/, loader: 'html-loader' }
     , { test: /angular\.js/, loader: 'exports?angular'}
     , { test: /angular-route\.js/, loader: 'imports?angular=angular'}
+    , { test: /angular-animate\.js/, loader: 'imports?angular=angular'}
+    , { test: /angular-growl\.js/, loader: 'imports?angular=angular'}
     , { test: /oboe-browser\.js/, loader: 'imports?define=>false!exports?oboe'}
     , { test: /localforage\.js/, loader: 'script'}
     , { test: /ui-bootstrap-tpls\.js/, loader: 'script'}