From fa5125be25c3e63c83e30a0a2c6766ab2a9a5ae6 Mon Sep 17 00:00:00 2001
From: Alexander Moisseev <moiseev@mezonplus.ru>
Date: Sat, 8 Apr 2017 19:03:53 +0300
Subject: [PATCH] [WebUI] Display multiple alerts at once

Now user have a chance to see all thrown alerts not just the latest one.
---
 interface/css/rspamd.css   | 13 +++++++++----
 interface/index.html       |  2 ++
 interface/js/app/rspamd.js | 21 ++++++++++-----------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 3a4dd26c0..91f39652b 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 c72cbe4c1..4247de07a 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 dbd4c33b9..dc58f53bd 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
-- 
2.39.5