From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: Andre Teodoro <andreteodoro.work@gmail.com> --- ui/js/src/kimchi.template_main.js | 32 ++++++++++++++++++-------------- ui/pages/tabs/templates.html.tmpl | 35 +++++++++++++++++++++++------------ 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js index 3062856..7002b03 100644 --- a/ui/js/src/kimchi.template_main.js +++ b/ui/js/src/kimchi.template_main.js @@ -15,34 +15,38 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -kimchi.doListTemplates = function() { + + kimchi.doListTemplates = function() { + $('.wok-mask').removeClass('hidden'); kimchi.listTemplates(function(result) { if (result && result.length) { $('#noTemplates').hide(); - var listHtml = '<li class="wok-vm-header">' + - '<span class="column-name">'+i18n['KCHTMPL6004M']+'</span><!--' + - '--><span class="column-type">'+i18n['KCHTMPL6005M']+'</span><!--' + - '--><span class="column-version">'+i18n['KCHTMPL6006M']+'</span><!--' + - '--><span class="column-processors">'+i18n['KCHTMPL6007M']+'</span><!--' + - '--><span class="column-memory">'+i18n['KCHTMPL6008M']+'</span><!-- ' + - '--><span class="column-action" style="display:none"> ' + - ' <span class="sr-only">'+i18n['KCHTMPL6009M']+'</span><!-- ' + - '--></span> ' + - '</li>'; + var listHtml = ''; var templateHtml = $('#templateTmpl').html(); $.each(result, function(index, value) { listHtml += wok.substitute(templateHtml, value); }); + $('.wok-vm-list').removeClass('hidden'); + $('#templates-container').removeClass('hidden'); $('#templateList').html(listHtml); kimchi.templateBindClick(); + $('.wok-mask').fadeOut(300, function() {}); } else { $('#templateList').html(''); $('#noTemplates').show(); + $('.wok-vm-list').addClass('hidden'); + $('#templates-container').addClass('hidden'); + $('.wok-mask').fadeOut(300, function() {}); } - $('.wok-mask').addClass('hidden'); + + var options = { valueNames: ['name-filter', 'os-type-filter', 'os-version-filter', 'cpus-filter', 'memory-filter'] }; + var templatesList = new List('templates-container', options); + }, function(err) { wok.message.error(err.responseJSON.reason); - $('.wok-mask').addClass('hidden'); + $('.wok-mask').fadeOut(300, function() { + $('.wok-mask').addClass('hidden'); + }); }); }; @@ -80,7 +84,7 @@ kimchi.templateBindClick = function() { }, function(err) { wok.message.error(err.responseJSON.reason); }); - }, function() {}); + }, function(){}); }); } kimchi.hideTitle = function() { diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl index e5b5720..ef4e660 100644 --- a/ui/pages/tabs/templates.html.tmpl +++ b/ui/pages/tabs/templates.html.tmpl @@ -24,7 +24,6 @@ <!DOCTYPE html> <html> <head> - <link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css"> <script src="plugins/kimchi/js/kimchi.min.js"></script> </head> <body> @@ -34,7 +33,7 @@ <!-- 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="sr-only">$_("Toggle navigation")</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -49,11 +48,11 @@ </div> </nav> <div class="templates"> - <div class="container"> - <div class="row grid-control hidden"> + <div id="templates-container" class="container hidden"> + <div class="row grid-control empty-when-logged-off"> <div class="pull-right"> - <label for="templates-filter" class="sr-only">$_("Filter"):</label> - <input type="text" class="filter form-control" placeholder="$_("Filter")"> + <label for="search_input" class="sr-only">$_("Filter"):</label> + <input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")"> </div> </div> <div id="alert-container"></div> @@ -61,11 +60,23 @@ $_("No templates found.") </div> <div id="alert-container"></div> - <ul id="templateList" class="wok-vm-list empty-when-logged-off"> + <ul id="templates-grid" class="wok-vm-list hidden empty-when-logged-off"> + <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> + <li> + <ul id="templateList" class="ul-body list"> + </ul> + </li> </ul> </div> </div> - <div class="wok-mask hidden"> + <div class="wok-mask"> <div class="wok-mask-loader-container"> <div class="wok-mask-loading"> <div class="wok-mask-loading-icon"></div> @@ -94,13 +105,13 @@ </div> </span> </span><!-- - --><span class='column-type distro-icon icon-{os_distro}' val="{os_distro}">{os_distro}</span><!-- + --><span class='column-type os-type-filter 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='column-version os-version-filter' 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='column-processors cpus-filter' 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='column-memory memory-filter' val="{memory}"><strong>{memory}</strong> $_("M")</span><!-- --><span class="item-hidden">$_("Memory")</span> </li> </script> -- 1.9.3