[PATCH] [Kimchi] Depends on Fixed "Add Template" modal window alignment patch; add loading/creating
This patch address the suggestions made by Aline in previous review: - Add a loader icon until get all the information to display the ISOs (as Ramon also suggested) - When selecting "Create" button, it may take some time, specially when using an local Image file, so once user selects it, disable the button and change its label to "Creating..." like it was before. When you receive the server response, display the error or close the dialog on success. - Move the filter input box to the same line of select "All" check box. (Addressed by Samuel's patch - Fixed "Add Template" modal window alignment patch) Socorro Stoppler (1): Added loading icon and 'Creating' for create template ui/js/src/kimchi.template_add_main.js | 25 +++++++++++++++++++------ ui/pages/template-add.html.tmpl | 16 ++++++++-------- 2 files changed, 27 insertions(+), 14 deletions(-) -- 2.5.0
Signed-off-by: Socorro Stoppler <socorro@linux.vnet.ibm.com> --- ui/js/src/kimchi.template_add_main.js | 25 +++++++++++++++++++------ ui/pages/template-add.html.tmpl | 16 ++++++++-------- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index 38a8f5b..79adc29 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -17,6 +17,7 @@ */ kimchi.template_add_main = function() { "use strict"; + $('.wok-mask').removeClass('hidden'); kimchi.deepScanHandler = null; var isos = []; var local_isos = []; @@ -60,7 +61,6 @@ kimchi.template_add_main = function() { // Resets input fields and hide other buttons $('#iso-file').val(''); // 1 - Folder path text - $('vm-image-local-text').val(''); // 3 - File path text $('#iso-url').val(''); // 4 - Remote folder path text $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - Folder path $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs @@ -95,7 +95,6 @@ kimchi.template_add_main = function() { var initIsoFileField = function() { $('#iso-file').val(''); - $('vm-image-local-text').val(''); $('#iso-url').val(''); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs @@ -131,9 +130,13 @@ kimchi.template_add_main = function() { } else { $('#iso-search').show(); } + $('.wok-mask').fadeOut(100, function() {}); }); }, function(err) { wok.message.error(err.responseJSON.reason, '#local-iso-error-container'); + $('.wok-mask').fadeOut(300, function() { + $('.wok-mask').addClass('hidden'); + }); }); $('#template-add-window .modal-body .template-pager').animate({ @@ -217,7 +220,6 @@ kimchi.template_add_main = function() { if ($(this).prop('checked')) { $('#iso-file').val(''); $('#iso-file').parent().removeClass('has-error'); - $('vm-image-local-text').val(''); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path @@ -232,7 +234,6 @@ kimchi.template_add_main = function() { $('#iso-file').parent().removeClass('has-error'); var checkedLength = $('#list-local-iso [type="checkbox"]:checked').length; $('#iso-file').val(''); - $('vm-image-local-text').val(''); $('#iso-url').val(''); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path @@ -250,11 +251,17 @@ kimchi.template_add_main = function() { }); $('#btn-template-local-iso-create').click(function() { + $('input', '#iso-file-box').prop('disabled', true); + $('#btn-template-local-iso-create').text(i18n['KCHAPI6008M']); + $('#btn-template-local-iso-create').prop('disabled', true); submitIso(); }); $('#btn-template-file-create').click(function() { var isoFile = $('#iso-file').val(); + $('input', '#iso-file-box').prop('disabled', true); + $('#btn-template-file-create').text(i18n['KCHAPI6008M']); + $('#btn-template-file-create').prop('disabled', true); if (!kimchi.template_check_path(isoFile)) { wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container'); return; @@ -262,7 +269,11 @@ kimchi.template_add_main = function() { var data = { "source_media": {"type": "disk", "path": isoFile} }; - addTemplate(data); + addTemplate(data, function() { + $('input', '#iso-file-box').prop('disabled', false); + $('#btn-template-file-create').text(i18n['KCHAPI6005M']); + $('#btn-template-file-create').prop('disabled', false); + }); }); var enabledRemoteIso = function() { @@ -285,7 +296,6 @@ kimchi.template_add_main = function() { $('#select-all-remote-iso').prop('checked', false); $('#iso-file').val(''); - $('vm-image-local-text').val(''); $('#iso-url').val(''); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path @@ -369,6 +379,9 @@ kimchi.template_add_main = function() { } }, function(err) { wok.message.error(err.responseJSON.reason, '#alert-modal-container'); + $('input', '#iso-file-box').prop('disabled', false); + $('#btn-template-local-iso-create').text(i18n['KCHAPI6005M']); + $('#btn-template-local-iso-create').prop('disabled', false); }); }; if (formData.iso instanceof Array) { diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index cecead7..8cdb431 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -34,6 +34,14 @@ <div class="template-pager"> <div class="page-list"> <div class="page" id="iso-local-box"> + <div class="wok-mask"> + <div class="wok-mask-loader-container"> + <div class="wok-mask-loading"> + <div class="wok-mask-loading-icon"></div> + <div class="wok-mask-loading-text">$_("Loading...")</div> + </div> + </div> + </div> <!-- 1-1-2 --> <div id="iso-file-field"> <div id="iso-file-box" class="custom-iso-field"> @@ -95,14 +103,6 @@ </div> </div> </div> - - <div class="page" id="vm-image-local-box"> - <div class="from-group"> - <label for="vm-image-local-text">$_("File Path:")</label> - <input type="text" class="form-control" id="vm-image-local-text" /> - </div> - </div> - </div> </div> <div class="modal-footer"> -- 2.5.0
Applied. Thanks. Regards, Aline Manera
participants (2)
-
Aline Manera -
Socorro Stoppler