From: Alexander Moisseev <moiseev@mezonplus.ru>
Date: Sat, 8 Apr 2017 16:03:53 +0000 (+0300)
Subject: [WebUI] Display multiple alerts at once
X-Git-Tag: 1.5.6~36^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F1584%2Fhead;p=thirdparty%2Frspamd.git

[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 3a4dd26c08..91f39652b2 100644
--- 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 c72cbe4c1a..4247de07a7 100644
--- 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 dbd4c33b98..dc58f53bd1 100644
--- 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