Re: [Kimchi-devel] [PATCH] [Kimchi] 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

Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com&gt; --- ui/css/kimchi.css | 36 ++++ ui/css/src/modules/_templates.scss | 30 +++ ui/js/src/kimchi.template_add_main.js | 337 ++++++---------------------------- ui/pages/i18n.json.tmpl | 1 + ui/pages/template-add.html.tmpl | 81 ++------ 5 files changed, 136 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..c3dd014 100644 --- a/ui/js/src/kimchi.template_add_main.js +++ b/ui/js/src/kimchi.template_add_main.js @@ -15,41 +15,12 @@ * 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'; kimchi.deepScanHandler = null; + var isos = []; + var local_isos = []; + var remote_isos = []; var deepScan = function(button) { kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished) { @@ -76,7 +47,6 @@ kimchi.template_add_main = function() { }); }; - //1-1-1 local iso list var initLocalIsoField = function() { kimchi.isoInfo = {}; $('#local-iso-field').hide(); @@ -94,51 +64,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 +114,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 +121,58 @@ 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(); + } + }); }, function(err) { wok.message.error(err.responseJSON.reason, '#local-iso-error-container'); }); + $('#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 +223,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 +236,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 +250,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 +265,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 +274,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 +292,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 +322,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 +347,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..670c7a2 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,16 @@ <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> + <!-- 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 +64,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 +86,7 @@ <dt>{capacity}</dt> <dd>$_("Size")</dd> </dl> + <span class="iso-image-indicator"><i class="{icon}"></i></span> </span> </span> </label> @@ -108,69 +107,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>