update cms notifications

New style - text now wraps instead of overflowing
Now stay on screen longer
Hovering causes notification to stay on screen

admin/css/screen.css

@@ -660,9 +660,16 @@ body.cms { overflow: hidden; }
 .cms-edit-form .message { margin: 16px; }
 .cms-edit-form .ui-tabs-panel .message { margin: 16px 0; }
 
-.notice-item { border: 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-family: inherit; font-size: inherit; padding: 8px 10px 8px 10px; }
+.notice-item { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-family: inherit; font-size: inherit; padding: 6px 24px 8px 10px; word-wrap: break-word; min-height: 60px; height: auto; border: 0; border-left: 3px solid; color: #666; left: 300px; background: #fff; }
+.notice-item.success, .notice-item.good, .notice-item.green { border-color: #72c34b; }
+.notice-item.notice, .notice-item.info, .notice-item.blue { border-color: #93CDE8; }
+.notice-item.warning, .notice-item.caution, .notice-item.yellow { border-color: #E9D104; }
+.notice-item.bad, .notice-item.error, .notice-item.red { border-color: #e68288; }
+.notice-item p { margin-bottom: 0; }
 
-.notice-item-close { color: #333333; background: url(../images/filter-icons.png) no-repeat 0 -20px; width: 1px; height: 1px; overflow: hidden; padding: 0px 0 20px 15px; }
+.notice-item-close { font-weight: normal; width: 12px; height: 16px; color: #555; font-size: 16px; overflow: hidden; top: 4px; right: 4px; padding: 2px; opacity: .8; }
+.notice-item-close::before { content: 'x'; }
+.notice-item-close:hover { opacity: 1; }
 
 /** -------------------------------------------- Page icons -------------------------------------------- */
 .page-icon, a .jstree-pageicon { display: block; width: 16px; height: 16px; background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat; }

admin/javascript/LeftAndMain.js

@@ -1508,9 +1508,9 @@ jQuery.noConflict();
 
 var statusMessage = function(text, type) {
 	text = jQuery('<div/>').text(text).html(); // Escape HTML entities in text
-	jQuery.noticeAdd({text: text, type: type});
+	jQuery.noticeAdd({text: text, type: type, stayTime: 5000, inEffect: {left: '0', opacity: 'show'}});
 };
 
 var errorMessage = function(text) {
-	jQuery.noticeAdd({text: text, type: 'error'});
+	jQuery.noticeAdd({text: text, type: 'error', stayTime: 5000, inEffect: {left: '0', opacity: 'show'}});
 };

admin/scss/_style.scss

@@ -800,20 +800,67 @@ body.cms {
 
 
 .notice-item {
-	border: 0;   
 	@include border-radius(3px);
 	font-family: inherit; 
 	font-size: inherit; 
-	padding: 8px 10px 8px 10px; 
+	padding: 6px 24px 8px 10px;
+	word-wrap: break-word;
+	min-height: 60px;
+	height: auto;
+	border: 0;
+	border-left: 3px solid;
+	color: #666;
+	left: 300px;
+	background: #fff;
+
+	&.success,
+	&.good,
+	&.green {
+		border-color: $color-good;
+	}
+
+	&.notice,
+	&.info,
+	&.blue {
+		border-color: $color-notice;
+	}
+
+	&.warning,
+	&.caution,
+	&.yellow {
+		border-color: $color-warning;
+	}
+
+	&.bad,
+	&.error,
+	&.red {
+		border-color: $color-error;
+	}
+
+	p {
+		margin-bottom: 0;
+	}
 }
 
 .notice-item-close {
-	color: #333333; 
+	font-weight: normal;
-	background: url(../images/filter-icons.png) no-repeat 0 -20px; 
+	width: 12px;
-	width: 1px; 
+	height: 16px;
-	height: 1px; 
+	color: #555; 
+	font-size: 16px;
 	overflow: hidden;
-	padding: 0px 0 20px 15px;
+	top: 4px;
+	right: 4px;
+	padding: 2px;
+	opacity: .8;
+
+	&::before {
+		content: 'x';
+	}
+
+	&:hover {
+		opacity: 1;
+	}
 }
 
 

admin/thirdparty/jquery-notice/jquery.notice.js

@@ -41,7 +41,7 @@
 			}
 			
 			// declare varaibles
-			var options, noticeWrapAll, noticeItemOuter, noticeItemInner, noticeItemClose;
+			var options, noticeWrapAll, noticeItemOuter, noticeItemInner, noticeItemClose, hover = false;
 			
 			options 		= jQuery.extend({}, defaults, options);
 			noticeWrapAll	= (!jQuery('.notice-wrap').length) ? jQuery('<div></div>').addClass('notice-wrap').appendTo('body') : jQuery('.notice-wrap');
@@ -49,13 +49,21 @@
 			noticeItemInner	= jQuery('<div></div>').hide().addClass('notice-item ' + options.type).appendTo(noticeWrapAll).html('<p>'+options.text+'</p>').animate(options.inEffect, options.inEffectDuration).wrap(noticeItemOuter);
 			noticeItemClose	= jQuery('<div></div>').addClass('notice-item-close').prependTo(noticeItemInner).html('x').click(function() { jQuery.noticeRemove(noticeItemInner) });
 			
-			if(!options.stay)
+			noticeItemInner.hover(function() {
-			{
+				hover = true;
-				setTimeout(function()
+			}, function () {
-				{
+				hover = false;
+			});
+
+			if (!options.stay) {
+				setTimeout( function () {
+					var noticeHover = setInterval(function () {
+						if(!hover) {
 							jQuery.noticeRemove(noticeItemInner);
-				},
+							clearInterval(noticeHover);
-				options.stayTime);
+						}
+					}, 1000);
+				}, options.stayTime);
 			}
 		},