You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2012/06/29 22:14:14 UTC
[2/2] git commit: Add configure VPC tooltip and links
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 <br...@citrix.com>
Authored: Fri Jun 29 13:11:43 2012 -0700
Committer: Brian Federle <br...@citrix.com>
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()) {