From e3aa4fb4bbb76f294f9dbfd70a733b564b673c1d Mon Sep 17 00:00:00 2001 From: Brian Federle Date: Tue, 6 Dec 2011 16:19:00 -0800 Subject: [PATCH] bug 12351 -Add 'create new network' field on select network dropdown, with network offering select -Merge direct/shared networks into one list --- ui/css/cloudstack3.css | 62 ++++++++++++++++++++++- ui/index-test.html | 25 +++++++-- ui/index.jsp | 25 +++++++-- ui/scripts-test/instances.js | 3 +- ui/scripts/ui-custom/instanceWizard.js | 70 +++++++++++++++----------- 5 files changed, 145 insertions(+), 40 deletions(-) diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index d89bf681a86..8b82086572d 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -63,6 +63,7 @@ table thead { } table thead th { + height: 31px; border: 1px solid #C6C3C3; color: #566677; border-top: none; @@ -4117,7 +4118,7 @@ label.error { .multi-wizard .content { background: #FFFFFF; width: 430px; - height: 366px; + height: 401px; margin: 24px 0 0; /*+border-radius:6px;*/ -moz-border-radius: 6px; @@ -4613,12 +4614,36 @@ label.error { .multi-wizard.instance-wizard .select-network .select table td { padding: 0; margin: 0; + vertical-align: top; } .multi-wizard.instance-wizard .select-network .select table .select-container { margin: 0px; border: 0; - height: 112px; + height: 253px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container { + height: 29px; + overflow: visible; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select { + padding: 0; + margin: -12px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select select { + width: 178px; + margin: 0px 0 0; + /*+placement:shift;*/ + position: relative; + left: 0; + top: 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network { + margin: -17px 0 0; } .multi-wizard.instance-wizard .select-network .main-desc { @@ -4662,6 +4687,26 @@ label.error { margin: 21px 15px 0px; } +/**** New network*/ +.multi-wizard.instance-wizard .select-network .select.new-network { +} + +.multi-wizard.instance-wizard .select-network .select.new-network input { + margin-top: 24px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input { + width: 97px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input .name { + margin: 0 17px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select-desc { + width: 255px; +} + .multi-wizard.instance-wizard .select-network .select-container .select .select-desc .desc { font-size: 11px; color: #808080; @@ -4670,6 +4715,7 @@ label.error { } .multi-wizard.instance-wizard .select-network .select-container .select .select-desc .name { + width: 116px; font-size: 11px; font-weight: normal; float: left; @@ -4677,6 +4723,18 @@ label.error { margin: 0 16px 0 0; } +.multi-wizard.instance-wizard .select-network .select.new-network .select-desc .name { + width: 61px; + margin: 4px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .select-desc .name { + color: #808080; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select-desc .desc { +} + /*** Confirmation*/ .multi-wizard .review { } diff --git a/ui/index-test.html b/ui/index-test.html index 4d2fc668bbf..6b355c33f1d 100644 --- a/ui/index-test.html +++ b/ui/index-test.html @@ -194,7 +194,7 @@ - + @@ -207,17 +207,34 @@
My networks (Isolated)Networks
-
+
- + diff --git a/ui/index.jsp b/ui/index.jsp index 78d72a9a297..9bdf6922e47 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -194,7 +194,7 @@
Shared networksAdd new network
-
+
+
+ +
+
NEW
+
+ +
+
+
+ +
Default
+
+
- + @@ -207,17 +207,34 @@
My networks (Isolated)Networks
-
+
- + diff --git a/ui/scripts-test/instances.js b/ui/scripts-test/instances.js index eb0d86a624e..2831a15fc1f 100644 --- a/ui/scripts-test/instances.js +++ b/ui/scripts-test/instances.js @@ -102,7 +102,8 @@ sharedNetworks: $.grep(testData.data.networks, function(elem) { return elem.isdefault === false; }), - securityGroups: testData.data.securityGroups + securityGroups: testData.data.securityGroups, + networkOfferings: testData.data.networkOfferings } }); }, diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js index 0db9b49cb65..699aafd729c 100644 --- a/ui/scripts/ui-custom/instanceWizard.js +++ b/ui/scripts/ui-custom/instanceWizard.js @@ -22,7 +22,7 @@ // Save instance and close wizard var completeAction = function() { var data = cloudStack.serializeForm($form); - + args.action({ // Populate data data: data, @@ -67,7 +67,7 @@ $(data).each(function() { var id = this[fields.id]; - + var $select = $('
') .addClass('select') .append( @@ -84,7 +84,7 @@ var $radio = $(this).closest('.select').find('input[type=radio]'); if ($radio.is(':checked') && !$(this).is(':checked')) { - return false; + return false; } return true; @@ -243,7 +243,7 @@ [ ['featuredtemplates', 'instance-wizard-featured-templates'], ['communitytemplates', 'instance-wizard-community-templates'], - ['mytemplates', 'instance-wizard-my-templates'], + ['mytemplates', 'instance-wizard-my-templates'], ['isos', 'instance-wizard-my-isos'] ] ).each(function() { @@ -266,7 +266,7 @@ if (formData.serviceofferingid) { $step.find('input[type=radio]').filter(function() { return $(this).val() == formData.serviceofferingid; - }).click(); + }).click(); } else { $step.find('input[type=radio]:first').click(); } @@ -332,7 +332,7 @@ var item = $.grep(args.data.diskOfferings, function(elem) { return elem.id == val; })[0]; - + if (!item) return true; var custom = item[args.customFlag]; @@ -384,14 +384,14 @@ 'network': function($step, formData) { var originalValues = function(formData) { // Default networks - $step.find('input[name=my-networks]').filter(function() { - return $(this).val() == formData['my-networks']; + $step.find('input[type=radio]').filter(function() { + return $(this).val() == formData['defaultNetwork']; }).click(); // Optional networks var selectedOptionalNetworks = []; - if ($.isArray(formData['shared-networks'])) { + if ($.isArray(formData['shared-networks']) != -1) { $(formData['shared-networks']).each(function() { selectedOptionalNetworks.push(this); }); @@ -408,12 +408,40 @@ }); }; + var $newNetworkFields = $step.find('.new-network').addClass('unselected').find('.desc, .secondary-input'); + + // Setup new network field + $step.find('.new-network input[type=checkbox]').unbind('click'); + $step.find('.new-network input[type=checkbox]').click(function() { + $newNetworkFields.toggle(); + + if ($newNetworkFields.is(':hidden') && + $newNetworkFields.find('input[type=radio]').is(':checked')) { + $step.find('input[type=radio]:first').click(); + } + }); + + setTimeout(function() { + $step.find('.new-network input[type=checkbox]').attr('checked', false); + $newNetworkFields.hide(); + }); + // Show relevant conditional sub-step if present $step.find('.wizard-step-conditional').hide(); return { response: { success: function(args) { + // Populate network offering drop-down + $(args.data.networkOfferings).each(function() { + $('
Shared networksAdd new network
-
+
+
+ +
+
NEW
+
+ +
+
+
+ +
Default
+
+