[Kimchi-devel] [PATCH 6/9] Adding new-ui to Templates tab

27 Oct 2015

From: samhenri <samuel.guimaraes@eldorado.org.br>

Signed-off-by: samhenri <samuel.guimaraes@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

    

[Kimchi-devel] [PATCH 6/9] Adding new-ui to Templates tab

sguimaraes943＠gmail.com