Implement new egw messaging (keeps not deliberately dismissed messages)

api/js/jsapi/egw_message.js

@@ -25,7 +25,6 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd)
 	"use strict";
 
 	_app;	// not used, but required by function signature
-	var message_timer;
 	var error_reg_exp;
 	var a_href_reg = /<a href="([^"]+)">([^<]+)<\/a>/img;
 	var new_line_reg = /<\/?(p|br)\s*\/?>\n?/ig;
@@ -66,7 +65,8 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd)
 		message: function(_msg, _type, _discardID)
 		{
 			var jQuery = _wnd.jQuery;
-
+			var wrapper = jQuery('.egw_message_wrapper').length > 0 ? jQuery('.egw_message_wrapper')
+				: jQuery(_wnd.document.createElement('div')).addClass('egw_message_wrapper').css('position', 'absolute');
 			if (_msg && !_type)
 			{
 				if (typeof error_reg_exp == 'undefined') error_reg_exp = new RegExp('(error|'+egw.lang('error')+')', 'i');
@@ -80,19 +80,13 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd)
 				egw(egw.top).message(_msg, _type);
 				return;
 			}
-			// handle message display for non-framework templates, eg. idots or jerryr
+
-			if (message_timer)
-			{
-				_wnd.clearTimeout(message_timer);
-				message_timer = null;
-			}
 			var parent = jQuery('div#divAppboxHeader');
 			// popup has no app-header (idots) or it is hidden by onlyPrint class (jdots) --> use body
 			if (!parent.length || parent.hasClass('onlyPrint'))
 			{
 				parent = jQuery('body');
 			}
-			jQuery('div#egw_message').remove();
 
 			if (_msg)	// empty _msg just removes pervious message
 			{
@@ -103,6 +97,8 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd)
 					.attr('id','egw_message')
 					.text(_msg)
 					.addClass(_type+'_message')
+					.prependTo(wrapper);
+				var msg_close = jQuery(_wnd.document.createElement('span'))
 					.click(function() {
 						//check if the messeage should be discarded forever
 						if (_type == 'info' && _discardID
@@ -123,10 +119,10 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd)
 								egw.setLocalStorageItem(discardAppName,'discardedMsgs',JSON.stringify(discarded));
 							}
 						}
-						jQuery(this).remove();
+						jQuery(msg_div).remove();
 					})
-					.css('position', 'absolute');
+					.addClass('close')
-
+					.appendTo(msg_div);
 				// discard checkbox implementation
 				if (_discardID && _type === 'info')
 				{
@@ -173,7 +169,7 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd)
 					msg_div.append(msg_discard);
 				}
 
-				parent.prepend(msg_div);
+				parent.prepend(wrapper);
 
 				// replace simple a href (NO other attribute, to gard agains XSS!)
 				var matches = a_href_reg.exec(_msg);
@@ -188,12 +184,12 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd)
 					msg_div.append(jQuery(_wnd.document.createElement('span')).text(parts[1]));
 				}
 				// center the message
