[Kimchi-devel] [PATCH 10/10] [new-ui] Templates tab
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Nov 10 21:17:39 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
.../kimchi/ui/js/src/kimchi.template_add_main.js | 406 +++++++++++++++------
.../kimchi/ui/js/src/kimchi.template_edit_main.js | 48 +--
.../kimchi/ui/js/src/kimchi.template_main.js | 59 +--
.../plugins/kimchi/ui/pages/template-add.html.tmpl | 344 ++++++++---------
.../kimchi/ui/pages/template-edit.html.tmpl | 266 +++++++-------
.../plugins/kimchi/ui/pages/templates.html.tmpl | 139 ++++---
ui/css/src/modules/_iso-list.scss | 126 +++++++
ui/css/src/modules/_templates.scss | 304 +++++++++++++++
8 files changed, 1146 insertions(+), 546 deletions(-)
create mode 100644 ui/css/src/modules/_iso-list.scss
create mode 100644 ui/css/src/modules/_templates.scss
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.template_add_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.template_add_main.js
index 01a47c2..78a5441 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.template_add_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.template_add_main.js
@@ -42,68 +42,9 @@ kimchi.switchPage = function(fromPageId, toPageId, direction) {
};
kimchi.template_add_main = function() {
+ "use strict";
+ var currentPage = 'iso-local-box';
kimchi.deepScanHandler = null;
- // 1-1 local iso
- $('#iso-local').click(function() {
- kimchi.switchPage('iso-type-box', 'iso-local-box');
- initLocalIsoField();
- initIsoFileField();
- 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);
- });
- });
-
- $('#iso-local-box-back').click(function() {
- if (kimchi.deepScanHandler) {
- kimchi.deepScanHandler.stop = true;
- }
- kimchi.switchPage('iso-local-box', 'iso-type-box', 'right');
- });
-
- $('#iso-search').click(function() {
- var settings = {
- content : i18n['KCHTMPL6002M']
- };
- wok.confirm(settings, function() {
- $('#iso-search').hide();
- $('#iso-search-loading').show();
- deepScan('#iso-search');
- });
- });
-
- $('#iso-more').click(function() {
- var settings = {
- content : i18n['KCHTMPL6002M']
- };
- wok.confirm(settings, function() {
- $('#iso-more').hide();
- $('#iso-more-loading').show();
- deepScan('#iso-more');
- });
- });
-
- $('#iso-search-loading').click(function() {
- $('#iso-search-loading').hide();
- $('#iso-search').show();
- if (kimchi.deepScanHandler) {
- kimchi.deepScanHandler.stop = true;
- }
- });
-
- $('#iso-more-loading').click(function() {
- $('#iso-more-loading').hide();
- $('#iso-more').show();
- if (kimchi.deepScanHandler) {
- kimchi.deepScanHandler.stop = true;
- }
- });
var deepScan = function(button) {
kimchi.deepScanHandler = kimchi.stepListDeepScanIsos(function(isos, isFinished) {
@@ -141,6 +82,19 @@ kimchi.template_add_main = function() {
$('#iso-search-loading').hide();
$('#iso-more-loading').hide();
$('#list-local-iso').empty();
+
+ // 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
+ $('#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) {
@@ -159,10 +113,160 @@ kimchi.template_add_main = function() {
$('#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', function() {
+ if ($('#iso-file').val()) {
+
+ $('#btn-template-file-create').removeAttr('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
+
+ } else {
+ $('#btn-template-file-create').attr('disabled', 'disabled');
+ }
+ });
+
+ initLocalIsoField();
+ initIsoFileField();
+ 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);
+ });
+ $('#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');
+ }
+ 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
+
+ $('#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
+
+
+ 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);
+ });
+ }
+ });
+
+ $('#iso-search').click(function() {
+ var settings = {
+ content : i18n['KCHTMPL6002M']
+ };
+ wok.confirm(settings, function() {
+ $('#iso-search').hide();
+ $('#iso-search-loading').show();
+ deepScan('#iso-search');
+ });
+ });
+
+ $('#iso-more').click(function() {
+ var settings = {
+ content : i18n['KCHTMPL6002M']
+ };
+ wok.confirm(settings, function() {
+ $('#iso-more').hide();
+ $('#iso-more-loading').show();
+ deepScan('#iso-more');
+ });
+ });
+
+ $('#iso-search-loading').click(function() {
+ $('#iso-search-loading').hide();
+ $('#iso-search').show();
+ if (kimchi.deepScanHandler) {
+ kimchi.deepScanHandler.stop = true;
+ }
+ });
+
+ $('#iso-more-loading').click(function() {
+ $('#iso-more-loading').hide();
+ $('#iso-more').show();
+ if (kimchi.deepScanHandler) {
+ kimchi.deepScanHandler.stop = true;
+ }
+ });
+
$('#select-all-local-iso').click(function() {
$('#list-local-iso [type="checkbox"]').prop('checked', $(this).prop('checked'));
if ($(this).prop('checked')) {
- $('#btn-template-local-iso-create').removeAttr('disabled');
+ $('#iso-file').val('');
+ $('vm-image-local-text').val('');
+
+ $('#btn-template-file-create').attr('disabled', 'disabled').css('display','none'); // 1 - Folder path
+
+ $('#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');
}
@@ -170,10 +274,24 @@ kimchi.template_add_main = function() {
$('#list-local-iso').on('click', '[type="checkbox"]', function() {
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
+
+ $('#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;
$('#select-all-local-iso').prop('checked', length == checkedLength);
+ $('#btn-template-local-iso-create').removeAttr('disabled');
} else {
$('#select-all-local-iso').prop('checked', false);
$('#btn-template-local-iso-create').attr('disabled', 'disabled');
@@ -184,32 +302,9 @@ kimchi.template_add_main = function() {
submitIso('form-local-iso');
});
- //1-1-2 local iso file
- var initIsoFileField = function() {
- $('#iso-file-check').prop('checked', false);
- $('#iso-file-box').hide();
- $('#iso-file').val('');
- $('#btn-template-file-create').attr('disabled', 'disabled');
- };
-
- $('#iso-file-check').click(function() {
- if ($(this).prop('checked')) {
- $('#iso-file-box').slideDown();
- } else {
- $('#iso-file-box').slideUp();
- }
- });
-
- $('#iso-file').on('input propertychange', function() {
- if ($('#iso-file').val()) {
- $('#btn-template-file-create').removeAttr('disabled');
- } else {
- $('#btn-template-file-create').attr('disabled', 'disabled');
- }
- });
-
$('#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.code('KCHAPI6003E');
return;
@@ -221,7 +316,7 @@ kimchi.template_add_main = function() {
});
//1-2 remote iso
- $('#iso-remote').css('opacity', 0.3).css('cursor', 'not-allowed');
+ $('#iso-remote').attr("disabled", true).css('cursor', 'not-allowed');
var enabledRemoteIso = function() {
if (kimchi.capabilities == undefined) {
@@ -233,23 +328,29 @@ kimchi.template_add_main = function() {
return;
}
- $('#iso-remote').css('opacity', 1).css('cursor', 'pointer');
- $('#iso-remote').click(function() {
- kimchi.switchPage('iso-type-box', 'iso-remote-box');
- initRemoteIsoField();
- initIsoUrlField();
- kimchi.listDistros(function(isos) {
- showRemoteIsoField(isos);
- }, function() {
- });
+ $('#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();
- $('#iso-remote-box-back').click(function() {
- kimchi.switchPage('iso-remote-box', 'iso-type-box', 'right');
- });
-
//1-2-1 remote iso list
var initRemoteIsoField = function() {
$('#load-remote-iso').show();
@@ -257,6 +358,25 @@ kimchi.template_add_main = function() {
$('#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('');
+ $('#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
+
+ $('#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 showRemoteIsoField = function(isos) {
@@ -286,7 +406,21 @@ 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')) {
- $('#btn-template-remote-iso-create').removeAttr('disabled');
+
+ $('#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 {
$('#btn-template-remote-iso-create').attr('disabled', 'disabled');
}
@@ -298,6 +432,21 @@ kimchi.template_add_main = function() {
$('#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');
@@ -310,19 +459,22 @@ kimchi.template_add_main = function() {
//1-2-2 remote iso url
var initIsoUrlField = function() {
- $('#iso-url-check').prop('checked', false);
- $('#iso-url-box').hide();
+
+ $('#iso-file').val('');
+ $('vm-image-local-text').val('');
$('#iso-url').val('');
- $('#btn-template-url-create').attr('disabled', 'disabled');
- }
- $('#iso-url-check').click(function() {
- if ($(this).prop('checked')) {
- $('#iso-url-box').slideDown();
- } else {
- $('#iso-url-box').slideUp();
- }
- });
+ $('#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', function() {
if ($('#iso-url').val()) {
@@ -332,20 +484,34 @@ kimchi.template_add_main = function() {
}
});
- $('#vm-image-local').click(function(){
- kimchi.switchPage('iso-type-box', 'vm-image-local-box');
- });
- $('#vm-image-local-box-back').click(function(){
- kimchi.switchPage('vm-image-local-box', 'iso-type-box', 'right');
+ $('#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('keyup cut paste', function(){
setTimeout(function(){
var isValid = kimchi.template_check_path($('input', '#vm-image-local-box').val());
$('input', '#vm-image-local-box').toggleClass('invalid-field', !isValid);
- $('button', $('.body', '#vm-image-local-box')).button(isValid ? "enable" : "disable");
+ $('#vm-image-local-box-button').attr('disabled', (isValid ? "false" : "true"));
}, 0);
});
- $('button', $('.body', '#vm-image-local-box')).button({
+ $('button', $('#vm-image-local-box')).button({
disabled: true
}).click(function(){
$('input', '#vm-image-local-box').prop('disabled', true);
@@ -438,4 +604,4 @@ kimchi.template_check_path = function(filePath) {
return reg.test(filePath);
}
return false;
-};
+};
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.template_edit_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.template_edit_main.js
index b4e9c69..5b77892 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.template_edit_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.template_edit_main.js
@@ -22,7 +22,14 @@ kimchi.template_edit_main = function() {
var origNetworks;
var templateDiskSize;
$('#template-name', templateEditMain).val(kimchi.selectedTemplate);
- templateEditMain.tabs();
+ //templateEditMain.tabs();
+ $('#edit-template-tabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+ var target = $(this).attr('href');
+
+ $(target).css('left','-'+$(window).width()+'px');
+ var left = $(target).offset().left;
+ $(target).css({left:left}).animate({"left":"0px"}, "10");
+ });
var initTemplate = function(template) {
origDisks = template.disks;
@@ -44,18 +51,14 @@ kimchi.template_edit_main = function() {
$('input[name="' + prop + '"]', templateEditMain).val(value);
}
- var vncOpt = [{label: 'VNC', value: 'vnc'}];
- $('#template-edit-graphics').append('<option selected>VNC</option>');
- $('#template-edit-graphics').append('<option>Spice</option>');
- wok.select('template-edit-graphics-list', vncOpt);
+ $('#template-edit-graphics').append('<option value="vnc" selected="selected">VNC</option>');
var enableSpice = function() {
if (kimchi.capabilities == undefined) {
setTimeout(enableSpice, 2000);
return;
}
if (kimchi.capabilities.qemu_spice == true) {
- spiceOpt = [{label: 'Spice', value: 'spice'}]
- wok.select('template-edit-graphics-list', spiceOpt);
+ $('#template-edit-graphics').append('<option value="spice">Spice</option>');
}
};
var isImageBasedTemplate = function() {
@@ -92,6 +95,7 @@ kimchi.template_edit_main = function() {
}
});
$('#selectStorageName').append(storageOptions);
+ $('select','#form-template-storage').selectpicker();
// Set disk format
if (isImageBasedTemplate()) {
@@ -180,13 +184,7 @@ kimchi.template_edit_main = function() {
});
}
- $('#template-edit-storage-add-button').button({
- icons: {
- primary: "ui-icon-plusthick"
- },
- text: false,
- disabled: true
- }).click(function(event) {
+ $('#template-edit-storage-add-button').on("click", function(event) {
event.preventDefault();
var storageNodeData = {
viewMode : 'hide',
@@ -195,7 +193,7 @@ kimchi.template_edit_main = function() {
storageType : 'dir',
storageDisk : '10'
}
- addStorageItem(storageNodeData);
+ addStorageItem(storageNodeData);
});
};
var initInterface = function(result) {
@@ -204,11 +202,8 @@ kimchi.template_edit_main = function() {
var networkName = networkData.networkV;
var nodeInterface = $.parseHTML(wok.substitute($('#template-interface-tmpl').html(), networkData));
$('.template-tab-body', '#form-template-interface').append(nodeInterface);
- $('.delete', '#form-template-interface').button({
- icons : {primary : 'ui-icon-trash'},
- text : false
- }).click(function(evt) {
- evt.preventDefault();
+ $('.delete', '#form-template-interface').on( "click",function(event) {
+ event.preventDefault();
$(this).parent().parent().remove();
});
var networkOptions = '';
@@ -219,6 +214,7 @@ kimchi.template_edit_main = function() {
}
}
$('select', '#form-template-interface #networkID' + networkItemNum).append(networkOptions);
+ $('select', '#form-template-interface #networkID' + networkItemNum).selectpicker();
networkItemNum += 1;
};
if(result && result.length > 0) {
@@ -230,13 +226,8 @@ kimchi.template_edit_main = function() {
});
}
}
- $('#template-edit-interface-add-button').button({
- icons: {
- primary: 'ui-icon-plusthick'
- },
- text: false
- }).click(function(evt) {
- evt.preventDefault();
+ $('#template-edit-interface-add-button').on( "click", function(event) {
+ event.preventDefault();
addInterfaceItem({
networkID : 'networkID' + networkItemNum,
networkV : 'default',
@@ -271,6 +262,7 @@ kimchi.template_edit_main = function() {
options += "<option"+lastOne+">"+Math.pow(2,i)+"</option>";
}
$('select', '#form-template-processor').append(options);
+ $('select', '#form-template-processor').selectpicker();
if(template.cpus) $("#cpus").val(template.cpus);
var topo = template.cpu_info.topology;
if(topo&&topo.cores) $("#cores").val(topo.cores);
@@ -354,7 +346,7 @@ kimchi.template_edit_main = function() {
kimchi.doListTemplates();
wok.window.close();
}, function(err) {
- wok.message.error(err.responseJSON.reason);
+ wok.message.error(err.responseJSON.reason,'#alert-modal-container');
});
});
};
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.template_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.template_main.js
index b09fe12..36112fa 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.template_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.template_main.js
@@ -19,23 +19,32 @@ kimchi.doListTemplates = function() {
kimchi.listTemplates(function(result) {
if (result && result.length) {
$('#noTemplates').hide();
- var listHtml = '';
+ var listHtml = '<li class="wok-vm-header">' +
+ '<span class="column-name">Template Name (ID)</span><!--' +
+ '--><span class="column-type">OS</span><!--' +
+ '--><span class="column-version">Version</span><!--' +
+ '--><span class="column-processors">CPUs</span><!--' +
+ '--><span class="column-memory">Memory</span><!-- ' +
+ '--><span class="column-action" style="display:none"> ' +
+ ' <span class="sr-only">Actions</span><!-- ' +
+ '--></span> ' +
+ '</li>';
var templateHtml = $('#templateTmpl').html();
$.each(result, function(index, value) {
var isLocal;
- if(value.cdrom){
+ if (value.cdrom) {
isLocal = /^\//.test(value['cdrom']);
- }else{
- for(var i=0;i<value.disks.length;i++){
- if(value.disks[i].base){
+ } else {
+ for (var i = 0; i < value.disks.length; i++) {
+ if (value.disks[i].base) {
isLocal = /^\//.test(value.disks[i].base);
break;
}
}
}
- if(isLocal){
+ if (isLocal) {
value.location = "plugins/kimchi/images/theme-default/icon-local.png";
- }else{
+ } else {
value.location = "plugins/kimchi/images/theme-default/icon-remote.png";
}
listHtml += wok.substitute(templateHtml, value);
@@ -54,28 +63,31 @@ kimchi.doListTemplates = function() {
};
kimchi.templateBindClick = function() {
- $('.template-edit').on('click', function(event) {
+ $('.template-edit a').on('click', function(event) {
+ event.preventDefault();
var templateName = $(this).data('template');
kimchi.selectedTemplate = templateName;
wok.window.open("plugins/kimchi/template-edit.html");
});
- $('.template-clone').on('click', function(event) {
+ $('.template-clone a').on('click', function(event) {
+ event.preventDefault();
kimchi.selectedTemplate = $(this).data('template');
$('html').addClass('processing');
kimchi.cloneTemplate(kimchi.selectedTemplate, function() {
- kimchi.doListTemplates();
- }, function(err) {
- wok.message.error(err.responseJSON.reason);
- kimchi.doListTemplates();
- });
+ kimchi.doListTemplates();
+ }, function(err) {
+ wok.message.error(err.responseJSON.reason);
+ kimchi.doListTemplates();
+ });
});
- $('.template-delete').on('click', function(event) {
+ $('.template-delete a').on('click', function(event) {
+ event.preventDefault();
var $template = $(this);
var settings = {
- title : i18n['KCHAPI6001M'],
- content : i18n['KCHTMPL6003M'],
- confirm : i18n['KCHAPI6002M'],
- cancel : i18n['KCHAPI6003M']
+ title: i18n['KCHAPI6001M'],
+ content: i18n['KCHTMPL6003M'],
+ confirm: i18n['KCHAPI6002M'],
+ cancel: i18n['KCHAPI6003M']
};
wok.confirm(settings, function() {
var templateName = $template.data('template');
@@ -84,8 +96,7 @@ kimchi.templateBindClick = function() {
}, function(err) {
wok.message.error(err.responseJSON.reason);
});
- }, function() {
- });
+ }, function() {});
});
}
kimchi.hideTitle = function() {
@@ -93,8 +104,8 @@ kimchi.hideTitle = function() {
};
kimchi.template_main = function() {
- if(wok.tabMode['templates'] === 'admin') {
- $('.tools').attr('style','display');
+ if (wok.tabMode['templates'] === 'admin') {
+ $('.tools').attr('style', 'display');
$("#template-add").on("click", function(event) {
wok.window.open({
url: 'plugins/kimchi/template-add.html',
@@ -108,4 +119,4 @@ kimchi.template_main = function() {
}
kimchi.doListTemplates();
-};
+};
\ No newline at end of file
diff --git a/src/wok/plugins/kimchi/ui/pages/template-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/template-add.html.tmpl
index 4c0f1da..e441a99 100644
--- a/src/wok/plugins/kimchi/ui/pages/template-add.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/template-add.html.tmpl
@@ -24,207 +24,177 @@
<!DOCTYPE html>
<html>
<body>
-<div class="window" style="width: 992px;height: 660px;">
- <header>
- <h1 class="title h1 grey">$_("Add Template")</h1>
- </header>
- <div class="content" style="margin-bottom: 0">
- <div class="page-list">
- <!-- 1 -->
- <div class="page" id="iso-type-box" style="left:0">
- <h2 class="step-title">$_("Where is the source media for this template? ")</h2>
- <ul class="step-choose">
- <li>
- <a id="iso-local" class="local">$_("Local ISO Image")</a>
- </li>
- <li>
- <a id="vm-image-local" class="local">$_("Local Image File")</a>
- </li>
- <li>
- <a id="iso-remote" class="remote">$_("Remote ISO Image")</a>
- </li>
- </ul>
+<div id="template-add-window" class="window modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title">$_("Add Template")</h4>
</div>
-
- <!-- 1-1 -->
- <div class="page" id="iso-local-box">
- <header>
- <a class="back" id="iso-local-box-back"></a>
- <h2 class="step-title">$_("Local ISO Image")</h2>
- </header>
-
- <button class="btn-normal" id="iso-search" style="display: none"><span class="text">$_("Search ISOs")</span></button>
- <button class="btn-normal" id="iso-search-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button>
- <!-- 1-1-1 -->
- <div id="local-iso-field" class="iso-field" style="display: none;">
- <h3 class="step-subtitle">
- $_("The following ISOs are available:")
- </h3>
- <div class="toolbar">
- <label class="check-all">
- <input type="checkbox" id="select-all-local-iso">$_("All")
+ <div class="modal-body">
+ <div class="template-modal-container">
+ <div>
+ <h5>$_("Where is the source media for this template? ")</h5>
+ <label class="radio-inline">
+ <input type="radio" checked="checked" name="iso-source" id="iso-local" value="iso-local"> $_("Local ISO Image")
+ </label>
+ <label class="radio-inline">
+ <input type="radio" name="iso-source" id="vm-image-local" value="vm-image-local"> $_("Local Image File")
</label>
+ <label class="radio-inline">
+ <input type="radio" name="iso-source" id="iso-remote" value="iso-remote"> $_("Remote ISO Image")
+ </label>
</div>
- <div>
- <form id="form-local-iso">
- <ul id="list-local-iso" class="list-iso">
- </ul>
- </form>
- <script id="tmpl-list-local-iso" type="text/html">
- <li>
- <label>
- <input type="checkbox" name="iso" value="{isoId}">
- <div class="box box-iso">
- <div class="iso-icon {os_distro}">
- </div>
- <h3 class="iso-title" title="{name}">
- {name}
- </h3>
- <div class="iso-info">
- <div class="iso-info-col">
- <div class="iso-info-item" title="{os_distro}">
- $_("OS: "){os_distro}
- </div>
- <div class="iso-info-item" title="{os_version}">
- $_("Version: "){os_version}
- </div>
- </div>
- <div class="iso-info-col">
- <div class="iso-info-item" title="{capacity}">
- $_("Size: "){capacity}
- </div>
- </div>
+ </div>
+ <div class="template-pager">
+ <div class="page-list">
+ <div class="page" id="iso-local-box">
+ <!-- 1-1-2 -->
+ <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>
+ <input type="text" class="form-control" id="iso-file" name="iso-file">
</div>
</div>
- </label>
- </li>
- </script>
- </div>
- <div class="button-field">
- <button class="btn-normal" id="iso-more" style="display: none"><span class="text">$_("Search more ISOs")</span></button>
- <button class="btn-normal" id="iso-more-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button>
- <button class="btn-normal" id="btn-template-local-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button>
- </div>
- </div>
+ </div>
+ <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;">
+ <div class="row">
+ <p>$_("The following ISOs are available:")</p>
+ </div>
+ <div class="checkbox">
+ <label class="check-all">
+ <input type="checkbox" id="select-all-local-iso">$_("All")
+ </label>
+ </div>
+ <div class="row">
+ <form id="form-local-iso">
+ <ul id="list-local-iso" class="list-iso">
+ </ul>
+ </form>
+ <script id="tmpl-list-local-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>{capacity}</dt>
+ <dd>$_("Size: ")</dd>
+ </dl>
+ </span>
+ </span>
+ </label>
+ </li>
+ </script>
+ </div>
+ <div class="row">
+ <button class="btn btn-primary" id="iso-more" style="display: none"><span class="text">$_("Search more ISOs")</span></button>
+ <button class="btn btn-primary" id="iso-more-loading" style="display: none"><span class="wok-loading-icon"></span> $_("Please, wait...")</button>
+ </div>
+ </div>
+ </div>
- <!-- 1-1-2 -->
- <div id="iso-file-field">
- <h3 class="step-subtitle">
- <label>
- <input type="checkbox" id="iso-file-check">
- $_("I want to use a specific ISO file")
- </label>
- </h3>
- <div id="iso-file-box" class="custom-iso-field">
- <div class="input-wrapper"><input type="text" class="text" id="iso-file" name="iso-file"></div>
- <button class="btn-normal" id="btn-template-file-create" disabled="disabled"><span class="text">$_("Create")</span></button>
- </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>
+ <!-- 1-2 -->
+ <div class="page" id="iso-remote-box">
- <div class="page" id="vm-image-local-box">
- <header>
- <a class="back" id="vm-image-local-box-back"></a>
- <h2 class="step-title">$_("Local Image File")</h2>
- </header>
- <div class="body">
- <label for="vm-image-local-text">$_("File Path:")</label>
- <input type="text" id="vm-image-local-text" />
- <button class="ui-button-primary">$_("Create")</button>
- </div>
- </div>
+ <!-- 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 -->
- <div class="page" id="iso-remote-box">
- <header>
- <a class="back" id="iso-remote-box-back"></a>
- <h2 class="step-title">$_("Remote ISO Image")</h2>
- </header>
-
- <!-- 1-2-0 -->
- <div id="load-remote-iso">
- <h3 class="step-subtitle">
- <label>
- <img src = "plugins/kimchi/images/theme-default/loading.gif" />
- $_("Loading default remote ISOs ...")
- </label>
- </h3>
- </div>
+ <!-- 1-2-0 -->
+ <div id="load-remote-iso">
+ <p><span class="wok-loading-icon"></span> $_("Loading default remote ISOs ...")</p>
+ </div>
- <!-- 1-2-1 -->
- <div id="remote-iso-field" class="iso-field" style="display: none;">
- <h3 class="step-subtitle">
- $_("The following ISOs are available:")
- </h3>
- <div class="toolbar">
- <label class="check-all">
- <input type="checkbox" id="select-all-remote-iso">$_("All")
- </label>
- </div>
- <div>
- <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>
- <label>
- <input type="checkbox" name="iso" value="{isoId}">
- <div class="box box-iso">
- <div class="iso-icon {os_distro}">
- </div>
- <h3 class="iso-title" title="{name}">
- {name}
- </h3>
- <div class="iso-info">
- <div class="iso-info-col">
- <div class="iso-info-item" title="{os_distro}">
- $_("OS: "){os_distro}
- </div>
- <div class="iso-info-item" title="{os_version}">
- $_("Version: "){os_version}
- </div>
-
- </div>
- <div class="iso-info-col">
- <div class="iso-info-item" title="{os_arch}">
- $_("Arch: "){os_arch}
- </div>
- </div>
- </div>
- </div>
- </label>
- </li>
- </script>
+ <!-- 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 class="button-field">
- <button class="btn-normal" id="btn-template-remote-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button>
- </div>
- </div>
+ </div>
+ </div>
+ <div class="modal-footer">
- <!-- 1-2-2 -->
- <div id="iso-url-field" style="display: none;">
- <h3 class="step-subtitle">
- <label>
- <input type="checkbox" id="iso-url-check">
- $_("I want to use a custom URL")
- </label>
- </h3>
- <div id="iso-url-box" class="custom-iso-field">
- <div class="input-wrapper"><input type="text" class="text" id="iso-url" name="iso-url"></div>
- <button class="btn-normal" id="btn-template-url-create" disabled="disabled"><span class="text">$_("Create")</span></button>
- </div>
- </div>
+ <!-- Template from local file path -->
- </div>
- </div>
+ <!-- TODO: Use only one button and direct action based on current form field and "page" -->
+
+ <button class="btn btn-default" id="btn-template-file-create" disabled="disabled">$_("Create")</button>
+
+ <!-- Template from selected local isos -->
+
+ <!-- Old: $_("Create Templates from Selected ISO") -->
+ <button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled">$_("Create")</button>
+
+ <!-- Template from local file path -->
+
+ <button id="vm-image-local-box-button" class="btn btn-default ui-button-primary">$_("Create")</button>
+
+ <!-- Template from URL Iso -->
+
+ <button class="btn btn-default" id="btn-template-url-create" disabled="disabled">$_("Create")</button>
+
+ <!-- Template from selected remote isos -->
+
+ <!-- Old: $_("Create Templates from Selected ISO") -->
+ <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>
- <footer>
- <div class="button-group">
- <button class="btn-normal close" type="button"><span type="text">$_("Cancel")</span></button>
- </div>
- </footer>
</div>
<script>
kimchi.template_add_main();
diff --git a/src/wok/plugins/kimchi/ui/pages/template-edit.html.tmpl b/src/wok/plugins/kimchi/ui/pages/template-edit.html.tmpl
index aa7fd1a..59a2cfa 100644
--- a/src/wok/plugins/kimchi/ui/pages/template-edit.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/template-edit.html.tmpl
@@ -22,146 +22,152 @@
#silent _ = t.gettext
#silent _t = t.gettext
-<div id="template-edit-window" class="window">
- <header>
- <h1 class="title h1 grey">$_("Edit Template")</h1>
- </header>
- <div class="content">
- <div id="edit-template-tabs">
- <input type="hidden" id="template-name" name="templateName" />
- <ul>
- <li>
- <a href="#form-template-general">$_("General")</a>
- </li>
- <li>
- <a href="#form-template-storage">$_("Storage")</a>
- </li>
- <li>
- <a href="#form-template-interface">$_("Interface")</a>
- </li>
- <li>
- <a href="#form-template-processor">$_("Processor")</a>
- </li>
- </ul>
- <form id="form-template-general">
- <div class="form-template-inline-wrapper">
- <div class="template-edit-wrapper-label">
- <label for="template-edit-id-textbox">$_("Name")</label>
- </div>
- <div class="template-edit-wrapper-label">
- <label for="template-edit-vendor-textbox">$_("Vendor")</label>
- </div>
- <div class="template-edit-wrapper-label">
- <label for="template-edit-version-textbox">$_("Version")</label>
- </div>
- <div class="template-edit-wrapper-label">
- <label for="template-edit-memory-textbox">$_("Memory (MB)")</label>
- </div>
- <div class="template-edit-wrapper-label templ-edit-cdrom">
- <label for="template-edit-cdrom-textbox">$_("CDROM")</label>
- </div>
- <div class="template-edit-wrapper-label templ-edit-vm-image hide">
- <label for="template-edit-vmimage-textbox">$_("Image File")</label>
- </div>
- <div class="template-edit-wrapper-label">
- <label>$_("Graphics")</label>
- </div>
- </div>
- <div class="form-template-inline-wrapper">
- <div class="template-edit-wrapper-controls">
- <input id="template-edit-id-textbox" name="name" type="text" />
- </div>
- <div class="template-edit-wrapper-controls">
- <input id="template-edit-vendor-textbox" name="os_distro" type="text" disabled="disabled" />
- </div>
- <div class="template-edit-wrapper-controls">
- <input id="template-edit-version-textbox" name="os_version" type="text" disabled="disabled" />
- </div>
- <div class="template-edit-wrapper-controls">
- <input id="template-edit-memory-textbox" name="memory" type="text" />
- </div>
- <div class="template-edit-wrapper-controls templ-edit-cdrom">
- <input id="template-edit-cdrom-textbox" name="cdrom" type="text" disabled="disabled" />
- </div>
- <div class="template-edit-wrapper-controls templ-edit-vm-image hide">
- <input id="template-edit-vmimage-textbox" name="vm-image" type="text" disabled="disabled" />
- </div>
- <div class="template-edit-wrapper-controls">
- <div class="btn dropdown popable">
- <input id="template-edit-graphics" name="graphics" type="hidden" />
- <span class="text" id="template-edit-graphics-label"></span><span class="arrow"></span>
- <div class="popover" style="width: 100%">
- <ul class="select-list" id="template-edit-graphics-list" data-target="template-edit-graphics" data-label="template-edit-graphics-label">
- </ul>
- </div>
+<div id="template-edit-window" class="window modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title">$_("Edit Template")</h4>
+ </div>
+ <div class="modal-body">
+ <span id="alert-modal-container"></span>
+ <div id="edit-template-tabs">
+ <input type="hidden" id="template-name" name="templateName" />
+ <ul class="nav nav-tabs" role="tablist">
+ <li role="presentation" class="active">
+ <a href="#general" aria-controls="general" role="tab" data-toggle="tab">$_("General")</a>
+ </li>
+ <li role="presentation">
+ <a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">$_("Storage")</a>
+ </li>
+ <li role="presentation">
+ <a href="#interface" aria-controls="interface" role="tab" data-toggle="tab">$_("Interface")</a>
+ </li>
+ <li role="presentation">
+ <a href="#processor" aria-controls="processor" role="tab" data-toggle="tab">$_("Processor")</a>
+ </li>
+ </ul>
+ <div class="tab-content">
+ <div role="tabpanel" class="tab-pane active" id="general">
+ <form id="form-template-general">
+ <div class="form-template-inline-wrapper">
+ <div class="template-edit-wrapper-label">
+ <label for="template-edit-id-textbox">$_("Name")</label>
+ </div>
+ <div class="template-edit-wrapper-label">
+ <label for="template-edit-vendor-textbox">$_("Vendor")</label>
+ </div>
+ <div class="template-edit-wrapper-label">
+ <label for="template-edit-version-textbox">$_("Version")</label>
+ </div>
+ <div class="template-edit-wrapper-label">
+ <label for="template-edit-memory-textbox">$_("Memory (MB)")</label>
+ </div>
+ <div class="template-edit-wrapper-label templ-edit-cdrom">
+ <label for="template-edit-cdrom-textbox">$_("CDROM")</label>
+ </div>
+ <div class="template-edit-wrapper-label templ-edit-vm-image hide">
+ <label for="template-edit-vmimage-textbox">$_("Image File")</label>
+ </div>
+ <div class="template-edit-wrapper-label">
+ <label>$_("Graphics")</label>
+ </div>
+ </div>
+ <div class="form-template-inline-wrapper">
+ <div class="template-edit-wrapper-controls">
+ <input id="template-edit-id-textbox" class="form-control" name="name" type="text" />
+ </div>
+ <div class="template-edit-wrapper-controls">
+ <input id="template-edit-vendor-textbox" class="form-control" name="os_distro" type="text" disabled="disabled" />
+ </div>
+ <div class="template-edit-wrapper-controls">
+ <input id="template-edit-version-textbox" class="form-control" name="os_version" type="text" disabled="disabled" />
+ </div>
+ <div class="template-edit-wrapper-controls">
+ <input id="template-edit-memory-textbox" class="form-control" name="memory" type="text" />
+ </div>
+ <div class="template-edit-wrapper-controls templ-edit-cdrom">
+ <input id="template-edit-cdrom-textbox" class="form-control" name="cdrom" type="text" disabled="disabled" />
+ </div>
+ <div class="template-edit-wrapper-controls templ-edit-vm-image hide">
+ <input id="template-edit-vmimage-textbox" class="form-control" name="vm-image" type="text" disabled="disabled" />
+ </div>
+ <div class="template-edit-wrapper-controls">
+ <select id="template-edit-graphics" name="graphics" class="form-control" />
+ </div>
+ </div>
+ </form>
+ </div>
+ <div role="tabpanel" class="tab-pane" id="storage">
+ <form id="form-template-storage">
+ <div class="template-tab-header">
+ <span class="template-storage-cell storage-pool">$_("Storage Pool")</span>
+ <span class="template-storage-cell type">$_("Type")</span>
+ <span class="template-storage-cell disk">$_("Disk(GB)")</span>
+ <span class="template-storage-cell format">$_("Disk Format")</span>
+ <button type="button" id="template-edit-storage-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Storage")</button>
+ </div>
+ <div class="template-tab-body">
+ </div>
+ </form>
+ </div>
+ <div role="tabpanel" class="tab-pane" id="interface">
+ <form id="form-template-interface">
+ <div class="template-tab-header">
+ <span class="template-interface-cell network">$_("Network")</span>
+ <span class="template-interface-cell type">$_("Type")</span>
+ <button type="button" id="template-edit-interface-add-button" class="pull-right btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add Interface")</button>
+ </div>
+ <div class="template-tab-body"></div>
+ </form>
+ </div>
+ <div role="tabpanel" class="tab-pane" id="processor">
+ <form id="form-template-processor">
+ <div class="form-inline">
+ <div class="form-group">
+ <label for="cpus">$_("CPU Number"):</label>
+ <input type="text" class="form-control" value="1" id="cpus" />
+ </div>
+ </div>
+ <div class="manual form-group">
+ <input type="checkbox" class="wok-checkbox" id="cpus-check" />
+ <label for="cpus-check">$_("Manually set CPU topology")</label>
+ </div>
+ <div class="topology hide">
+ <div class="form-inline">
+ <div class="form-group">
+ <label for="cores">$_("Cores"):</label>
+ <input type="text" class="form-control" value="1" id="cores" />
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="threads">$_("Threads"):</label>
+ <select id="threads" class="col-md-2"></select>
+ </div>
+ </div>
+ </form>
</div>
</div>
</div>
- </form>
- <form id="form-template-storage">
- <div class="template-tab-header">
- <span class="template-storage-cell">$_("Storage Pool")</span>
- <span class="template-storage-cell">$_("Type")</span>
- <span class="template-storage-cell">$_("Disk(GB)")</span>
- <span class="template-storage-cell">$_("Disk Format")</span>
- <button type="button" id="template-edit-storage-add-button" class="action-area"></button>
- </div>
- <div class="template-tab-body">
- </div>
- </form>
- <form id="form-template-interface">
- <div class="template-tab-header">
- <span class="template-interface-cell">$_("Network")</span>
- <span class="template-interface-cell">$_("Type")</span>
- <button type="button" id="template-edit-interface-add-button" class="action-area"></button>
- </div>
- <div class="template-tab-body"></div>
- </form>
- <form id="form-template-processor">
- <div>
- <label for="cpus">$_("CPU Number")</label>
- <input type="text" value="1" id="cpus" />
- </div>
- <div class="manual">
- <input type="checkbox" id="cpus-check" />
- <label for="cpus-check">$_("Manually set CPU topology")</label>
- </div>
- <div class="topology hide">
- <div>
- <label for="cores">$_("Cores")</label>
- <input type="text" value="1" id="cores" />
- </div>
- <div>
- <label for="threads">$_("Threads")</label>
- <select id="threads"></select>
- </div>
- </div>
- </form>
- </div>
</div>
- <footer>
- <div class="btn-group">
- <a id="tmpl-edit-button-save" class="btn-normal" href="javascript:void(0);"><span class="text">$_("Save")</span></a>
- <button class="btn-normal close" type="button"><span class="text">$_("Cancel")</span></button>
- </div>
- </footer>
+ <div class="modal-footer">
+ <a id="tmpl-edit-button-save" class="btn btn-default" href="javascript:void(0);">$_("Save")</a>
+ <button class="btn btn-default" type="button" data-dismiss="modal">$_("Cancel")</button>
+ </div>
</div>
<script>
kimchi.template_edit_main();
</script>
<script id="template-storage-pool-tmpl" type="text/html">
<div class='item'>
- <span class="template-storage-cell">
+ <span class="template-storage-cell storage-pool">
<input class="template-storage-name" value={storageName} type="text" style="display:none" />
<select id="selectStorageName"></select>
</span>
- <span class="template-storage-cell">
- <input class="template-storage-type" value={storageType} readonly=true type="text" />
+ <span class="template-storage-cell type">
+ <input class="template-storage-type form-control" value={storageType} readonly=true type="text" />
</span>
- <span class="template-storage-cell">
- <input class="template-storage-disk" value={storageDisk} type="text" />
+ <span class="template-storage-cell disk">
+ <input class="template-storage-disk form-control" value={storageDisk} type="text" />
</span>
- <span class="template-storage-cell">
+ <span class="template-storage-cell format">
<input class="template-storage-disk-format" value={storageDiskFormat} type="text" style="display:none" />
<select id="diskFormat">
<option value="qcow2">qcow2</option>
@@ -180,14 +186,14 @@
</script>
<script id="template-interface-tmpl" type="text/html">
<div class="item" id={networkID}>
- <span class="template-interface-cell">
+ <span class="template-interface-cell network">
<select></select>
</span>
- <span class="template-interface-cell">
- <input value={type} readonly=true type="text" />
+ <span class="template-interface-cell type">
+ <input value={type} readonly=true class="form-control" type="text" />
</span>
- <span class="action-area">
- <button class="delete"></button>
+ <span class="pull-right">
+ <button class="delete btn-primary btn"><i class="fa fa-minus-circle"></i> $_("Delete")</button>
</span>
</div>
</script>
diff --git a/src/wok/plugins/kimchi/ui/pages/templates.html.tmpl b/src/wok/plugins/kimchi/ui/pages/templates.html.tmpl
index af1cf3f..373e4d8 100644
--- a/src/wok/plugins/kimchi/ui/pages/templates.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/templates.html.tmpl
@@ -1,20 +1,20 @@
#*
- * Project Kimchi
- *
- * Copyright IBM, Corp. 2013-2014
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *#
+* Project Kimchi
+*
+* Copyright IBM, Corp. 2013-2014
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*#
#unicode UTF-8
#import gettext
#from wok.cachebust import href
@@ -24,54 +24,79 @@
<!DOCTYPE html>
<html>
<head>
-<link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css">
-<script src="plugins/kimchi/js/kimchi.min.js"></script>
+ <link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css">
+ <script src="plugins/kimchi/js/kimchi.min.js"></script>
</head>
<body>
-<div class="toolbar">
- <div class="tools" style="display:none">
- <a id="template-add" class="btn-tool" href="javascript:void(0);"><span class="icon add">+</span></a>
- </div>
-</div>
-<div>
- <div id="noTemplates" class="list-no-result" style="display: none;">
- $_("No templates found.")
- </div>
-
- <ul id="templateList" class="empty-when-logged-off"></ul>
-
- <script id="templateTmpl" type="html/text">
-
- <div class="template-box white-box template-border">
- <div class="btn dropdown popable" style="width: 70px">
- <span class="text">$_("Actions")</span><span class="arrow"></span>
- <div class="popover actionsheet right-side" style="width: 250px">
- <a class="button-big template-edit" data-template='{name}'>$_("Edit")</a>
- <a class="button-big template-clone" data-template='{name}'>$_("Clone")</a>
- <a class="button-big red template-delete" data-template='{name}'>$_("Delete")</a>
- </div>
- </div>
-
- <div class="template-icon template-icon-position">
- <img alt="" src="{icon}">
- <img alt="" src="{location}" class="template-type-icon-position">
+ <div id="templates-root-container">
+ <nav class="navbar navbar-default toolbar">
+ <div class="container">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
</div>
- <div class="template-general template-title template-title-position">
- <h2 class="title" title="{name}">{name}</h2>
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="toolbar">
+ <ul class="nav navbar-nav navbar-right tools" display="none">
+ <li><a id="template-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Template</span></a></li>
+ </ul>
</div>
- <div class="template-os-position">
- <div class="template-text">$_("OS"): {os_distro}</div>
- <div class="template-text">$_("Version"): {os_version}</div>
+ </div>
+ </nav>
+ <div class="templates">
+ <div class="container">
+ <div class="row grid-control">
+ <div class="pull-right">
+ <label for="templates-filter" class="sr-only">$_("Filter"):</label>
+ <input type="text" class="filter form-control" placeholder="$_("Filter")">
+ </div>
</div>
- <div class="template-cpu-position">
- <div class="template-text">$_("CPUs"): {cpus}</div>
- <div class="template-text">$_("Memory"): {memory}M</div>
+ <div id="alert-container"></div>
+ <div id="noTemplates" class="list-no-result" style="display: none;">
+ $_("No templates found.")
</div>
+ <div id="alert-container"></div>
+ <ul id="templateList" class="wok-vm-list empty-when-logged-off">
+ <script id="templateTmpl" type="html/text">
+ <li class="wok-vm-body">
+ <span class='column-name' title="{name}" val="{name}">{name}</span><!--
+ --><span class='column-action pull-right'>
+ <span class="pull-right">
+ <div class="dropdown menu-flat">
+ <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" role="menu">
+ <li role="presentation" nwAct="edit" class='template-edit'><a href="#" data-template='{name}'><i class="fa fa-pencil"></i>$_("Edit")</a></li>
+ <li role="presentation" nwAct="clone" class='template-clone'><a href="#" data-template='{name}'><i class="fa fa-files-o"></i>$_("Clone")</a></li>
+ <li role="presentation" nwAct="delete" class='critical template-delete'><a href="#" data-template='{name}'><i class="fa fa-minus-circle"></i>$_("Delete")</a></li>
+ </ul>
+ </div>
+ </span>
+ </span><!--
+ --><span class='column-type distro-icon icon-{os_distro}' val="{os_distro}">{os_distro}</span><!--
+ --><span class="item-hidden">$_("OS")</span><!--
+ --><span class='column-version' val="{os_version}">{os_version}</span><!--
+ --><span class="item-hidden">$_("Version")</span><!--
+ --><span class='column-processors' val="{cpus}"><strong>{cpus}</strong> cores</span><!--
+ --><span class="item-hidden">$_("CPUs")</span><!--
+ --><span class='column-memory' val="{memory}"><strong>{memory}</strong> M</span><!--
+ --><span class="item-hidden">$_("Memory")</span>
+ </li>
+
+ </script>
+ </ul>
</div>
- </script>
-</div>
-<script>
+ </div>
+
+ <div id="modalWindow" class="modal fade host-modal templates-modal" tabindex="-1" role="dialog" aria-labelledby="templatesModalLabel" aria-hidden="true">
+ </div>
+ <script>
kimchi.template_main();
-</script>
+ </script>
</body>
</html>
diff --git a/ui/css/src/modules/_iso-list.scss b/ui/css/src/modules/_iso-list.scss
new file mode 100644
index 0000000..9155176
--- /dev/null
+++ b/ui/css/src/modules/_iso-list.scss
@@ -0,0 +1,126 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/* Template & Guests Modal Windows */
+
+#template-add-window.modal-content,
+#guest-add-window.modal-content {
+ label.box-iso-outer {
+ font-family: $font-family-sans-serif;
+ font-size: 14px !important;
+ font-weight: 400;
+ border-radius: 3px;
+ overflow: hidden;
+ display: block;
+ -webkit-user-select: none;
+ user-select: none;
+ }
+ label.box-iso-outer span.box-iso-border {
+ display: block;
+ border: 3px solid transparent;
+ transition: all .1s ease-in-out;
+ }
+ label.box-iso-outer .iso-radio-hidden:checked + span.box-iso-border,
+ label.box-iso-outer .iso-checkbox-hidden:checked + span.box-iso-border {
+ border-color: $guests-color;
+ }
+ label.box-iso-outer .iso-radio-hidden:checked + span.box-iso-border > .box-iso-inner,
+ label.box-iso-outer .iso-checkbox-hidden:checked + span.box-iso-border > .box-iso-inner {
+ border-color: $gray-base;
+ }
+ label.box-iso-outer span.box-iso-inner {
+ display: block;
+ border: 1px solid transparent;
+ background: $gray-lighter;
+ transition: all .1s ease-in-out;
+ }
+ ul.list-template,
+ ul.list-iso {
+ display: block;
+ overflow-x: hidden;
+ overflow-y: auto;
+ max-height: 462px;
+ list-style: none;
+ margin: 0 -5px 10px -5px;
+ padding: 0;
+ }
+ label.box-iso-outer span.box-iso-inner dl {
+ margin-bottom: 16px;
+ }
+ label.box-iso-outer span.box-iso-inner dt,
+ label.box-iso-outer span.box-iso-inner dd {
+ padding: 0 12px 0 20px;
+ }
+ label.box-iso-outer span.box-iso-inner dt {
+ padding-top: 5px;
+ text-transform: capitalize;
+ }
+ label.box-iso-outer span.box-iso-inner dd {
+ padding-bottom: 5px;
+ }
+ ul#templateTile input[type="radio"].iso-radio-hidden,
+ ul#list-local-iso input[type="checkbox"].iso-checkbox-hidden,
+ ul#list-remote-iso input[type="checkbox"].iso-checkbox-hidden {
+ display: none;
+ }
+ label.box-iso-outer {
+ cursor: pointer;
+ }
+ ul#list-local-iso li.col-md-3,
+ ul#list-remote-iso li.col-md-3 {
+ width: 241px;
+ margin: 10px 5px 0;
+ }
+ h3.iso-title {
+ font-size: 22px;
+ font-weight: 300;
+ line-height: 22px;
+ margin: 0;
+ padding: 13px 40px 13px 20px;
+ background-color: transparent;
+ background-position: right 10px center;
+ background-repeat: no-repeat;
+ background-size: auto 27px;
+ background-origin: padding-box;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ &.centos {
+ background-image: url('#{$wok-icon-path}/icon-centos.png');
+ }
+ &.debian {
+ background-image: url('#{$wok-icon-path}/icon-debian.png');
+ }
+ &.fedora {
+ background-image: url('#{$wok-icon-path}/icon-fedora.png');
+ }
+ &.opensuse {
+ background-image: url('#{$wok-icon-path}/icon-opensuse.png');
+ }
+ &.ubuntu {
+ background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+ }
+ &.gentoo {
+ background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+ }
+ &.unknown {
+ background-image: url('#{$wok-icon-path}/icon-unknown.png');
+ }
+ }
+}
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
new file mode 100644
index 0000000..f3ee854
--- /dev/null
+++ b/ui/css/src/modules/_templates.scss
@@ -0,0 +1,304 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+/* Add Template Modal Window */
+
+.templates-modal {
+ .modal-dialog {
+ width: 1100px;
+ }
+ .page-list {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ overflow: hidden;
+ }
+ .page {
+ position: absolute;
+ left: 100%;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ padding: 10px 30px;
+ }
+}
+
+#template-edit-window {
+ .tab-content {
+ overflow: hidden;
+ }
+ .tab-content .tab-pane {
+ position: relative;
+ }
+ form {
+ margin: 15px 0 0;
+ }
+ .hide {
+ display: none;
+ }
+ .form-template-inline-wrapper {
+ display: inline-block;
+ vertical-align: top;
+ }
+ .template-edit-wrapper-label {
+ vertical-align: top;
+ min-width: 100px;
+ height: 35px;
+ line-height: 35px;
+ margin: 7px 0 8px;
+ }
+ .template-edit-wrapper-controls {
+ vertical-align: top;
+ width: 400px;
+ vertical-align: top;
+ min-width: 100px;
+ height: 35px;
+ line-height: 35px;
+ margin: 7px 0 8px;
+ }
+ .template-tab-header {
+ background: $table-bg;
+ display: block;
+ border-top: 1px solid $table-border-color;
+ > span {
+ padding: $table-cell-padding;
+ display: inline-block;
+ font-family: $font-family-light;
+ font-weight: 400;
+ font-size: 12.5pt;
+ vertical-align: bottom;
+ border-bottom: none;
+ border-top: 0;
+ line-height: $line-height-base;
+ height: 40px;
+ }
+ }
+ .template-tab-body {
+ .item {
+ border-top: 1px solid $table-border-color;
+ height: 53px;
+ &:first-child {
+ border-top: 0;
+ }
+ &:nth-child('even') {
+ background-color: $table-bg-accent;
+ }
+ &:nth-child('odd') {
+ background-color: $table-bg;
+ }
+ > span {
+ padding: $table-cell-padding;
+ display: inline-block;
+ }
+ }
+ }
+ .manual {
+ margin-top: 5px;
+ margin-bottom: 10px;
+ }
+ .topology {
+ margin: 0 24px;
+ }
+ .topology .form-inline {
+ margin-bottom: 10px;
+ }
+ .template-storage-cell.storage-pool {
+ width: 220px !important;
+ }
+ .template-storage-cell.type {
+ width: 100px;
+ }
+ .template-storage-cell.disk {
+ width: 100px;
+ }
+ .template-storage-cell.format {
+ width: 320px;
+ }
+ .template-interface-cell.network {
+ width: 220px;
+ }
+ .template-interface-cell.type {
+ width: 250px;
+ }
+}
+
+#template-add-window {
+ .modal-body {
+ margin: 0;
+ padding: 0;
+ }
+ .modal-footer {
+ margin-top: 0;
+ }
+ .modal-footer .btn + .btn {
+ margin-left: 0;
+ }
+ .modal-footer .btn {
+ margin-right: 5px;
+ }
+ .template-modal-container {
+ padding: 10px 30px;
+ position: relative;
+ }
+ .template-pager {
+ background: $table-border-color;
+ width: 1082px;
+ height: 689px;
+ position: relative;
+ overflow: hidden;
+ }
+ .template-pager-container {
+ position: absolute;
+ height: 664px;
+ width: 2164px;
+ left: 0;
+ transition: left .2s ease-in-out;
+ }
+ &.modal-content p {
+ margin: 0;
+ }
+ &.modal-content h5 {
+ font-size: 13pt;
+ font-weight: 400;
+ margin-top: 0;
+ }
+ &.modal-content label {
+ font-size: 16px;
+ font-weight: 400;
+ font-family: $font-family-sans-serif;
+ }
+ &.modal-content button#iso-more,
+ &.modal-content button#iso-more-loading {
+ margin-bottom: 17px;
+ clear: both;
+ }
+ &.modal-content div#iso-remote-box {
+ left: 1082px;
+ }
+ &.modal-content div#iso-local-box {
+ left: 0;
+ }
+}
+
+
+/* VM List View classes*/
+
+#templates-root-container {
+ .wok-vm-list {
+ display: block;
+ width: 100%;
+ list-style-type: none;
+ background: $table-bg;
+ > li:nth-child(2n+2) {
+ background-color: $table-bg-accent;
+ }
+ > li:nth-child(2n+3) {
+ background-color: $table-bg;
+ }
+ .wok-vm-header {
+ border-top: 0 none;
+ > span {
+ padding: $table-cell-padding;
+ display: inline-block;
+ vertical-align: bottom;
+ height: 36px;
+ font-family: $font-family-light;
+ font-weight: 400;
+ font-size: 12.5pt;
+ line-height: $line-height-base;
+ border-bottom: none;
+ border-top: 0;
+ background-color: $table-bg;
+ }
+ }
+ .wok-vm-body {
+ border-top: 1px solid $table-border-color;
+ &:first-child {
+ border-color: $table-first-row-border-color;
+ }
+ border-top: 1px solid $table-border-color;
+ > span {
+ padding: $table-cell-padding;
+ display: inline-block;
+ vertical-align: top;
+ font-family: $font-family-sans-serif;
+ font-size: 12.5pt;
+ line-height: (1 + $line-height-base);
+ }
+ .column-type {
+ padding-left: 40px !important;
+ }
+ }
+ .column-name {
+ width: 17.4900%;
+ font-weight: bold;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ .column-type {
+ width: 14.2435%;
+ font-weight: bold;
+ }
+ .column-version {
+ width: 14.2435%;
+ font-weight: bold;
+ }
+ .column-processors {
+ width: 12.8413%;
+ }
+ .column-memory {
+ width: 7.3800%;
+ }
+ .column-action {
+ width: 33.8000%;
+ }
+ .item-hidden {
+ display: none !important;
+ }
+ .distro-icon {
+ background-color: transparent;
+ background-size: 27px 27px;
+ background-repeat: no-repeat;
+ background-position: 8px 50%;
+ &.icon-centos {
+ background-image: url('#{$wok-icon-path}/icon-centos.png');
+ }
+ &.icon-debian {
+ background-image: url('#{$wok-icon-path}/icon-debian.png');
+ }
+ &.icon-fedora {
+ background-image: url('#{$wok-icon-path}/icon-fedora.png');
+ }
+ &.icon-opensuse {
+ background-image: url('#{$wok-icon-path}/images/icon-opensuse.png');
+ }
+ &.icon-ubuntu {
+ background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+ }
+ &.icon-gentoo {
+ background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+ }
+ &.icon-unknown {
+ background-image: url('#{$wok-icon-path}/icon-unknown.png');
+ }
+ }
+ }
+}
--
1.9.3
More information about the Kimchi-devel
mailing list