[Kimchi-devel] [PATCH] [Kimchi] Implementing sort for Templates tab
andreteodoro.work at gmail.com
andreteodoro.work at gmail.com
Mon Jan 11 18:14:30 UTC 2016
From: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: Andre Teodoro <andreteodoro.work at 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
More information about the Kimchi-devel
mailing list