diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 96fe09f27ff..d89bf681a86 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -4347,14 +4347,14 @@ label.error { .multi-wizard .select-container .select { font-size: 13px; - margin: 0; + margin: -1px 0 0; padding: 0 0 14px; min-height: 35px; width: 100%; display: inline-block; text-align: left; float: left; - border-bottom: 1px solid #EBEFF4; + border: none; background: #FFFFFF; } @@ -4369,11 +4369,11 @@ label.error { .multi-wizard .select-container .select .select-desc { max-width: 335px; - min-height: 34px; + min-height: 28px; overflow: hidden; float: left; clear: none; - margin: 15px 0 0; + margin: 21px 0 0; display: inline-block; } @@ -4618,7 +4618,7 @@ label.error { .multi-wizard.instance-wizard .select-network .select table .select-container { margin: 0px; border: 0; - height: 117px; + height: 112px; } .multi-wizard.instance-wizard .select-network .main-desc { @@ -4626,20 +4626,47 @@ label.error { left: 12px; } +.multi-wizard.instance-wizard .select-network .select .secondary-input { + float: right; + width: 80px; + height: 48px; + font-size: 11px; + border-left: 1px solid #D7D7D7; + color: #000000; +} + +.multi-wizard.instance-wizard .select-network .select .secondary-input input { + margin: 0 !important; + padding: 0 !important; + /*+placement:shift 9px 21px;*/ + position: relative; + left: 9px; + top: 21px; +} + +.multi-wizard.instance-wizard .select-network .select .secondary-input .name { + float: right; + /*+placement:shift -16px 22px;*/ + position: relative; + left: -16px; + top: 22px; +} + .multi-wizard.instance-wizard .select-network .select-container .select { width: 100%; float: left; - padding: 0 0 4px; + padding: 0; } .multi-wizard.instance-wizard .select-network .select-container .select input { - margin: 14px 15px 0px; + margin: 21px 15px 0px; } .multi-wizard.instance-wizard .select-network .select-container .select .select-desc .desc { font-size: 11px; color: #808080; float: left; + max-width: 113px; } .multi-wizard.instance-wizard .select-network .select-container .select .select-desc .name { diff --git a/ui/index-test.html b/ui/index-test.html index 6aa6345d68b..4d2fc668bbf 100644 --- a/ui/index-test.html +++ b/ui/index-test.html @@ -190,11 +190,11 @@
Please select networks for your virtual machine
-
+
- + @@ -207,11 +207,11 @@
Default networkMy networks (Isolated)
-
+
- + diff --git a/ui/index.jsp b/ui/index.jsp index eadd8066ef9..78d72a9a297 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -190,11 +190,11 @@
Please select networks for your virtual machine
-
+
Optional networksShared networks
- + @@ -207,11 +207,11 @@
Default networkMy networks (Isolated)
-
+
- + diff --git a/ui/scripts-test/instances.js b/ui/scripts-test/instances.js index 243f12dcc87..eb0d86a624e 100644 --- a/ui/scripts-test/instances.js +++ b/ui/scripts-test/instances.js @@ -96,10 +96,10 @@ args.response.success({ type: 'select-network', data: { - defaultNetworks: $.grep(testData.data.networks, function(elem) { + myNetworks: $.grep(testData.data.networks, function(elem) { return elem.isdefault === true; }), - optionalNetworks: $.grep(testData.data.networks, function(elem) { + sharedNetworks: $.grep(testData.data.networks, function(elem) { return elem.isdefault === false; }), securityGroups: testData.data.securityGroups diff --git a/ui/scripts/instances.js b/ui/scripts/instances.js index ab25cdfd9c0..62c19c8f5ad 100644 --- a/ui/scripts/instances.js +++ b/ui/scripts/instances.js @@ -339,8 +339,8 @@ args.response.success({ type: 'select-network', data: { - defaultNetworks: defaultNetworkArray, - optionalNetworks: optionalNetworkArray, + myNetworks: defaultNetworkArray, + sharedNetworks: optionalNetworkArray, securityGroups: [] } }); diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js index 0420a710341..0db9b49cb65 100644 --- a/ui/scripts/ui-custom/instanceWizard.js +++ b/ui/scripts/ui-custom/instanceWizard.js @@ -66,7 +66,10 @@ options = options ? options : {}; $(data).each(function() { - var $select = $('
').addClass('select') + var id = this[fields.id]; + + var $select = $('
') + .addClass('select') .append( $('') .attr({ @@ -74,9 +77,18 @@ return type ? type : 'radio'; })(options ? options.type : null), name: name, - value: this[fields.id], 'wizard-field': options['wizard-field'] }) + .val(id) + .click(function() { + var $radio = $(this).closest('.select').find('input[type=radio]'); + + if ($radio.is(':checked') && !$(this).is(':checked')) { + return false; + } + + return true; + }) ) .append( $('
').addClass('select-desc') @@ -85,6 +97,27 @@ ); $selects.append($select); + + if (options.secondary) { + var $secondary = $('
').addClass('secondary-input').append( + $('') + .attr({ + type: options.secondary.type, + name: options.secondary.name + }) + .val(id) + .click(function() { + var $checkbox = $(this).closest('.select').find('input[type=checkbox]'); + + if (!$checkbox.is(':checked')) { + $checkbox.attr('checked', true); + } + }) + .after( + $('
').addClass('name').html(options.secondary.desc) + ) + ).appendTo($select); + } }); cloudStack.evenOdd($selects, 'div.select', { @@ -351,22 +384,22 @@ 'network': function($step, formData) { var originalValues = function(formData) { // Default networks - $step.find('input[name=default-network]').filter(function() { - return $(this).val() == formData['default-network']; + $step.find('input[name=my-networks]').filter(function() { + return $(this).val() == formData['my-networks']; }).click(); // Optional networks var selectedOptionalNetworks = []; - if ($.isArray(formData['optional-networks'])) { - $(formData['optional-networks']).each(function() { + if ($.isArray(formData['shared-networks'])) { + $(formData['shared-networks']).each(function() { selectedOptionalNetworks.push(this); }); } else { - selectedOptionalNetworks.push(formData['optional-networks']); + selectedOptionalNetworks.push(formData['shared-networks']); } - var $checkboxes = $step.find('input[name=optional-networks]'); + var $checkboxes = $step.find('input[name=shared-networks]'); $(selectedOptionalNetworks).each(function() { var networkID = this; $checkboxes.filter(function() { @@ -389,25 +422,36 @@ $step.find('.select-network').show(); } - // Default network - $step.find('.default-network .select-container').append( - makeSelects('default-network', args.data.defaultNetworks, { + // My networks + $step.find('.my-networks .select-container').append( + makeSelects('my-networks', args.data.myNetworks, { name: 'name', desc: 'displaytext', id: 'id' }, { - 'wizard-field': 'default-network' + type: 'checkbox', + 'wizard-field': 'my-networks', + secondary: { + desc: 'Default', + name: 'defaultNetwork', + type: 'radio' + } }) ); - // Optional networks - $step.find('.optional-networks .select-container').append( - makeSelects('optional-networks', args.data.optionalNetworks, { + // Shared networks + $step.find('.shared-networks .select-container').append( + makeSelects('shared-networks', args.data.sharedNetworks, { name: 'name', desc: 'displaytext', id: 'id' }, { - type: 'checkbox' + type: 'checkbox', + secondary: { + desc: 'Default', + name: 'defaultNetwork', + type: 'radio' + } }) );
Optional networksShared networks