[PATCHv3] [Kimchi] Create Template UI adjustments including size and loading
v3: Added loading icon since at times, it takes a while for the ISOs to load v2: Added 'Not Available' for size to be displayed when there's no value for size; otherwise, the container for the templates are showing up as different sizes due to missing value for the size field. Also moved the local/remote iso icon to bottom right corner v1: This is a brand new patch to implement create template UI without the user having to distinguish between iso and image files since the original one wasn't done quite right. Therefore, please ignore the original patch and this is v1. There are no longer any radio buttons, all the remote and local isos, if any, are displayed in the same panel and are distinguished by having a 'globe' icon for remote and a 'hdd' icon for local at the top left corner of each tile. Also, filtering by typing in the textbox has been added. Socorro Stoppler (1): Create Template UI adjustments based on feedback; added Not Available to be displayed for Size when there's no size and move remote/local iso icon to bottom right; add loading icon ui/css/kimchi.css | 36 ++++ ui/css/src/modules/_templates.scss | 30 +++ ui/js/src/kimchi.template_add_main.js | 342 +++++++--------------------------- ui/pages/i18n.json.tmpl | 1 + ui/pages/template-add.html.tmpl | 88 ++------- 5 files changed, 148 insertions(+), 349 deletions(-) -- 2.5.0
Signed-off-by: Socorro Stoppler <socorro@linux.vnet.ibm.com> --- ui/css/kimchi.css | 36 ++++ ui/css/src/modules/_templates.scss | 30 +++ ui/js/src/kimchi.template_add_main.js | 342 +++++++--------------------------- ui/pages/i18n.json.tmpl | 1 + ui/pages/template-add.html.tmpl | 88 ++------- 5 files changed, 148 insertions(+), 349 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 5afa55d..1d33d45 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -1628,6 +1628,42 @@ body.wok-gallery { left: 0; } +#template-add-window .filter { + height: 40px; + overflow: visible; + clear: both; +} + +#template-add-window .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 133px; +} + +#template-add-window .filter input[type="text"].form-control { + width: 460px; + height: 40px; + float: right; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +#template-add-window .filter .bootstrap-select.btn-group .btn .caret { + border-left: 0; +} + +#template-add-window .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + background: #fcfcfc; + border-right: 0; +} + +#template-add-window span.iso-image-indicator { + position: absolute; + bottom: 10px; + right: 10px; + font-size: 32px; +} + /* VM List View classes*/ #templates-root-container .grid-control input[type="text"] { height: 38px; diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index 86b9305..a9f0e8f 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -217,6 +217,36 @@ &.modal-content div#iso-local-box { left: 0; } + .filter { + height: 40px; + overflow: visible; + clear: both; + } + .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { + width: 133px; + } + .filter input[type="text"].form-control { + width: 460px; + height: 40px; + float: right; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .filter .bootstrap-select.btn-group .btn .caret { + border-left: 0; + } + .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + background: $table-bg-accent; + border-right: 0; + } + span.iso-image-indicator { + position: absolute; + bottom: 10px; + right: 10px; + font-size: 32px; + } } diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js index fa5c847..407ab7f 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -15,41 +15,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -kimchi.switchPage = function(fromPageId, toPageId, direction) { - $('.tab-content').css('overflow', 'hidden'); - direction = direction || 'left'; - var toLeftBegin; - var fromLeftEnd; - if ('left' === direction) { - toLeftBegin = '100%'; - fromLeftEnd = '-100%'; - } else if ('right' === direction) { - toLeftBegin = '-100%'; - fromLeftEnd = '100%'; - } - var formPage = $('#' + fromPageId); - var toPage = $('#' + toPageId); - toPage.css({ - left: toLeftBegin - }); - formPage.animate({ - left: fromLeftEnd, - opacity: 0.1 - }, 400, function() { - $('.tab-content').css('overflow', 'visible'); - }); - toPage.animate({ - left: '0', - opacity: 1 - }, 400, function() { - $('.tab-content').css('overflow', 'visible'); - }); -}; - kimchi.template_add_main = function() { "use strict"; - var currentPage = 'iso-local-box'; + $('.wok-mask').removeClass('hidden'); kimchi.deepScanHandler = null; + var isos = []; + var local_isos = []; + var remote_isos = []; var deepScan = function(button) { kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished) { @@ -76,7 +48,6 @@ kimchi.template_add_main = function() { }); }; - //1-1-1 local iso list var initLocalIsoField = function() { kimchi.isoInfo = {}; $('#local-iso-field').hide(); @@ -94,51 +65,43 @@ kimchi.template_add_main = function() { $('#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 - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes - }; var showLocalIsoField = function(isos) { var html = ''; var template = $('#tmpl-list-local-iso').html(); $.each(isos, function(index, volume) { + if ((volume.path).indexOf('http') === -1) { // Didn't find 'http', so must be local + volume.icon = 'fa fa-hdd-o'; + } else { + volume.icon = 'fa fa-globe'; + } var isoId = volume.os_distro + '*' + volume.name + '*' + volume.os_version; if (!kimchi.isoInfo[isoId]) { volume.isoId = isoId; volume.capacity = wok.changetoProperUnit(volume.capacity, 1); + if (volume.capacity === "") { + volume.capacity = i18n['KCHTMPL6006M']; + } kimchi.isoInfo[isoId] = volume; html += wok.substitute(template, volume); } }); + $('#list-local-iso').append(html); $('#local-iso-field').show(); }; - - //1-1-2 local iso file var initIsoFileField = function() { - //$('#iso-file-check').prop('checked', false); $('#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 - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes - $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes - }; $('#iso-file').on('input propertychange keyup focus cut paste click', function() { @@ -152,9 +115,6 @@ kimchi.template_add_main = function() { }, 0); if ($('#iso-file').val()) { $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos } else { $('#btn-template-file-create').attr('disabled', 'disabled'); } @@ -162,57 +122,62 @@ kimchi.template_add_main = function() { initLocalIsoField(); initIsoFileField(); - kimchi.listIsos(function(isos) { - if (isos && isos.length) { - showLocalIsoField(isos); - $('#iso-more').show(); - } else { - $('#iso-search').show(); - } + + kimchi.listIsos(function(local_isos) { //local ISOs + kimchi.listDistros(function(remote_isos) { //remote ISOs + isos = local_isos.concat(remote_isos); //all isos + if (isos && isos.length) { + showLocalIsoField(isos); + $('#iso-more').show(); + } 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({ height: "689px" }, 400); - // 1-1 local iso - $('#iso-local').change(function() { - if (this.checked) { - if (currentPage === 'vm-image-local-box') { - kimchi.switchPage(currentPage, 'iso-local-box', 'right'); - } else if (currentPage === 'iso-remote-box') { - kimchi.switchPage(currentPage, 'iso-local-box', 'right'); + var filterISOs = function(group, text) { + text = text.trim().split(" "); + var list = $('#isoRow').find('li'); + if(text === ""){ + list.show(); + return; + } + list.hide(); + + list.filter(function(index, value){ + var $li = $(this); + for (var i = 0; i < text.length; ++i){ + if ($li.is(":containsNC('" + text[i] + "')")) { + if (group === 'all') { + return true; + } else if (group === 'local') { + return true; + } else if (group === 'remote') { + return true; + } + } } - currentPage = 'iso-local-box'; - $('#template-add-window .modal-body .template-pager').animate({ - height: "689px" - }, 400); - initLocalIsoField(); - initIsoFileField(); - - $('#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 - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path + return false; + }).show(); + }; - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path + var setupFilters = function() { + $('input#template-add-iso-filter', '#form-template-add').on('keyup', function() { + filterISOs("all", $(this).val()); // Default to 'all' for now + }); + }; - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - - kimchi.listIsos(function(isos) { - if (isos && isos.length) { - showLocalIsoField(isos); - $('#iso-more').show(); - } else { - $('#iso-search').show(); - } - }, function(err) { - wok.message.error(err.responseJSON.reason, '#local-iso-error-container'); - }); - } - }); + setupFilters(); $('#iso-search').click(function() { var settings = { @@ -263,12 +228,6 @@ kimchi.template_add_main = function() { $('#btn-template-local-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - } else { $('#btn-template-local-iso-create').attr('disabled', 'disabled'); } @@ -282,14 +241,8 @@ kimchi.template_add_main = function() { $('#iso-url').val(''); $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos if (checkedLength) { $('#btn-template-local-iso-create').removeAttr('disabled'); var length = $('#list-local-iso [type="checkbox"]').length; @@ -302,12 +255,11 @@ kimchi.template_add_main = function() { }); $('#btn-template-local-iso-create').click(function() { - submitIso('form-local-iso'); + submitIso(); }); $('#btn-template-file-create').click(function() { var isoFile = $('#iso-file').val(); - $('vm-image-local-text').val(''); if (!kimchi.template_check_path(isoFile)) { wok.message.error(i18n['KCHAPI6003E'],'#local-iso-error-container'); return; @@ -318,9 +270,6 @@ kimchi.template_add_main = function() { addTemplate(data); }); - //1-2 remote iso - $('#iso-remote').attr("disabled", true).css('cursor', 'not-allowed'); - var enabledRemoteIso = function() { if (kimchi.capabilities === undefined) { setTimeout(enabledRemoteIso, 2000); @@ -330,36 +279,15 @@ kimchi.template_add_main = function() { if (kimchi.capabilities.qemu_stream !== true) { return; } - - $('#iso-remote').attr("disabled", false).css('cursor', 'pointer'); - $('#iso-remote').change(function() { - if (this.checked) { - if (currentPage === 'iso-local-box') { // slide twice - kimchi.switchPage(currentPage, 'iso-remote-box', 'left'); - } else if (currentPage === 'vm-image-local-box') { // slide once - kimchi.switchPage(currentPage, 'iso-remote-box', 'left'); - } - currentPage = 'iso-remote-box'; - $('#template-add-window .modal-body .template-pager').animate({ - height: "635px" - }, 400); - initRemoteIsoField(); - initIsoUrlField(); - kimchi.listDistros(function(isos) { - showRemoteIsoField(isos); - }, function() {}); - } - }); }; + enabledRemoteIso(); - //1-2-1 remote iso list var initRemoteIsoField = function() { $('#load-remote-iso').show(); $('#remote-iso-field').hide(); $('#iso-url-field').hide(); $('#select-all-remote-iso').prop('checked', false); - $('#btn-template-remote-iso-create').attr('disabled', 'disabled'); $('#iso-file').val(''); $('vm-image-local-text').val(''); @@ -369,12 +297,6 @@ kimchi.template_add_main = function() { $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes @@ -405,152 +327,14 @@ kimchi.template_add_main = function() { } }; - $('#select-all-remote-iso').click(function() { - $('#list-remote-iso [type="checkbox"]').prop('checked', $(this).prop('checked')); - if ($(this).prop('checked')) { - - $('#iso-file').val(''); - $('vm-image-local-text').val(''); - $('#iso-url').val(''); - $('#iso-url').parent().removeClass('has-error'); - - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 5 - Remote selected isos - - } else { - $('#btn-template-remote-iso-create').attr('disabled', 'disabled'); - } - }); - - $('#list-remote-iso').on('click', '[type="checkbox"]', function() { - $('#iso-url').parent().removeClass('has-error'); - var checkedLength = $('#list-remote-iso [type="checkbox"]:checked').length; - if (checkedLength) { - $('#btn-template-remote-iso-create').removeAttr('disabled'); - var length = $('#list-remote-iso [type="checkbox"]').length; - $('#select-all-remote-iso').prop('checked', length === checkedLength); - - $('#iso-file').val(''); - $('vm-image-local-text').val(''); - $('#iso-url').val(''); - - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 5 - Remote selected isos - - } else { - $('#select-all-remote-iso').prop('checked', false); - $('#btn-template-remote-iso-create').attr('disabled', 'disabled'); - } - }); - - $('#btn-template-remote-iso-create').click(function() { - submitIso('form-remote-iso'); - }); - - //1-2-2 remote iso url - var initIsoUrlField = function() { - - $('#iso-file').val(''); - $('vm-image-local-text').val(''); - $('#iso-url').val(''); - - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'none'); // 3 - File path - - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 4 - Remote folder path - - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - - }; - $('#iso-url').on('input propertychange keyup focus cut paste click', function() { $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'inline-block'); - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); setTimeout(function() { var isValid = kimchi.template_check_url($('input#iso-url').val()); $('input#iso-url').parent().toggleClass('has-error', !isValid); - $('#btn-template-url-create').attr('disabled', (isValid ? false : true)); }, 0); }); - - $('#vm-image-local').change(function() { - if (this.checked) { - if (currentPage === 'iso-local-box') { - kimchi.switchPage(currentPage, 'vm-image-local-box', 'left'); - } else if (currentPage === 'iso-remote-box') { - kimchi.switchPage(currentPage, 'vm-image-local-box', 'right'); - } - currentPage = 'vm-image-local-box'; - $('#template-add-window .modal-body .template-pager').animate({ - height: "100px" - }, 400); - - $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path - $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs - $('#vm-image-local-box-button').attr('disabled', 'disabled').css('display', 'inline-block'); // 3 - File path - $('#btn-template-url-create').attr('disabled', 'disabled').css('display', 'none'); // 4 - Remote folder path - $('#btn-template-remote-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 5 - Remote selected isos - - } - }); - $('input', '#vm-image-local-box').on('input propertychange keyup focus cut paste click', function() { - setTimeout(function() { - var isValid = kimchi.template_check_path($('input', '#vm-image-local-box').val()); - $('input', '#vm-image-local-box').parent().toggleClass('has-error', !isValid); - $('#vm-image-local-box-button').attr('disabled', (isValid ? false : true)); - }, 0); - }); - $('input', '#vm-image-local-box').on('input propertychange keyup focus cut paste click', function() { - setTimeout(function() { - var isValid = kimchi.template_check_path($('input', '#vm-image-local-box').val()); - $('input', '#vm-image-local-box').parent().toggleClass('has-error', !isValid); - $('#vm-image-local-box-button').attr('disabled', (isValid ? false : true)); - }, 0); - }); - $('#vm-image-local-box-button').on('click', function(){ - $('input', '#vm-image-local-box').prop('disabled', true); - $('#vm-image-local-box-button').text(i18n['KCHAPI6008M']); - $('#vm-image-local-box-button').prop('disabled', true); - addTemplate({ - source_media: $('input', '#vm-image-local-box').val() - }, function() { - $('input', '#vm-image-local-box').prop('disabled', false); - $('#vm-image-local-box-button').text(i18n['KCHAPI6005M']); - $('#vm-image-local-box-button').prop('disabled', false); - }); - }); - - $('#btn-template-url-create').click(function() { - var isoUrl = $('#iso-url').val(); - if (!kimchi.template_check_url(isoUrl)) { - wok.message.error.code('KCHAPI6004E'); - return; - } - var data = { - "source_media": isoUrl - }; - addTemplate(data); - }); - //do create var addTemplate = function(data, callback) { kimchi.createTemplate(data, function() { @@ -568,8 +352,8 @@ kimchi.template_add_main = function() { }); }; - var submitIso = function(formId) { - var formData = $('#' + formId).serializeObject(); + var submitIso = function() { + var formData = $('#form-local-iso').serializeObject(); if (formData.iso) { var length = 0; var successNum = 0; diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index 24abeb6..e030a45 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -51,6 +51,7 @@ "KCHTMPL6003M": "$_("This will permanently delete the template. Would you like to continue?")", "KCHTMPL6004M": "$_("View Table")", "KCHTMPL6005M": "$_("View Gallery")", + "KCHTMPL6006M": "$_("Not Available")", "KCHVM6001M": "$_("This will delete the virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")", "KCHVM6002M": "$_("Power off Confirmation")", diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index 2926cfa..eab7d9e 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -29,16 +29,6 @@ </div> <div class="modal-body"> <div class="template-modal-container"> - <div> - <span id="alert-modal-container"></span> - <h5>$_("Where is the source media for this template? ")</h5> - <input type="radio" checked="checked" name="iso-source" id="iso-local" value="iso-local" class="wok-radio"> - <label for="iso-local">$_("Local ISO Image")</label> - <input type="radio" name="iso-source" id="vm-image-local" value="vm-image-local" class="wok-radio"> - <label for="vm-image-local">$_("Local Image File")</label> - <input type="radio" name="iso-source" id="iso-remote" value="iso-remote" class="wok-radio"> - <label for="iso-remote">$_("Remote ISO Image")</label> - </div> </div> <div class="template-pager"> <div class="page-list"> @@ -47,7 +37,7 @@ <div id="iso-file-field"> <div id="iso-file-box" class="custom-iso-field"> <div class="form-group"> - <label for="iso-file">$_("Provide a File Path for a specific ISO image:")</label> + <label for="iso-file">$_("File Path:")</label> <input type="text" class="form-control" id="iso-file" name="iso-file"> </div> </div> @@ -56,8 +46,23 @@ <span id="local-iso-error-container"></span> <button class="btn btn-primary" id="iso-search" style="display: none">$_("Search ISOs")</button> <button class="btn btn-primary" id="iso-search-loading" style="display: none"><span class="wok-loading-icon"></span> $_("Please, wait...")</button> + <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-1 --> <div id="local-iso-field" class="iso-field" style="display: none;"> + <form id="form-template-add"> + <div class="filter"> + <div class="form-group pull-right"> + <input type="text" class="form-control" id="template-add-iso-filter" placeholder="$_("Filter")" /> + </div> + </div> + </form> <div class="row"> <p>$_("The following ISOs are available:")</p> </div> @@ -66,7 +71,7 @@ <input type="checkbox" id="select-all-local-iso">$_("All") </label> </div> - <div class="row"> + <div class="row" id="isoRow"> <form id="form-local-iso"> <ul id="list-local-iso" class="list-iso"> </ul> @@ -88,6 +93,7 @@ <dt>{capacity}</dt> <dd>$_("Size")</dd> </dl> + <span class="iso-image-indicator"><i class="{icon}"></i></span> </span> </span> </label> @@ -108,69 +114,11 @@ </div> </div> - <!-- 1-2 --> - <div class="page" id="iso-remote-box"> - <!-- 1-2-2 --> - <div id="iso-url-field" style="display: none;"> - <div id="iso-url-box" class="form-group"> - <label for="iso-url">$_("Provide a URL for a specific ISO image:")</label> - <input type="text" class="form-control" id="iso-url" name="iso-url"> - </div> - </div> - <!-- 1-2-0 --> - <div id="load-remote-iso"> - <p><span class="wok-loading-icon"></span> $_("Loading default remote ISOs ...")</p> - </div> - <span id="remote-iso-warning-container"></span> - <span id="remote-iso-error-container"></span> - <!-- 1-2-1 --> - <div id="remote-iso-field" class="iso-field" style="display: none;"> - <div class="row"> - <p>$_("The following ISOs are available:")</p> - </div> - <div class="checkbox"> - <label class="check-all"> - <input type="checkbox" id="select-all-remote-iso">$_("All") - </label> - </div> - <div class="row"> - <form id="form-remote-iso"> - <ul id="list-remote-iso" class="list-iso"> - </ul> - </form> - <script id="tmpl-list-remote-iso" type="text/html"> - <li class="col-md-3"> - <label class="box-iso-outer"> - <input type="checkbox" class="iso-checkbox-hidden" name="iso" value="{isoId}"> - <span class="box-iso-border"> - <span class="box-iso-inner"> - <h3 class="iso-title {os_distro}" title="{name}"> - {name} - </h3> - <dl class="iso-info"> - <dt>{os_distro}</dt> - <dd>$_("OS")</dd> - <dt>{os_version}</dt> - <dd>$_("Version")</dd> - <dt>{os_arch}</dt> - <dd>$_("Arch")</dd> - </dl> - </span> - </span> - </label> - </li> - </script> - </div> - </div> - </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default" id="btn-template-file-create" disabled="disabled">$_("Create")</button> <button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled">$_("Create")</button> - <button id="vm-image-local-box-button" class="btn btn-default ui-button-primary">$_("Create")</button> - <button class="btn btn-default" id="btn-template-url-create" disabled="disabled">$_("Create")</button> - <button class="btn btn-default" id="btn-template-remote-iso-create" disabled="disabled">$_("Create")</button> <button class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button> </div> </div> -- 2.5.0
Hi Socorro, Although this version has the loading icon, it added a right content shift when the loading icon is removed to display the ISOs. As I had more suggestions to make, I preferred to apply V2 and get one patch with all the improvements at once. Hope you don't mind. =) Regards, Aline Manera On 04/20/2016 06:45 PM, Socorro Stoppler wrote:
v3: Added loading icon since at times, it takes a while for the ISOs to load
v2: Added 'Not Available' for size to be displayed when there's no value for size; otherwise, the container for the templates are showing up as different sizes due to missing value for the size field. Also moved the local/remote iso icon to bottom right corner
v1: This is a brand new patch to implement create template UI without the user having to distinguish between iso and image files since the original one wasn't done quite right. Therefore, please ignore the original patch and this is v1.
There are no longer any radio buttons, all the remote and local isos, if any, are displayed in the same panel and are distinguished by having a 'globe' icon for remote and a 'hdd' icon for local at the top left corner of each tile. Also, filtering by typing in the textbox has been added.
Socorro Stoppler (1): Create Template UI adjustments based on feedback; added Not Available to be displayed for Size when there's no size and move remote/local iso icon to bottom right; add loading icon
ui/css/kimchi.css | 36 ++++ ui/css/src/modules/_templates.scss | 30 +++ ui/js/src/kimchi.template_add_main.js | 342 +++++++--------------------------- ui/pages/i18n.json.tmpl | 1 + ui/pages/template-add.html.tmpl | 88 ++------- 5 files changed, 148 insertions(+), 349 deletions(-)
No worries at all :) That's weird since when I tried it out several times, I didn't see the shift. On 04/25/2016 06:33 AM, Aline Manera wrote:
Hi Socorro,
Although this version has the loading icon, it added a right content shift when the loading icon is removed to display the ISOs. As I had more suggestions to make, I preferred to apply V2 and get one patch with all the improvements at once.
Hope you don't mind. =)
Regards, Aline Manera
On 04/20/2016 06:45 PM, Socorro Stoppler wrote:
v3: Added loading icon since at times, it takes a while for the ISOs to load
v2: Added 'Not Available' for size to be displayed when there's no value for size; otherwise, the container for the templates are showing up as different sizes due to missing value for the size field. Also moved the local/remote iso icon to bottom right corner
v1: This is a brand new patch to implement create template UI without the user having to distinguish between iso and image files since the original one wasn't done quite right. Therefore, please ignore the original patch and this is v1.
There are no longer any radio buttons, all the remote and local isos, if any, are displayed in the same panel and are distinguished by having a 'globe' icon for remote and a 'hdd' icon for local at the top left corner of each tile. Also, filtering by typing in the textbox has been added.
Socorro Stoppler (1): Create Template UI adjustments based on feedback; added Not Available to be displayed for Size when there's no size and move remote/local iso icon to bottom right; add loading icon
ui/css/kimchi.css | 36 ++++ ui/css/src/modules/_templates.scss | 30 +++ ui/js/src/kimchi.template_add_main.js | 342 +++++++--------------------------- ui/pages/i18n.json.tmpl | 1 + ui/pages/template-add.html.tmpl | 88 ++------- 5 files changed, 148 insertions(+), 349 deletions(-)
participants (2)
-
Aline Manera -
Socorro Stoppler