refs #4179 handle options like title, noclear, message, ...

plugins/CoreHome/javascripts/notification.js

@@ -12,8 +12,25 @@
     var Notification = function () {
     };
 
-    Notification.prototype.notify = function (title, message, options) {
-        var template = '<div class="notification notification-' + options.context + ' ">' + options.type + '</div>';
+    Notification.prototype.show = function (message, options) {
+        if (!message) {
+            return;
+        }
+
+        var template = '<div class="notification notification-' + options.context + ' ">';
+
+        if (!options.noclear) {
+
+            template += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
+        }
+
+        if (options.title) {
+            template += '<strong>Warning!</strong> ';
+        }
+
+        template += message;
+
+        template += '</div>';
         $(template).appendTo('#notificationContainer');
     };
 

plugins/CoreHome/javascripts/notificationparser.js

@@ -17,7 +17,7 @@ $(document).ready((function ($, require) {
             var attributes = $notificationNode.data();
 
             var notification = new UI.Notification();
-            notification.notify(attributes.title, attributes.message, attributes);
+            notification.show(attributes.message, attributes);
         });
 
     }

plugins/CoreHome/stylesheets/notification.less

@@ -4,7 +4,7 @@
   float: none;
 
   padding: 8px 35px 8px 14px;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   background-color: #fcf8e3;
   border: 1px solid #fbeed5;
@@ -22,6 +22,24 @@
     line-height: 20px;
   }
 
+  button.close {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+  }
+  .close {
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 20px;
+    color: #000000;
+    text-shadow: 0 1px 0 #ffffff;
+    opacity: 0.2;
+    filter: alpha(opacity=20);
+  }
+
   &.notification-success {
     background-color: #dff0d8;
     border-color: #d6e9c6;