[WebUI] Display multiple alerts at once

Now user have a chance to see all thrown alerts not just the latest one.

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 3a4dd26c089cfe6e9a9570b2ba6f82eb8e7a5c8b..91f39652b23377910cf9546b51d071e300131d2c 100644 (file)
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -416,14 +416,19 @@ td.maps-cell {
                font-size:12px;
                text-shadow:0 1px 0 #FFFFFF;
                }
-.alert {
+
+.notification-area {
        position:fixed;
        z-index:1050;
-       top:41px;
-       right:0;
+       top:44px;
        left:0;
+       right:0;
+       padding:8px;
+}
+.alert {
+       position:relative;
        padding:8px 0 8px;
-       margin:0 0 10px;
+       margin:0 0 4px;
        text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
        background-color:#fcf8e3;
        border-bottom:1px solid #fbeed5;

diff --git a/interface/index.html b/interface/index.html
index c72cbe4c1acffc443303da1526d0c15a755a2ed9..4247de07a76affa4a61ea19a280ae9ca1ece5177 100644 (file)
--- a/interface/index.html
+++ b/interface/index.html
@@ -40,6 +40,8 @@
        </div>
 </nav>
 
+<div class="notification-area"></div>
+
 <div id="mainUI" style="display:none">
 
        <div class="container-fluid">

diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index dbd4c33b98c13bcb690c26d13fe1d712d875acaf..dc58f53bd1e68555f84ea08711181fba92d4ffd0 100644 (file)
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -164,18 +164,17 @@ define(['jquery', 'd3pie', 'visibility', 'app/stats', 'app/graph', 'app/config',
             $('#progress').hide();
         }
 
-        function alertMessage (alertState, alertText) {
-            if ($('.alert').is(':visible')) {
-                $(alert).hide().remove();
-            }
-            var alert = $('<div class="alert ' + alertState + '" style="display:none">' +
-                    '<button type="button" class="close" data-dismiss="alert" tutle="Dismiss">&times;</button>' +
-                    '<strong>' + alertText + '</strong>')
-                .prependTo('body');
-            $(alert).show();
+        function alertMessage(alertClass, alertText) {
+            const a = $('<div class="alert ' + alertClass + ' alert-dismissible fade in show">' +
+                '<button type="button" class="close" data-dismiss="alert" title="Dismiss">&times;</button>' +
+                '<strong>' + alertText + '</strong>');
+            $('.notification-area').append(a);
+
             setTimeout(function () {
-                $(alert).remove();
-            }, 3600);
+                $(a).fadeTo(500, 0).slideUp(500, function () {
+                    $(this).alert('close');
+                });
+            }, 5000);
         }
 
         // Public functions