From: Andre Teodoro <andreteodoro.work@gmail.com> Signed-off-by: Andre Teodoro <andreteodoro.work@gmail.com> --- ui/css/src/modules/_templates.scss | 37 ++++++++++++++++++++++++++++++++++++- ui/js/src/kimchi.guest_main.js | 7 +++---- ui/js/src/kimchi.template_main.js | 5 ++++- ui/pages/tabs/templates.html.tmpl | 21 ++++++++++++++++----- 4 files changed, 59 insertions(+), 11 deletions(-) diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index 44e68c2..e87ef3d 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -202,6 +202,41 @@ /* VM List View classes*/ #templates-root-container { + .bootstrap-select.btn-group .dropdown-menu { + margin: 0px; + > li:first-child > a { + border-top: 1px solid $btn-default-border; + } + > li > a { + border-top: 1px solid $btn-default-border; + height: 34px; + padding: 4px 12px; + font-family: $font-family-light; + font-size: 13pt; + } + } + .control.open > .dropdown-menu { + display: block; + } + .control.open .caret { + background: #3a393b; + } + .control.open .caret:before { + content: '\f077'; + } + .control.open > a { + outline: 0; + } + .sort-button { + height: 34px; + padding: 4px 12px; + .caret { + height: 32px; + } + .caret:before { + top: 6px; + } + } .wok-vm-list { display: block; width: 100%; @@ -411,4 +446,4 @@ } } } -} \ No newline at end of file +} diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js index 257d76e..16c73f4 100644 --- a/ui/js/src/kimchi.guest_main.js +++ b/ui/js/src/kimchi.guest_main.js @@ -275,7 +275,7 @@ kimchi.initGuestFilter = function() { }; kimchi.resetGuestFilter = function() { - if(guestFilterList){ + if (guestFilterList) { $('#search_input').val(); listFiltered = false; } @@ -404,7 +404,6 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { //Add the OS Type and Icon var osType = result.find('.distro-icon'); - console.log(vmObject); if (vmObject.icon == 'plugins/kimchi/images/icon-fedora.png') { osType.addClass('icon-fedora'); osType.attr('val', 'Fedora'); @@ -439,7 +438,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { //Setup the VM console thumbnail display var curImg = vmObject.icon; if (vmObject.screenshot) { - curImg = vmObject.screenshot.replace(/^\//,''); + curImg = vmObject.screenshot.replace(/^\//, ''); } var load_src = curImg || 'plugins/kimchi/images/icon-vm.png'; var tile_src = prevScreenImage || vmObject['load-src']; @@ -595,7 +594,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { result.addClass('inactive'); result.find('.distro-icon').addClass('inactive'); result.find('.vnc-link').css("display", "none"); - result.find('.column-vnc').html('--'); + result.find('.column-vnc').html('--'); //Hide PowerOff guestActions.find(".shutoff-hidden").hide(); //Hide Pause diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js index 1c80db8..993247a 100644 --- a/ui/js/src/kimchi.template_main.js +++ b/ui/js/src/kimchi.template_main.js @@ -43,7 +43,6 @@ kimchi.doListTemplates = function() { 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').fadeOut(300, function() { @@ -100,6 +99,10 @@ kimchi.templateBindClick = function() { $("#gallery-table-button").html("View Gallery <i class='fa fa-angle-right'></i><i class='fa fa-angle-right'></i><i class='fa fa-angle-right'></i>"); } }); + }); + $('.sort').on('click', function(event) { + event.preventDefault(); + $('.filter-option').text($(this).text()); } kimchi.hideTitle = function() { $('#tempTitle').hide(); diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl index 3ac1059..211ad47 100644 --- a/ui/pages/tabs/templates.html.tmpl +++ b/ui/pages/tabs/templates.html.tmpl @@ -51,10 +51,21 @@ <div class="templates"> <div id="templates-container" class="container hidden"> <div class="row grid-control empty-when-logged-off"> - <div class="pull-left"> - <button type="button" id="gallery-table-button" class="btn btn-default">$_("View Gallery") <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></button> - </div> - <div class="pull-right"> + + <div class="form-group pull-right" style="display: inline-flex;"> + <div class="btn-group bootstrap-select control" style="width: 130px;margin-right: 15px;"> + <button type="button" class="btn dropdown-toggle form-control selectpicker btn-default sort-button" data-toggle="dropdown" title="Status" aria-expanded="false"><span class="filter-option pull-left">$_("Status")</span> <span class="caret"></span></button> + <div class="dropdown-menu open" style="max-height: 668px; overflow: hidden; min-height: 0px;padding: 0px;"> + <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 656px; overflow-y: auto; min-height: 0px;"> + <li role="presentation" nwAct="sort"><a href="#" class="sort" data-sort="name-filter">$_("Name")</a></li> + <li role="presentation" nwAct="clone"><a href="#" class="sort" data-sort="os-type-filter">$_("OS")</a></li> + <li role="presentation" nwAct="clone"><a href="#" class="sort" data-sort="os-version-filter">$_("Version")</a></li> + <li role="presentation" nwAct="clone"><a href="#" class="sort" data-sort="cpus-filter">$_("CPUs")</a></li> + <li role="presentation" nwAct="clone"><a href="#" class="sort" data-sort="memory-filter">$_("Memory")</a></li> + </ul> + </div> + </div> + <label for="search_input" class="sr-only">$_("Filter"):</label> <input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")"> </div> @@ -95,7 +106,7 @@ </script> <script id="templateTmpl" type="html/text"> <li class="wok-vm-body"> - <span class='column-name name-distro-icon icon-{os_distro}' title="{name}" val="{name}">{name}</span><!-- + <span class='column-name name-filter name-distro-icon icon-{os_distro}' title="{name}" val="{name}">{name}</span><!-- --><span class='column-action pull-right'> <span class="pull-right"> <div class="dropdown menu-flat"> -- 1.8.3.1