[Kimchi-devel] [PATCH 10/10] [new-ui] Templates tab

10 Nov 2015

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

Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br>
---
 .../kimchi/ui/js/src/kimchi.template_add_main.js   | 406 +++++++++++++++------
 .../kimchi/ui/js/src/kimchi.template_edit_main.js  |  48 +--
 .../kimchi/ui/js/src/kimchi.template_main.js       |  59 +--
 .../plugins/kimchi/ui/pages/template-add.html.tmpl | 344 ++++++++---------
 .../kimchi/ui/pages/template-edit.html.tmpl        | 266 +++++++-------
 .../plugins/kimchi/ui/pages/templates.html.tmpl    | 139 ++++---
 ui/css/src/modules/_iso-list.scss                  | 126 +++++++
 ui/css/src/modules/_templates.scss                 | 304 +++++++++++++++
 8 files changed, 1146 insertions(+), 546 deletions(-)
 create mode 100644 ui/css/src/modules/_iso-list.scss
 create mode 100644 ui/css/src/modules/_templates.scss

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

    

[Kimchi-devel] [PATCH 10/10] [new-ui] Templates tab

sguimaraes943＠gmail.com