tonyair
/
silverstripe-framework
mirror of https://github.com/silverstripe/silverstripe-framework
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
admin/css/screen.css
View File

@ -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; }

2
admin/css/screen.css.map
View File

File diff suppressed because one or more lines are too long

4
admin/javascript/LeftAndMain.js
View File

@ -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'}});
};

63
admin/scss/_style.scss
View File

@ -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;
background: url(../images/filter-icons.png) no-repeat 0 -20px;
width: 1px;
height: 1px;
overflow: hidden;
padding: 0px 0 20px 15px;
font-weight: normal;
width: 12px;
height: 16px;
color: #555;
font-size: 16px;
overflow: hidden;
top: 4px;
right: 4px;
padding: 2px;
opacity: .8;
&::before {
content: 'x';
}
&:hover {
opacity: 1;
}
}

26
admin/thirdparty/jquery-notice/jquery.notice.js vendored
View File

@ -41,21 +41,29 @@
}
// 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');
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);
noticeItemClose = jQuery('<div></div>').addClass('notice-item-close').prependTo(noticeItemInner).html('x').click(function() { jQuery.noticeRemove(noticeItemInner) });
if(!options.stay)
{
setTimeout(function()
{
jQuery.noticeRemove(noticeItemInner);
},
options.stayTime);
noticeItemInner.hover(function() {
hover = true;
}, function () {
hover = false;
});
if (!options.stay) {
setTimeout( function () {
var noticeHover = setInterval(function () {
if(!hover) {
jQuery.noticeRemove(noticeItemInner);
clearInterval(noticeHover);
}
}, 1000);
}, options.stayTime);
}
},