-				msg_div.css('right', ((jQuery(_wnd).innerWidth()-msg_div.width())/2)+'px');
+				wrapper.css('right', ((jQuery(_wnd).innerWidth()-msg_div.width())/2)+'px');
 
 				if (_type == 'success')	// clear message again after some time, if no error
 				{
-					message_timer = _wnd.setTimeout(function() {
+					_wnd.setTimeout(function() {
-						jQuery('div#egw_message').remove();
+						msg_div.remove();
 					}, 5000);
 				}
 			}

pixelegg/css/mobile.css

@@ -3309,38 +3309,71 @@ div.admin-config form > table td b {
   white-space: pre-wrap;
 }
 .warning_message {
-  border-top: 6px solid rgba(255, 204, 0, 0.9) !important;
+  border-left: 24px solid rgba(255, 204, 0, 0.5) !important;
+  background-image: url(../images/dialog_warning.png);
 }
 .error_message {
-  border-top: 6px solid rgba(204, 0, 51, 0.8) !important;
+  border-left: 24px solid rgba(204, 0, 51, 0.5) !important;
   background-image: url(../images/dialog_error.png);
-  background-position: 4px 13px;
+}
-  background-size: 12px;
+.info_message {
-  background-repeat: no-repeat;
+  background-image: url(../images/dialog_info.png);
 }
 .info_message .discard {
   float: right;
   margin-top: 4px;
 }
+.success_message {
+  background-image: url(../images/check.png);
+}
 /**
  * Message in popup
  */
-body > div#egw_message {
+body .egw_message_wrapper {
-  background-color: #E6E6E6;
+  background-color: #d9d9d9;
   right: 33%;
   box-shadow: 2px 3px 13px #666666;
   -moz-box-shadow: 2px 3px 13px #666666;
   -webkit-box-shadow: 2px 3px 13px #666666;
   -khtml-box-shadow: 2px 3px 13px #666666;
   top: 0px;
+  z-index: 100000;
+}
+body .egw_message_wrapper > div:last-child {
+  margin-bottom: 0px !important;
+}
+body .egw_message_wrapper div#egw_message {
+  background-color: #fafafa;
+  position: relative;
   padding: 13px;
   padding-left: 20px;
+  padding-right: 40px;
   min-width: 130px;
-  z-index: 100000;
+  margin: 0px auto 2px 0px;
-  margin: 0px auto;
-  max-width: 90%;
   white-space: pre-wrap;
-  border-top: 6px solid #33CC66;
+  border-left: 24px solid rgba(51, 204, 102, 0.5);
+  display: block;
+  background-position: -19px;
+  background-size: 16px;
+  background-repeat: no-repeat;
+}
+body .egw_message_wrapper div#egw_message span.close {
+  float: right;
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  background: #d0cdcdb5;
+  right: 10px;
+  top: 10px;
+  background-image: url(../images/close.svg);
+  background-size: 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+body .egw_message_wrapper div#egw_message span.close:hover {
+  filter: invert(1);
 }
 /**
  * Less-file for egroupware

pixelegg/css/monochrome.css

@@ -3298,38 +3298,71 @@ div.admin-config form > table td b {
   white-space: pre-wrap;
 }
 .warning_message {
-  border-top: 6px solid rgba(255, 204, 0, 0.9) !important;
+  border-left: 24px solid rgba(255, 204, 0, 0.5) !important;
+  background-image: url(../images/dialog_warning.png);
 }
 .error_message {
-  border-top: 6px solid rgba(204, 0, 51, 0.8) !important;
+  border-left: 24px solid rgba(204, 0, 51, 0.5) !important;
   background-image: url(../images/dialog_error.png);
-  background-position: 4px 13px;
+}
-  background-size: 12px;
+.info_message {
-  background-repeat: no-repeat;
+  background-image: url(../images/dialog_info.png);
 }
 .info_message .discard {
   float: right;
   margin-top: 4px;
 }
+.success_message {
+  background-image: url(../images/check.png);
+}
 /**
  * Message in popup
  */
-body > div#egw_message {
+body .egw_message_wrapper {
-  background-color: #E6E6E6;
+  background-color: #d9d9d9;
   right: 33%;
   box-shadow: 2px 3px 13px #666666;
   -moz-box-shadow: 2px 3px 13px #666666;
   -webkit-box-shadow: 2px 3px 13px #666666;
   -khtml-box-shadow: 2px 3px 13px #666666;
   top: 0px;
+  z-index: 100000;
+}
+body .egw_message_wrapper > div:last-child {
+  margin-bottom: 0px !important;
+}
+body .egw_message_wrapper div#egw_message {
+  background-color: #fafafa;
+  position: relative;
   padding: 13px;
   padding-left: 20px;
+  padding-right: 40px;
   min-width: 130px;
-  z-index: 100000;
+  margin: 0px auto 2px 0px;
-  margin: 0px auto;
-  max-width: 90%;
   white-space: pre-wrap;
