[Kimchi-devel] [PATCH 6/9] Adding new-ui to Templates tab
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Oct 27 21:23:00 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
.../kimchi/ui/css/theme-default/template_add.css | 317 ----------------
.../kimchi/ui/js/src/kimchi.template_add_main.js | 406 +++++++++++++++------
.../plugins/kimchi/ui/pages/template-add.html.tmpl | 344 ++++++++---------
.../kimchi/ui/pages/template-edit.html.tmpl | 236 ++++++------
.../plugins/kimchi/ui/pages/templates.html.tmpl | 93 +++--
5 files changed, 615 insertions(+), 781 deletions(-)
delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/template_add.css
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/template_add.css b/src/wok/plugins/kimchi/ui/css/theme-default/template_add.css
deleted file mode 100644
index f1e28c5..0000000
--- a/src/wok/plugins/kimchi/ui/css/theme-default/template_add.css
+++ /dev/null
@@ -1,317 +0,0 @@
-/*
- * Project Kimchi
- *
- * Copyright IBM, Corp. 2013-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.
- */
-.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;
-}
-
-.page>header {
- position: relative;
- overflow: hidden;
-}
-
-.button-group {
- margin-left: 5px;
-}
-
-.back {
- float: left; display : block;
- width: 50px;
- height: 52px;
- background: url(../images/theme-default/icon-back.png) center
- center no-repeat;
- cursor: pointer;
- display: block;
-}
-
-.step-title {
- color: #333;
- font-size: 18px;
- font-weight: normal;
- padding: 15px 10px;
-}
-
-.step-choose>li>a {
- display: block;
- margin: 0 10px 10px;
- padding: 20px 10px 20px 65px;
- border: 2px solid #ccc;
- background: url(../images/theme-default/icon-local.png) 15px
- center no-repeat;
- cursor: pointer;
-}
-
-.step-choose>li>a.local {
- background-image: url(../images/theme-default/icon-local.png);
-}
-
-.step-choose>li>a.remote {
- background-image: url(../images/theme-default/icon-remote.png);
-}
-
-.step-choose>li>a:HOVER {
- border: 2px solid #06C;
-}
-
-.step-subtitle {
- font-size: 16px;
- height: 48px;
- line-height: 48px;
- color: #06C;
- margin: 0 10px;
- font-weight: bold;
- text-shadow: -1px -1px 1px #eaeaea, 1px 1px 1px #fff;
-}
-
-.custom-iso-field {
- position: relative;
- padding: 0 10px 10px;
-}
-
-.custom-iso-field>.input-wrapper {
- margin-right: 110px;
-}
-
-.custom-iso-field>.input-wrapper>input.text {
- padding: 10px;
- color: #333;
- font-size: 13px;
- background: #fff;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- box-shadow: 2px 2px 2px #eee inset;
- border-top: 1px solid #bbb;
- border-left: 1px solid #bbb;
- width: 100%;
-}
-
-.custom-iso-field>button {
- position: absolute;
- top: -6px;
- right: 8px;
-}
-
-.iso-field .button-field {
- padding: 0 20px;
- text-align: right;
-}
-
-.check-all {
- display: inline-block;
- position: relative;
- height: 38px;
- line-height: 38px;
- margin: 5px;
- font-size: 13px;
-}
-
-.check-all input {
- margin: 0 5px 0 0;
-}
-
-.box {
- background: #ffffff;
- background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
- background: -webkit-gradient(linear, left top, left bottom,
- color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
- background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
- background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
- background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
- background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
- endColorstr='#e5e5e5', GradientType=0);
- border: 1px solid #ccc;
- color: #333;
- text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #fff;
- -webkit-border-radius: 8px;
- -moz-border-radius: 8px;
- border-radius: 8px;
-}
-
-.box:HOVER {
- border: 1px solid #aaa;
- -webkit-box-shadow: #bbb 0px 0px 5px;
- box-shadow: #bbb 0px 0px 5px;
-}
-
-.box-iso {
- padding: 10px;
- margin: 5px;
- overflow: hidden;
-}
-
-.iso-icon {
- float: left;
- width: 58px;
- height: 58px;
- margin: 0 5px 0 0;
- border: 1px solid #CCCCCC;
- border-radius: 8px;
- background: url(../images/icon-vm.png) center center no-repeat;
- background-size: 58px;
-}
-
-.iso-icon.centos {
- background-image: url(../images/icon-centos.png);
-}
-
-.iso-icon.debian {
- background-image: url(../images/icon-debian.png);
-}
-
-.iso-icon.fedora {
- background-image: url(../images/icon-fedora.png);
-}
-
-.iso-icon.opensuse {
- background-image: url(../images/icon-opensuse.png);
-}
-
-.iso-icon.ubuntu {
- background-image: url(../images/icon-ubuntu.png);
-}
-
-.iso-icon.gentoo {
- background-image: url(../images/icon-gentoo.png);
-}
-
-.list-iso {
- overflow: hidden;
- margin: 5px;
-}
-
-.list-iso li {
- float: left;
- width: 320px;
-}
-
-.list-iso>li>label {
- display: block;
- cursor: pointer;
-}
-
-.list-iso>li>label>input[type="checkbox"] {
- display: none;
-}
-
-.list-iso>li>label>input[type="checkbox"]:CHECKED+.box-iso {
- border: 1px solid rgb(11, 107, 173);
- -webkit-box-shadow: rgb(11, 107, 173) 0px 0px 4px;
- box-shadow: rgb(11, 107, 173) 0px 0px 4px;
-}
-
-.iso-title {
- margin: 0;
- display: block;
- position: relative;
- height: 23px;
- line-height: 23px;
- font-size: 14px;
- font-weight: normal;
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.iso-title>label>input {
- display: block;
- position: absolute;
- top: 0;
- right: 2px;
-}
-
-.iso-info {
- margin-top: 5px;
- overflow: hidden;
-}
-
-.iso-info-col {
- float: left;
- width: 50%;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- padding: 0 0 0 5px;
-}
-
-.iso-info-col:FIRST-CHILD {
- padding: 0 5px 0 0;
- border-right: 1px solid #999;
-}
-
-.iso-info-item {
- font-weight: bold;
- color: #999;
- font-size: 11px;
- line-height: 18px;
- max-width: 106px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-#iso-search {
- margin: 10px 15px;
-}
-
-#iso-search-loading {
- margin: 10px 15px;
- background: #C0C0C0 url(../images/theme-default/loading.gif) 7px
- center no-repeat;
- padding: 0 20px 0 26px;
-}
-
-#iso-more-loading {
- background: #C0C0C0 url(../images/theme-default/loading.gif) 7px
- center no-repeat;
- padding: 0 20px 0 26px;
-}
-
-#vm-image-local-box .body {
- margin: 30px 0 0 26px;
-}
-
-#vm-image-local-box .body input {
- background: none repeat scroll 0 0 #FFFFFF;
- border-left: 1px solid #BBBBBB;
- border-radius: 5px 5px 5px 5px;
- border-top: 1px solid #BBBBBB;
- box-shadow: 2px 2px 2px #EEEEEE inset;
- color: #333333;
- font-size: 13px;
- padding: 10px;
- margin-left: 10px;
- width: 600px;
-}
-
-#vm-image-local-box .body button {
- margin-left: 10px;
-}
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..961d23a 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: "689px"
+ },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/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..433cb48 100644
--- a/src/wok/plugins/kimchi/ui/pages/template-edit.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/template-edit.html.tmpl
@@ -22,129 +22,127 @@
#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 id="template-edit-window" class="window modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title">$_("Edit Template")</h4>
+ </div>
+ <div class="modal-body">
+ <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>
- </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 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>
+ </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>
- </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);"><span class="text">$_("Save")</span></a>
+ <button class="btn btn-default" type="button" data-dismiss="modal">$_("Cancel")</button>
+ </div>
</div>
<script>
kimchi.template_edit_main();
diff --git a/src/wok/plugins/kimchi/ui/pages/templates.html.tmpl b/src/wok/plugins/kimchi/ui/pages/templates.html.tmpl
index af1cf3f..977f30f 100644
--- a/src/wok/plugins/kimchi/ui/pages/templates.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/templates.html.tmpl
@@ -28,47 +28,64 @@
<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>
+ <!-- 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-general template-title template-title-position">
- <h2 class="title" title="{name}">{name}</h2>
- </div>
- <div class="template-os-position">
- <div class="template-text">$_("OS"): {os_distro}</div>
- <div class="template-text">$_("Version"): {os_version}</div>
- </div>
- <div class="template-cpu-position">
- <div class="template-text">$_("CPUs"): {cpus}</div>
- <div class="template-text">$_("Memory"): {memory}M</div>
+ </div>
+ </nav>
+ <div class="templates">
+ <div class="container">
+ <div id="alert-container"></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>
+ <div class="template-general template-title template-title-position">
+ <h2 class="title" title="{name}">{name}</h2>
+ </div>
+ <div class="template-os-position">
+ <div class="template-text">$_("OS"): {os_distro}</div>
+ <div class="template-text">$_("Version"): {os_version}</div>
+ </div>
+ <div class="template-cpu-position">
+ <div class="template-text">$_("CPUs"): {cpus}</div>
+ <div class="template-text">$_("Memory"): {memory}M</div>
+ </div>
+ </div>
+ </script>
</div>
- </script>
+ </div>
+<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();
--
1.9.3
More information about the Kimchi-devel
mailing list