Updated Branches: refs/heads/master 5795664bd -> 43b18025e
CLOUDSTACK-4758: Add 'root disk size' field Add 'root disk size' slider to instance wizard UI, under select template/iso, if the selected template's size is able to be customized. Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/43b18025 Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/43b18025 Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/43b18025 Branch: refs/heads/master Commit: 43b18025e386fba6cc21463d06a0eea0f1fb51d6 Parents: 5795664 Author: Brian Federle <[email protected]> Authored: Tue Oct 22 11:43:09 2013 -0700 Committer: Brian Federle <[email protected]> Committed: Tue Oct 22 11:45:18 2013 -0700 ---------------------------------------------------------------------- .../classes/resources/messages.properties | 1 + ui/css/cloudstack3.css | 23 ++-- ui/dictionary.jsp | 1 + ui/index.jsp | 13 ++ ui/scripts/instanceWizard.js | 3 +- ui/scripts/ui-custom/instanceWizard.js | 119 +++++++++++++++---- 6 files changed, 126 insertions(+), 34 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/43b18025/client/WEB-INF/classes/resources/messages.properties ---------------------------------------------------------------------- diff --git a/client/WEB-INF/classes/resources/messages.properties b/client/WEB-INF/classes/resources/messages.properties index 5735ccd..c4dbc41 100644 --- a/client/WEB-INF/classes/resources/messages.properties +++ b/client/WEB-INF/classes/resources/messages.properties @@ -14,6 +14,7 @@ # KIND, either express or implied. See the License for the # specific language governing permissions and limitations # under the License. +label.root.disk.size=Root disk size label.s3.nfs.server=S3 NFS Server label.s3.nfs.path=S3 NFS Path label.delete.events=Delete events http://git-wip-us.apache.org/repos/asf/cloudstack/blob/43b18025/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index b5222cb..783b33e 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -5977,11 +5977,11 @@ label.error { margin-top: 9px !important; } -.multi-wizard.instance-wizard .data-disk-offering.required.custom-disk-size .select-container { +.multi-wizard.instance-wizard .custom-disk-size .select-container { height: 279px; } -.multi-wizard.instance-wizard .data-disk-offering.custom-disk-size .select-container { +.multi-wizard.instance-wizard .custom-disk-size .select-container { height: 213px; margin: -7px 6px 0 8px; /*+border-radius:6px;*/ @@ -5992,21 +5992,21 @@ label.error { border-radius: 6px 6px 6px 6px; } -.multi-wizard.instance-wizard .data-disk-offering .content .section input { +.multi-wizard.instance-wizard .content .section input { float: left; } -.multi-wizard.instance-wizard .data-disk-offering .content .section input[type=radio] { +.multi-wizard.instance-wizard .content .section input[type=radio] { margin: 8px 2px 0 17px; } -.multi-wizard.instance-wizard .data-disk-offering .content .section label { +.multi-wizard.instance-wizard .content .section label { display: block; float: left; margin: 10px 7px 7px; } -.multi-wizard.instance-wizard .data-disk-offering .content .section label.size { +.multi-wizard.instance-wizard .content .section label.size { color: #647A8E; font-weight: bold; /*+text-shadow:0px 1px 1px #FFFFFF;*/ @@ -6016,21 +6016,24 @@ label.error { text-shadow: 0px 1px 1px #FFFFFF; } -.multi-wizard.instance-wizard .data-disk-offering .content .section.custom-size { +.multi-wizard.instance-wizard .section.custom-size { position: relative; + background: white; + padding: 7px; + border-radius: 4px; } -.multi-wizard.instance-wizard .data-disk-offering .content .section.custom-size input[type=radio] { +.multi-wizard.instance-wizard .section.custom-size input[type=radio] { float: left; } -.multi-wizard.instance-wizard .data-disk-offering .content .section.custom-size input[type=text] { +.multi-wizard.instance-wizard .section.custom-size input[type=text] { float: left; width: 28px; margin: 6px -1px 0 8px; } -.multi-wizard.instance-wizard .data-disk-offering .content .section.custom-size label.error { +.multi-wizard.instance-wizard .section.custom-size label.error { position: absolute; top: 29px; left: 242px; http://git-wip-us.apache.org/repos/asf/cloudstack/blob/43b18025/ui/dictionary.jsp ---------------------------------------------------------------------- diff --git a/ui/dictionary.jsp b/ui/dictionary.jsp index 9ab644b..32313d8 100644 --- a/ui/dictionary.jsp +++ b/ui/dictionary.jsp @@ -25,6 +25,7 @@ under the License. <% long now = System.currentTimeMillis(); %> <script language="javascript"> dictionary = { +'label.root.disk.size': '<fmt:message key="label.root.disk.size" />', 'label.s3.nfs.path': '<fmt:message key="label.s3.nfs.path" />', 'label.s3.nfs.server': '<fmt:message key="label.s3.nfs.server" />', 'label.delete.events': '<fmt:message key="label.delete.events" />', http://git-wip-us.apache.org/repos/asf/cloudstack/blob/43b18025/ui/index.jsp ---------------------------------------------------------------------- diff --git a/ui/index.jsp b/ui/index.jsp index 6614dd7..20859b4 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -162,6 +162,19 @@ <div class="select-container"> </div> </div> + + <!-- Custom size slider --> + <div class="section custom-size"> + <label><fmt:message key="label.root.disk.size"/></label> + + <!-- Slider --> + <label class="size">1 GB</label> + <div class="slider custom-size"></div> + <label class="size max"><span></span> GB</label> + + <input type="text" class="required digits" name="root-size" value="1" /> + <label class="size">GB</label> + </div> </div> </div> http://git-wip-us.apache.org/repos/asf/cloudstack/blob/43b18025/ui/scripts/instanceWizard.js ---------------------------------------------------------------------- diff --git a/ui/scripts/instanceWizard.js b/ui/scripts/instanceWizard.js index 1179a87..2d6d66b 100644 --- a/ui/scripts/instanceWizard.js +++ b/ui/scripts/instanceWizard.js @@ -237,7 +237,8 @@ data: { templates: templatesObj, hypervisors: hypervisorObjs - } + }, + customFlag: 'isdynamicallyscalable', // Field determines if custom slider is shown }); }, http://git-wip-us.apache.org/repos/asf/cloudstack/blob/43b18025/ui/scripts/ui-custom/instanceWizard.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js index f01bc3f..c6d6201 100644 --- a/ui/scripts/ui-custom/instanceWizard.js +++ b/ui/scripts/ui-custom/instanceWizard.js @@ -267,6 +267,8 @@ }, 'select-iso': function($step, formData) { + $step.find('.section.custom-size').hide(); + var originalValues = function(formData) { var $inputs = $step.find('.wizard-step-conditional:visible') .find('input[type=radio]'); @@ -288,7 +290,7 @@ return { response: { - success: function(args) { + success: function(args) { if (formData['select-template']) { $step.find('.wizard-step-conditional').filter(function() { return $(this).hasClass(formData['select-template']); @@ -380,6 +382,73 @@ }); originalValues(formData); + + $step.find('input[type=radio]').bind('change', function() { + var $target = $(this); + var val = $target.val(); + var item; + + $.map(args.data.templates, function(v, k) { + if (!v) { + return true; + } + + var target = $.grep(v, function(elem) { + return elem.id == val; + }); + + if (target.length) { + item = target[0]; + + return false; + } + + return true; + }); + + if (!item) return true; + + var custom = item[args.customFlag]; + + $step.find('.custom-size-label').remove(); + + if (custom) { + $target.parent().find('.name') + .append( + $('<span>').addClass('custom-size-label') + .append(': ') + .append( + $('<span>').addClass('custom-disk-size').html( + $step.find('.custom-size input[name=size]').val() + ) + ) + .append(' GB') + ); + $target.parent().find('.select-desc .desc') + .append( + $('<span>').addClass('custom-size-label') + .append(', ') + .append( + $('<span>').addClass('custom-disk-size').html( + $step.find('.custom-size input[name=size]').val() + ) + ) + .append(' GB') + ); + $step.find('.section.custom-size').show(); + $step.addClass('custom-disk-size'); + $target.closest('.select-container').scrollTop( + $target.position().top + ); + } else { + $step.find('.section.custom-size').hide(); + $step.removeClass('custom-disk-size'); + } + + return true; + }); + + $step.find('input[type=radio]:first').trigger('change'); } } }; @@ -743,17 +812,17 @@ }, { type: 'checkbox', 'wizard-field': 'security-groups' - }); + }); $step.find('.security-groups .select-container').append($sgSelects); - + //If there is only one security group and the only one is 'default', make it selected by default if ($sgSelects.length == 1) { - var $firstCheckbox = $sgSelects.eq(0); - if ($firstCheckbox.find('div .name').text() == 'default') { - $firstCheckbox.find('input:checkbox').click(); - } - } - + var $firstCheckbox = $sgSelects.eq(0); + if ($firstCheckbox.find('div .name').text() == 'default') { + $firstCheckbox.find('input:checkbox').click(); + } + } + originalValues(formData); checkShowAddNetwork($newNetwork); } @@ -1014,20 +1083,24 @@ // Setup tabs and slider $wizard.find('.section.custom-size .size.max span').html(maxCustomDiskSize); $wizard.find('.tab-view').tabs(); - $wizard.find('.slider').slider({ - min: 1, - max: maxCustomDiskSize, - start: function(event) { - $wizard.find('div.data-disk-offering div.custom-size input[type=radio]').click(); - }, - slide: function(event, ui) { - $wizard.find('div.data-disk-offering div.custom-size input[type=text]').val( - ui.value - ); - $wizard.find('div.data-disk-offering span.custom-disk-size').html( - ui.value - ); - } + $wizard.find('.slider').each(function() { + var $slider = $(this); + + $slider.slider({ + min: 1, + max: maxCustomDiskSize, + start: function(event) { + $slider.closest('.section.custom-size').find('input[type=radio]').click(); + }, + slide: function(event, ui) { + $slider.closest('.section.custom-size').find('input[type=text]').val( + ui.value + ); + $slider.closest('.step').find('span.custom-disk-size').html( + ui.value + ); + } + }); }); $wizard.find('div.data-disk-offering div.custom-size input[type=text]').bind('change', function() {
