Updated Branches: refs/heads/master 78b1ac412 -> 1a7872d18
Notifications: New alert style -Move corner alert to pop up under notification area, intead of in the window corner, for better visibility -Give alert box tooltip appearance Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/1a7872d1 Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/1a7872d1 Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/1a7872d1 Branch: refs/heads/master Commit: 1a7872d18929aacb74d76f60bc7e2bc1ded31665 Parents: 7074196 Author: Brian Federle <brian.fede...@citrix.com> Authored: Thu Oct 31 15:54:29 2013 -0700 Committer: Brian Federle <brian.fede...@citrix.com> Committed: Thu Oct 31 15:55:26 2013 -0700 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 55 ++++++++++++++++++---------- ui/images/sprites.png | Bin 193277 -> 207810 bytes ui/scripts/ui/widgets/notifications.js | 14 +++---- 3 files changed, 43 insertions(+), 26 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/1a7872d1/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 9ccf553..abd112a 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -1104,58 +1104,75 @@ div.notification-box .button.close:hover { /*** Corner alert*/ div.notification.corner-alert { - background: #EBE8E8; + background: #FFFFFF; + background: rgba(255, 255, 255, 0.95); + /*+box-shadow:0px 2px 10px #000000;*/ + -moz-box-shadow: 0px 2px 10px #000000; + -webkit-box-shadow: 0px 2px 10px #000000; + -o-box-shadow: 0px 2px 10px #000000; + box-shadow: 0px 2px 10px #000000; width: 300px; - height: 70px; + height: 75px; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; position: absolute; text-indent: 10px; + padding: 7px 7px 0; font-size: 12px; - border: 1px solid #8F8A8A; /*+opacity:70%;*/ filter: alpha(opacity=70); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); -moz-opacity: 0.7; opacity: 0.7; - overflow: hidden; z-index: 100; - cursor: pointer; + margin: 38px 0 0 -56px; +} + +div.notification.corner-alert .top-arrow { + background: url(../images/sprites.png) no-repeat -580px -1353px; + width: 36px; + height: 15px; + position: absolute; + top: -15px; + left: 50px; } div.notification.corner-alert div.title { width: 100%; height: 33px; - background: url(../images/bg-dialog-header.png); color: #FFFFFF; } div.notification.corner-alert div.title span { - background: url(../images/icons.png) no-repeat -3px -225px; /*+placement:shift 0px 10px;*/ position: relative; left: 0px; top: 10px; - /*+text-shadow:0px 1px 1px #3A3A3A;*/ - -moz-text-shadow: 0px 1px 1px #3A3A3A; - -webkit-text-shadow: 0px 1px 1px #3A3A3A; - -o-text-shadow: 0px 1px 1px #3A3A3A; - text-shadow: 0px 1px 1px #3A3A3A; + color: #6D6D6D; padding: 3px 0 12px 24px; - font-weight: bold; + font-weight: 100; + font-size: 14px; + padding-left: 33px; + background: url(../images/icons.png) no-repeat 3px -223px; } div.notification.corner-alert.error div.title span { - background: url(../images/icons.png) no-repeat -4px -190px; + background: url(../images/icons.png) no-repeat -2px -190px; } div.notification.corner-alert div.message span { position: relative; padding-top: 6px; + font-size: 14px; display: block; -} - -div.notification.corner-alert:hover div.message span { - text-decoration: underline; - color: #5FAAF7; + color: #000000; + /*+placement:shift 17px -2px;*/ + position: relative; + left: 17px; + top: -2px; } /*Tooltips*/ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/1a7872d1/ui/images/sprites.png ---------------------------------------------------------------------- diff --git a/ui/images/sprites.png b/ui/images/sprites.png index f3c8226..778eda2 100644 Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/1a7872d1/ui/scripts/ui/widgets/notifications.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/notifications.js b/ui/scripts/ui/widgets/notifications.js index 9b7fc4c..68a054c 100644 --- a/ui/scripts/ui/widgets/notifications.js +++ b/ui/scripts/ui/widgets/notifications.js @@ -23,11 +23,12 @@ cornerAlert: function(args, options) { if (!options) options = {}; - var $container = $('#container'); // Put in main container box + var $container = $('#main-area'); // Put in main container box var $cornerAlert = $('<div>').addClass('notification corner-alert') .hide() - .appendTo($container) + .appendTo('html body') .append( + $('<div>').addClass('top-arrow'), $('<div>').addClass('title').append( $('<span>').html( options.error ? options.error : _l('label.task.completed') @@ -49,19 +50,18 @@ .css({ opacity: 0, position: 'absolute', - top: $($container).height(), - left: $($container).width() - $cornerAlert.width() + top: $('#header .notifications').offset().top, + left: $('#header .notifications').offset().left }) .animate({ - opacity: 1, - top: $container.height() - $cornerAlert.height() + opacity: 1 }, { complete: function() { setTimeout(function() { $cornerAlert.fadeOut('fast', function() { $cornerAlert.remove(); }); - }, 5000); + }, 3000); } }) .show();
