Add configure VPC tooltip and links
Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/683b7d78 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/683b7d78 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/683b7d78 Branch: refs/heads/master Commit: 683b7d78222e208c3ed583c7411eba9b4b526f6c Parents: f026387 Author: Brian Federle <[email protected]> Authored: Fri Jun 29 13:11:43 2012 -0700 Committer: Brian Federle <[email protected]> Committed: Fri Jun 29 13:13:59 2012 -0700 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 80 ++++++++++++++++++++++++++++++++++--- ui/images/sprites.png | Bin 178421 -> 178569 bytes ui/scripts/ui-custom/vpc.js | 68 ++++++++++++++++++++++++++++++- 3 files changed, 138 insertions(+), 10 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/683b7d78/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 928c4e1..232784d 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -2837,7 +2837,7 @@ Dialogs*/ -webkit-box-shadow: 0px -4px 15px #4C4A4A; -o-box-shadow: 0px -4px 15px #4C4A4A; box-shadow: 0px -4px 15px #4C4A4A; - position:absolute; + position: absolute; } .ui-dialog .ui-widget-content { @@ -8840,27 +8840,93 @@ div.panel.ui-dialog div.list-view div.fixed-header { /*VPC / vApps*/ .vpc-chart { width: 100%; - height: 93%; + height: 94%; overflow: auto; position: relative; margin: 30px 0 0; + background: #FFFFFF 0px 24px; } .vpc-chart .vpc-title { - font-size: 24px; - /*+placement:shift 50px 40px;*/ + width: 210px; + font-size: 22px; + /*+placement:shift 11px 41px;*/ position: relative; - left: 50px; - top: 40px; + left: 11px; + top: 41px; position: absolute; color: #5F768A; } +.vpc-chart .vpc-title > span { + max-width: 160px; + display: block; + float: left; + overflow-y: hidden; + overflow-x: auto; +} + .vpc-chart .vpc-title .icon { padding: 7px 15px; background: url(../images/sprites.png) no-repeat -145px -195px; - margin-left: 10px; + margin-left: 10px; cursor: pointer; + /*+placement:shift 6px -8px;*/ + position: relative; + left: 6px; + top: -8px; + float: left; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip { + width: 129px; + padding: 35px 10px 10px; + font-size: 14px; + display: none; + position: absolute; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip .arrow { + width: 30px; + height: 20px; + background: #FFFFFF url(../images/sprites.png) no-repeat -589px -997px; + /*+placement:shift 13px 26px;*/ + position: relative; + left: 13px; + top: 26px; + position: absolute; + z-index: 1; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip ul { + border: 1px solid #C2C2C2; + background: #FFFFFF; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + /*+placement:shift 0px -6px;*/ + position: relative; + left: 0px; + top: -6px; + margin: 10px 0; + padding: 9px; + /*+box-shadow:0px 1px 8px #CBCBCB;*/ + -moz-box-shadow: 0px 1px 8px #CBCBCB; + -webkit-box-shadow: 0px 1px 8px #CBCBCB; + -o-box-shadow: 0px 1px 8px #CBCBCB; + box-shadow: 0px 1px 8px #CBCBCB; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip li { + padding: 3px 0 5px; + cursor: pointer; + font-size: 12px; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip li:hover { + font-weight: bold; } .vpc-chart ul.tiers { http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/683b7d78/ui/images/sprites.png ---------------------------------------------------------------------- diff --git a/ui/images/sprites.png b/ui/images/sprites.png index 86437fc..71674d1 100644 Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/683b7d78/ui/scripts/ui-custom/vpc.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/vpc.js b/ui/scripts/ui-custom/vpc.js index c683805..a8ed4d1 100644 --- a/ui/scripts/ui-custom/vpc.js +++ b/ui/scripts/ui-custom/vpc.js @@ -16,6 +16,64 @@ // under the License. (function($, cloudStack) { var elems = { + vpcConfigureTooltip: function(args) { + var links = { + 'ip-addresses': 'IP Addresses', + 'gateways': 'Gateways', + 'site-to-site-vpn': 'Site-to-site VPN' + }; + var $links = $('<ul>').addClass('links'); + var $tooltip = $('<div>').addClass('vpc-configure-tooltip').append( + $('<div>').addClass('arrow') + ); + + // Make links + $.map(links, function(label, id) { + var $link = $('<li>').addClass('link').addClass(id); + var $label = $('<span>').html(label); + + $link.append($label); + $link.appendTo($links); + }); + + $tooltip.append($links); + + // Tooltip hover event + $tooltip.hover( + function() { + $tooltip.addClass('active'); + }, + function() { + $tooltip.removeClass('active'); + + setTimeout(function() { + if (!$tooltip.hasClass('active')) { + $tooltip.remove(); + } + }, 500); + } + ); + + return $tooltip; + }, + vpcConfigureArea: function(args) { + var $config = $('<div>').addClass('config-area'); + var $configIcon = $('<span>').addClass('icon').html(' '); + + $config.append($configIcon); + + // Tooltip event + $configIcon.mouseover(function() { + var $tooltip = elems.vpcConfigureTooltip(); + + // Make sure tooltip is center aligned with icon + $tooltip.css({ left: $configIcon.position().left }); + $tooltip.appendTo($config).hide(); + $tooltip.stop().fadeIn('fast'); + }); + + return $config; + }, router: function() { var $router = $('<li>').addClass('tier virtual-router'); var $title = $('<span>').addClass('title').html('Virtual Router'); @@ -154,9 +212,13 @@ var $tiers = $('<ul>').addClass('tiers'); var $router = elems.router(); var $chart = $('<div>').addClass('vpc-chart'); - var $title = $('<div>').addClass('vpc-title').html(vpcName).append( - $('<span>').addClass('icon').html(' ') - ); + var $title = $('<div>').addClass('vpc-title') + .append( + $('<span>').html(vpcName) + ) + .append( + elems.vpcConfigureArea({}) + ); var showAddTierDialog = function() { if ($(this).find('.loading-overlay').size()) {