-  border-top: 6px solid #33CC66;
+  border-left: 24px solid rgba(51, 204, 102, 0.5);
+  display: block;
+  background-position: -19px;
+  background-size: 16px;
+  background-repeat: no-repeat;
+}
+body .egw_message_wrapper div#egw_message span.close {
+  float: right;
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  background: #d0cdcdb5;
+  right: 10px;
+  top: 10px;
+  background-image: url(../images/close.svg);
+  background-size: 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+body .egw_message_wrapper div#egw_message span.close:hover {
+  filter: invert(1);
 }
 /**
  * Less-file for egroupware

pixelegg/css/pixelegg.css

@@ -3309,38 +3309,71 @@ div.admin-config form > table td b {
   white-space: pre-wrap;
 }
 .warning_message {
-  border-top: 6px solid rgba(255, 204, 0, 0.9) !important;
+  border-left: 24px solid rgba(255, 204, 0, 0.5) !important;
+  background-image: url(../images/dialog_warning.png);
 }
 .error_message {
-  border-top: 6px solid rgba(204, 0, 51, 0.8) !important;
+  border-left: 24px solid rgba(204, 0, 51, 0.5) !important;
   background-image: url(../images/dialog_error.png);
-  background-position: 4px 13px;
+}
-  background-size: 12px;
+.info_message {
-  background-repeat: no-repeat;
+  background-image: url(../images/dialog_info.png);
 }
 .info_message .discard {
   float: right;
   margin-top: 4px;
 }
+.success_message {
+  background-image: url(../images/check.png);
+}
 /**
  * Message in popup
  */
-body > div#egw_message {
+body .egw_message_wrapper {
-  background-color: #E6E6E6;
+  background-color: #d9d9d9;
   right: 33%;
   box-shadow: 2px 3px 13px #666666;
   -moz-box-shadow: 2px 3px 13px #666666;
   -webkit-box-shadow: 2px 3px 13px #666666;
   -khtml-box-shadow: 2px 3px 13px #666666;
   top: 0px;
+  z-index: 100000;
+}
+body .egw_message_wrapper > div:last-child {
+  margin-bottom: 0px !important;
+}
+body .egw_message_wrapper div#egw_message {
+  background-color: #fafafa;
+  position: relative;
   padding: 13px;
   padding-left: 20px;
+  padding-right: 40px;
   min-width: 130px;
-  z-index: 100000;
+  margin: 0px auto 2px 0px;
-  margin: 0px auto;
-  max-width: 90%;
   white-space: pre-wrap;
-  border-top: 6px solid #33CC66;
+  border-left: 24px solid rgba(51, 204, 102, 0.5);
+  display: block;
+  background-position: -19px;
+  background-size: 16px;
+  background-repeat: no-repeat;
+}
+body .egw_message_wrapper div#egw_message span.close {
+  float: right;
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  background: #d0cdcdb5;
+  right: 10px;
+  top: 10px;
+  background-image: url(../images/close.svg);
+  background-size: 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+body .egw_message_wrapper div#egw_message span.close:hover {
+  filter: invert(1);
 }
 /**
  * Less-file for egroupware

pixelegg/less/def_colors.less

@@ -17,9 +17,9 @@
  // Basic colour
 
  // Message color codes
- @egw_color_msg_error: fade(#CC0033, 80%);
+ @egw_color_msg_error: fade(#CC0033, 50%);
- @egw_color_msg_warning: fade(#FFCC00, 90%);
+ @egw_color_msg_warning: fade(#FFCC00, 50%);
- @egw_color_msg_info: #33CC66;
+ @egw_color_msg_info: fade(#33CC66, 50%);
 
  // CI EGW
 

pixelegg/less/layout_dialog.less

@@ -430,33 +430,64 @@ div.admin-config form > table {
 	white-space: pre-wrap;
 }
 .warning_message {
-	border-top: 6px solid @egw_color_msg_warning !important;
+	border-left: 24px solid @egw_color_msg_warning !important;
+	background-image: url(../images/dialog_warning.png);
 }
 .error_message {
-	border-top: 6px solid @egw_color_msg_error !important;
+	border-left: 24px solid @egw_color_msg_error !important;
 	background-image: url(../images/dialog_error.png);
-	background-position: 4px 13px;
-	background-size: 12px;
-	background-repeat: no-repeat;
 }
-.info_message .discard  {
+.info_message {
-	float:right;
+	background-image: url(../images/dialog_info.png);
-	margin-top: 4px;
+	.discard  {
+		float:right;
+		margin-top: 4px;
+	}
+}
+.success_message {
+	background-image: url(../images/check.png);
 }
 /**
  * Message in popup
  */
