5:50 p.m.
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
ui/css/kimchi.css | 29 +++
ui/css/src/modules/_templates.scss | 24 +++
ui/js/src/kimchi.template_add_main.js | 334 ++++++----------------------------
ui/pages/template-add.html.tmpl | 80 +-------
4 files changed, 118 insertions(+), 349 deletions(-)
--
2.5.0
5:51 p.m.
Signed-off-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com>
---
ui/css/kimchi.css | 29 +++
ui/css/src/modules/_templates.scss | 24 +++
ui/js/src/kimchi.template_add_main.js | 334 ++++++----------------------------
ui/pages/template-add.html.tmpl | 80 +-------
4 files changed, 118 insertions(+), 349 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 5afa55d..4049f0a 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1628,6 +1628,35 @@ 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;
+}
+
/* 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..c15e100 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -217,6 +217,30 @@
&.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;
+ }
}
diff --git a/ui/js/src/kimchi.template_add_main.js
b/ui/js/src/kimchi.template_add_main.js
index fa5c847..ec6dca4 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,18 +64,19 @@ 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;
@@ -114,31 +85,19 @@ kimchi.template_add_main = function() {
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 +111,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 +118,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 +220,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 +233,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 +247,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 +262,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 +271,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 +289,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 +319,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 +344,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/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 2926cfa..073679c 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>
@@ -58,6 +48,13 @@
<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 +63,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>
@@ -77,6 +74,7 @@
<input type="checkbox"
class="iso-checkbox-hidden" name="iso" value="{isoId}">
<span
class="box-iso-border">
<span
class="box-iso-inner">
+ <span><i
class="{icon}"></i></span>
<h3 class="iso-title
{os_distro}" title="{name}">
{name}
</h3>
@@ -108,69 +106,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
6:49 p.m.
New subject: [PATCH] [Kimchi] Create Template UI adjustments based on feedback - ignore this
Pls disregard this patch. I'll be sending another version for minor
adjustments.
On 04/20/2016 07:50 AM, Socorro Stoppler wrote:
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
ui/css/kimchi.css | 29 +++
ui/css/src/modules/_templates.scss | 24 +++
ui/js/src/kimchi.template_add_main.js | 334 ++++++----------------------------
ui/pages/template-add.html.tmpl | 80 +-------
4 files changed, 118 insertions(+), 349 deletions(-)
3145
days inactive
3145
days old
2 comments
1 participants
participants (1)
-
Socorro Stoppler