update cms notifications

New style - text now wraps instead of overflowing
Now stay on screen longer
Hovering causes notification to stay on screen
This commit is contained in:
scott1702 2015-09-02 10:12:45 +12:00
parent b28729918b
commit 9cbb235daa
5 changed files with 84 additions and 22 deletions

View File

@ -660,9 +660,16 @@ body.cms { overflow: hidden; }
.cms-edit-form .message { margin: 16px; } .cms-edit-form .message { margin: 16px; }
.cms-edit-form .ui-tabs-panel .message { margin: 16px 0; } .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 icons -------------------------------------------- */
.page-icon, a .jstree-pageicon { display: block; width: 16px; height: 16px; background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat; } .page-icon, a .jstree-pageicon { display: block; width: 16px; height: 16px; background: transparent url(../images/sitetree_ss_pageclass_icons_default.png) no-repeat; }

File diff suppressed because one or more lines are too long

View File

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

View File

@ -800,20 +800,67 @@ body.cms {
.notice-item { .notice-item {
border: 0;
@include border-radius(3px); @include border-radius(3px);
font-family: inherit; font-family: inherit;
font-size: 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 { .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;
overflow: hidden; font-size: 16px;
padding: 0px 0 20px 15px; overflow: hidden;
top: 4px;
right: 4px;
padding: 2px;
opacity: .8;
&::before {
content: 'x';
}
&:hover {
opacity: 1;
}
} }

View File

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