-body > div#egw_message {
+body .egw_message_wrapper {
-	background-color: @gray_10;
+	.background_color_15_gray;
 	right: 33%;
 	.box_shadow;
 	top: 0px;
-	padding: 13px;
-	padding-left: 20px;
-	min-width: 130px;
 	z-index: 100000;
-	margin:  0px auto;
+	& > div:last-child {
-	max-width: 90%;
+		margin-bottom: 0px !important;
-	white-space: pre-wrap;
+	}
-	border-top: 6px solid @egw_color_msg_info;
+	div#egw_message {
-}
+		.background_color_5_gray;
+		position: relative;
+		padding: 13px;
+		padding-left: 20px;
+		padding-right: 40px;
+		min-width: 130px;
+		margin:  0px auto 2px 0px;
+		white-space: pre-wrap;
+		border-left: 24px solid @egw_color_msg_info;
+		display: block;
+		background-position: -19px;
+		background-size: 16px;
+		background-repeat: no-repeat;
+		span.close {
+			float: right;
+			height: 20px;
+			width: 20px;
+			position: absolute;
+			background: #d0cdcdb5;
+			right: 10px;
+			top: 10px;
+			background-image: url(../images/close.svg);
+			background-size: 12px;
+			background-repeat: no-repeat;
+			background-position: center;
+			border-radius: 50%;
+			cursor: pointer;
+			&:hover {filter: invert(1);}
+		}
+	}
+}

pixelegg/mobile/fw_mobile.css

@@ -3320,38 +3320,71 @@ div.admin-config form > table td b {
   white-space: pre-wrap;
 }
 .warning_message {
-  border-top: 6px solid rgba(255, 204, 0, 0.9) !important;
+  border-left: 24px solid rgba(255, 204, 0, 0.5) !important;
+  background-image: url(../images/dialog_warning.png);
 }
 .error_message {
-  border-top: 6px solid rgba(204, 0, 51, 0.8) !important;
+  border-left: 24px solid rgba(204, 0, 51, 0.5) !important;
   background-image: url(../images/dialog_error.png);
-  background-position: 4px 13px;
+}
-  background-size: 12px;
+.info_message {
-  background-repeat: no-repeat;
+  background-image: url(../images/dialog_info.png);
 }
 .info_message .discard {
   float: right;
   margin-top: 4px;
 }
+.success_message {
+  background-image: url(../images/check.png);
+}
 /**
  * Message in popup
  */
-body > div#egw_message {
+body .egw_message_wrapper {
-  background-color: #E6E6E6;
+  background-color: #d9d9d9;
   right: 33%;
   box-shadow: 2px 3px 13px #666666;
   -moz-box-shadow: 2px 3px 13px #666666;
   -webkit-box-shadow: 2px 3px 13px #666666;
   -khtml-box-shadow: 2px 3px 13px #666666;
   top: 0px;
+  z-index: 100000;
+}
+body .egw_message_wrapper > div:last-child {
+  margin-bottom: 0px !important;
+}
+body .egw_message_wrapper div#egw_message {
+  background-color: #fafafa;
+  position: relative;
   padding: 13px;
   padding-left: 20px;
+  padding-right: 40px;
   min-width: 130px;
-  z-index: 100000;
+  margin: 0px auto 2px 0px;
-  margin: 0px auto;
-  max-width: 90%;
   white-space: pre-wrap;
-  border-top: 6px solid #33CC66;
+  border-left: 24px solid rgba(51, 204, 102, 0.5);
+  display: block;
+  background-position: -19px;
+  background-size: 16px;
+  background-repeat: no-repeat;
+}
+body .egw_message_wrapper div#egw_message span.close {
+  float: right;
+  height: 20px;
+  width: 20px;
+  position: absolute;
+  background: #d0cdcdb5;
+  right: 10px;
+  top: 10px;
+  background-image: url(../images/close.svg);
+  background-size: 12px;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+body .egw_message_wrapper div#egw_message span.close:hover {
+  filter: invert(1);
 }
 /**
  * Less-file for egroupware