Improve showing notification banner (#4023)

* bad notification show double time of good notification

* stop timer, when mouse is over the notification

* after leaving the mouse hover close the notification in 1 second

* onlick to eddEventListener

* code fix

* fixed code

* more code fixes

* set default in template.css

* theme alternative dark

* theme ansum

* theme Blue lagoon

* theme dark

* theme flat

* theme Origine compact

* theme Origine

* theme Pafat

* theme Screwdriver

* theme Swage

* fixed RTL error

* fix css code

* mouseleave = 3sec.

p/scripts/main.js

@@ -1327,8 +1327,12 @@ function openNotification(msg, status) {
 	notification.querySelector('.msg').innerHTML = msg;
 	notification.className = 'notification';
 	notification.classList.add(status);
-
-	notification_interval = setTimeout(closeNotification, 4000);
+	if (status == 'good') {
+		notification_interval = setTimeout(closeNotification, 4000);
+	} else {
+		// no status or f.e. status = 'bad', give some more time to read
+		notification_interval = setTimeout(closeNotification, 8000);
+	}
 }
 
 function closeNotification() {
@@ -1340,14 +1344,28 @@ function closeNotification() {
 function init_notifications() {
 	notification = document.getElementById('notification');
 
-	notification.querySelector('a.close').onclick = function () {
+	notification.querySelector('a.close').addEventListener('click', function (ev) {
 		closeNotification();
+		ev.preventDefault();
 		return false;
-	};
+	});
+
+	notification.addEventListener('mouseenter', function () {
+		clearInterval(notification_interval);
+	});
+
+	notification.addEventListener('mouseleave', function () {
+		notification_interval = setTimeout(closeNotification, 3000);
+	});
 
 	if (notification.querySelector('.msg').innerHTML.length > 0) {
 		notification_working = true;
-		notification_interval = setTimeout(closeNotification, 4000);
+		if (notification.classList.contains('good')) {
+			notification_interval = setTimeout(closeNotification, 4000);
+		} else {
+			// no status or f.e. status = 'bad', give some more time to read
+			notification_interval = setTimeout(closeNotification, 8000);
+		}
 	}
 }
 // </notification>

p/themes/Alternative-Dark/adark.css

@@ -865,13 +865,11 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
@@ -888,6 +886,10 @@ a.btn {
 	border: 1px solid #ecc;
 }
 
+.notification a {
+	color: #0062be;
+}
+
 .notification a.close {
 	padding: 0 15px;
 	line-height: 3em;

p/themes/Alternative-Dark/adark.rtl.css

@@ -865,13 +865,11 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
@@ -888,6 +886,10 @@ a.btn {
 	border: 1px solid #ecc;
 }
 
+.notification a {
+	color: #0062be;
+}
+
 .notification a.close {
 	padding: 0 15px;
 	line-height: 3em;

p/themes/Ansum/_layout.scss

@@ -411,10 +411,13 @@
 	left: 0;
 	right: 0;
 	text-align: center;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 
+	a {
+		color: #000;
+	}
+
 	.msg {
 		display: inline-block;
 		font-size: 1rem;

p/themes/Ansum/ansum.css

@@ -1091,10 +1091,12 @@ form th {
 	left: 0;
 	right: 0;
 	text-align: center;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
+.notification a {
+	color: #000;
+}
 .notification .msg {
 	display: inline-block;
 	font-size: 1rem;

p/themes/Ansum/ansum.rtl.css

@@ -1091,10 +1091,12 @@ form th {
 	right: 0;
 	left: 0;
 	text-align: center;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
+.notification a {
+	color: #000;
+}
 .notification .msg {
 	display: inline-block;
 	font-size: 1rem;

p/themes/BlueLagoon/BlueLagoon.css

@@ -1021,7 +1021,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	background: #222;
 	color: #fff;
 	font-size: 0.9em;
@@ -1030,7 +1029,6 @@ a.btn {
 	box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	position: absolute;
 	top: 0;
 	z-index: 10;
@@ -1051,6 +1049,14 @@ a.btn {
 	line-height: 3em;
 }
 
+.notification a.close:hover {
+	background: rgba(255,255,255,0.2);
+}
+
+.notification a.close:hover .icon {
+	filter: brightness(2);
+}
+
 .notification#actualizeProgress {
 	line-height: 2em;
 }

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -1021,7 +1021,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	background: #222;
 	color: #fff;
 	font-size: 0.9em;
@@ -1030,7 +1029,6 @@ a.btn {
 	box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	position: absolute;
 	top: 0;
 	z-index: 10;
@@ -1051,6 +1049,14 @@ a.btn {
 	line-height: 3em;
 }
 
+.notification a.close:hover {
+	background: rgba(255,255,255,0.2);
+}
+
+.notification a.close:hover .icon {
+	filter: brightness(2);
+}
+
 .notification#actualizeProgress {
 	line-height: 2em;
 }

p/themes/Dark/dark.css

@@ -887,7 +887,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	background: #111;
 	color: #c95;
 	font-size: 0.9em;
@@ -896,7 +895,6 @@ a.btn {
 	box-shadow: 0 0 5px #666;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }

p/themes/Dark/dark.rtl.css

@@ -887,7 +887,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	background: #111;
 	color: #c95;
 	font-size: 0.9em;
@@ -896,7 +895,6 @@ a.btn {
 	box-shadow: 0 0 5px #666;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }

p/themes/Flat/flat.css

@@ -900,7 +900,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	background: #ddd;
 	color: #666;
 	font-size: 0.9em;
@@ -908,7 +907,6 @@ a.btn {
 	border-radius: 3px;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
@@ -923,6 +921,10 @@ a.btn {
 	color: #fff;
 }
 
+.notification a {
+	color: #000;
+}
+
 .notification a.close {
 	padding: 0 15px;
 	line-height: 3em;

p/themes/Flat/flat.rtl.css

@@ -900,7 +900,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	background: #ddd;
 	color: #666;
 	font-size: 0.9em;
@@ -908,7 +907,6 @@ a.btn {
 	border-radius: 3px;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
@@ -923,6 +921,10 @@ a.btn {
 	color: #fff;
 }
 
+.notification a {
+	color: #000;
+}
+
 .notification a.close {
 	padding: 0 15px;
 	line-height: 3em;

p/themes/Origine-compact/origine-compact.css

@@ -978,14 +978,12 @@ a.btn,
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }

p/themes/Origine-compact/origine-compact.rtl.css

@@ -978,14 +978,12 @@ a.btn,
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }

p/themes/Origine/origine.css

@@ -906,14 +906,12 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }

p/themes/Origine/origine.rtl.css

@@ -906,14 +906,12 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }

p/themes/Pafat/pafat.css

@@ -895,14 +895,12 @@ a.signin {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }

p/themes/Pafat/pafat.rtl.css

@@ -895,14 +895,12 @@ a.signin {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }

p/themes/Screwdriver/screwdriver.css

@@ -990,7 +990,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	background: #222;
 	color: #fff;
 	font-size: 0.9em;
@@ -999,7 +998,6 @@ a.btn {
 	box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	position: absolute;
 	top: 0;
 	z-index: 10;

p/themes/Screwdriver/screwdriver.rtl.css

@@ -990,7 +990,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	background: #222;
 	color: #fff;
 	font-size: 0.9em;
@@ -999,7 +998,6 @@ a.btn {
 	box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	position: absolute;
 	top: 0;
 	z-index: 10;

p/themes/Swage/swage.css

@@ -781,8 +781,7 @@ form th {
 	left: 0;
 	top: auto;
 }
-.notification.good,
-.notification .bad {
+.notification.good, .notification.bad {
 	color: #fcfcfc;
 }
 .notification.good {

p/themes/Swage/swage.rtl.css

@@ -781,8 +781,7 @@ form th {
 	right: 0;
 	top: auto;
 }
-.notification.good,
-.notification .bad {
+.notification.good, .notification.bad {
 	color: #fcfcfc;
 }
 .notification.good {

p/themes/Swage/swage.scss

@@ -985,7 +985,7 @@ form {
 	@extend %aside-width;
 
 	&.good,
-	.bad {
+	&.bad {
 		color: $color_light;
 	}
 

p/themes/base-theme/template.css

@@ -917,6 +917,7 @@ br {
 
 /*=== Notification and actualize notification */
 .notification {
+	padding: 10px 50px 10px 10px;
 	position: absolute;
 	top: 1em;
 	left: 25%; right: 25%;
@@ -924,6 +925,7 @@ br {
 	background: #fff;
 	border: 1px solid #aaa;
 	opacity: 1;
+	line-height: 2;
 	visibility: visible;
 	transition: visibility 0s, opacity .3s linear;
 }
@@ -940,6 +942,14 @@ br {
 	display: inline-block;
 }
 
+.notification a.close:hover {
+	background: rgba(10,10,10,0.05);
+}
+
+.notification a.close:hover .icon {
+	filter: brightness(2);
+}
+
 #actualizeProgress {
 	position: fixed;
 }

p/themes/base-theme/template.rtl.css

@@ -917,6 +917,7 @@ br {
 
 /*=== Notification and actualize notification */
 .notification {
+	padding: 10px 10px 10px 50px;
 	position: absolute;
 	top: 1em;
 	right: 25%; left: 25%;
@@ -924,6 +925,7 @@ br {
 	background: #fff;
 	border: 1px solid #aaa;
 	opacity: 1;
+	line-height: 2;
 	visibility: visible;
 	transition: visibility 0s, opacity .3s linear;
 }
@@ -940,6 +942,14 @@ br {
 	display: inline-block;
 }
 
+.notification a.close:hover {
+	background: rgba(10,10,10,0.05);
+}
+
+.notification a.close:hover .icon {
+	filter: brightness(2);
+}
+
 #actualizeProgress {
 	position: fixed;
 }