improved notifications, now with animations, in center and show up properly in the dialogs

src/public/javascripts/services/info.js

@@ -5,13 +5,9 @@ function showMessage(message) {
     console.debug(utils.now(), "message: ", message);
 
     $.notify({
-        // options
+        icon: 'jam jam-check',
         message: message
-    }, {
+    }, getNotifySettings('success', 3000));
-        // options
-        type: 'success',
-        delay: 3000
-    });
 }
 
 function showAndLogError(message, delay = 10000) {
@@ -25,12 +21,28 @@ function showError(message, delay = 10000) {
 
     $.notify({
         // options
+        icon: 'jam jam-alert',
         message: message
-    }, {
+    }, getNotifySettings('danger', delay));
-        // options
+}
-        type: 'danger',
+
+function getNotifySettings(type, delay) {
+    return {
+        element: (glob.activeDialog && glob.activeDialog.hasClass("show"))
+            ? glob.activeDialog.find('.modal-header')[0]
+            : 'body',
+        type: type,
+        z_index: 1031,
+        placement: {
+            from: "top",
+            align: "center"
+        },
+        animate: {
+            enter: 'animated fadeInDown',
+            exit: 'animated fadeOutUp'
+        },
         delay: delay
-    });
+    };
 }
 
 function throwError(message) {

src/public/stylesheets/style.css

@@ -634,4 +634,45 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 /* this is because bootstrap (?) sets code color to red for some reason */
 code {
     color: inherit !important;
+}
+
+.animated {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInDown {
+    animation-name: fadeInDown;
+}
+
+@keyframes fadeOutUp {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+.fadeOutUp {
+    animation-name: fadeOutUp;
+}
+
+div[data-notify="container"] {
+    text-align: center;
 }