[Kimchi-devel] [PATCH] [Kimchi] Implementing sort for Templates tab
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Thu Jan 21 19:58:59 UTC 2016
From: Samuel Guimarães <sguimaraes943 at gmail.com>
Signed-off-by: Andre Teodoro <andreteodoro.work at gmail.com>
---
ui/css/kimchi.css | 61 ++++++++++++++++++++++++++++++++++++++
ui/css/src/modules/_templates.scss | 49 ++++++++++++++++++++++++++++++
ui/js/src/kimchi.template_main.js | 18 +++++------
ui/pages/i18n.json.tmpl | 2 ++
ui/pages/tabs/templates.html.tmpl | 26 ++++++++++++----
5 files changed, 141 insertions(+), 15 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index d74d5cc..c24dc8b 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1280,6 +1280,67 @@
}
/* VM List View classes*/
+#templates-root-container .grid-control input[type="text"] {
+ height: 38px;
+ display: inline-block;
+ vertical-align: top;
+}
+
+#templates-root-container .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 162px;
+ margin-right: 10px;
+}
+
+#templates-root-container .bootstrap-select.btn-group .dropdown-menu {
+ margin: 0px;
+}
+
+#templates-root-container .bootstrap-select.btn-group .dropdown-menu > li > a {
+ border-top: 1px solid #fff;
+ border-bottom: 1px solid #eee;
+ height: 38px;
+ padding: 4px 12px;
+ font-family: "Open Sans", Helvetica, Arial, "Lucida Grande", sans-serif;
+ font-size: 13pt;
+}
+
+#templates-root-container .bootstrap-select.btn-group .dropdown-menu > li:last-child > a {
+ border-bottom: 0;
+}
+
+#templates-root-container .control.open > .dropdown-menu {
+ display: block;
+ display: block;
+ width: 188px;
+ margin-left: -26px;
+ border-radius: 0;
+}
+
+#templates-root-container .control.open .caret {
+ background: #3a393b;
+}
+
+#templates-root-container .control.open .caret:before {
+ content: '\f077';
+}
+
+#templates-root-container .control.open > a {
+ outline: 0;
+}
+
+#templates-root-container .sort-button {
+ height: 38px;
+ padding: 4px 12px;
+}
+
+#templates-root-container .sort-button .caret {
+ height: 36px;
+}
+
+#templates-root-container .sort-button .caret:before {
+ top: 6px;
+}
+
#templates-root-container .wok-vm-list {
display: block;
width: 100%;
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
index 44e68c2..6bd4f43 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -202,6 +202,55 @@
/* VM List View classes*/
#templates-root-container {
+ .grid-control input[type="text"] {
+ height: 38px;
+ display: inline-block;
+ vertical-align: top;
+ }
+ .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 162px;
+ margin-right: 10px;
+ }
+ .bootstrap-select.btn-group .dropdown-menu {
+ margin: 0px;
+ > li > a {
+ border-top: 1px solid $table-bg;
+ border-bottom: 1px solid $table-border-color;
+ height: 38px;
+ padding: 4px 12px;
+ font-family: $font-family-light;
+ font-size: 13pt;
+ }
+ > li:last-child > a {
+ border-bottom: 0;
+ }
+ }
+ .control.open > .dropdown-menu {
+ display: block;
+ display: block;
+ width: 188px;
+ margin-left: -26px;
+ border-radius: 0;
+ }
+ .control.open .caret {
+ background: #3a393b;
+ }
+ .control.open .caret:before {
+ content: '\f077';
+ }
+ .control.open > a {
+ outline: 0;
+ }
+ .sort-button {
+ height: 38px;
+ padding: 4px 12px;
+ .caret {
+ height: 36px;
+ }
+ .caret:before {
+ top: 6px;
+ }
+ }
.wok-vm-list {
display: block;
width: 100%;
diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js
index 1c80db8..ef887c8 100644
--- a/ui/js/src/kimchi.template_main.js
+++ b/ui/js/src/kimchi.template_main.js
@@ -90,16 +90,16 @@ kimchi.templateBindClick = function() {
});
$('#gallery-table-button').on('click', function(event) {
- if ($("#templates-grid").hasClass('wok-vm-list')) {
- $("#templates-grid").removeClass("wok-vm-list");
- $("#templates-grid").addClass("wok-vm-gallery");
- $("#gallery-table-button").html("View Table <i class='fa fa-angle-right'></i><i class='fa fa-angle-right'></i><i class='fa fa-angle-right'></i>");
- } else {
- $("#templates-grid").removeClass("wok-vm-gallery");
- $("#templates-grid").addClass("wok-vm-list");
- $("#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>");
- }
+ $(".wok-vm-list, .wok-vm-gallery").toggleClass("wok-vm-list wok-vm-gallery");
+ var text = $('#gallery-table-button span.text').text();
+ $('#gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']);
+ });
+
+ $('.sort').on('click', function(event) {
+ event.preventDefault();
+ $('.filter-option').text($(this).text());
});
+
}
kimchi.hideTitle = function() {
$('#tempTitle').hide();
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index f940ee5..b5e01f4 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -51,6 +51,8 @@
"KCHTMPL6002M": "$_("This may take a long time. Do you want to continue?")",
"KCHTMPL6003M": "$_("This will permanently delete the template. Would you like to continue?")",
+ "KCHTMPL6004M": "$_("View Table")",
+ "KCHTMPL6005M": "$_("View Gallery")",
"KCHVM6001M": "$_("This will delete the virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")",
"KCHVM6002M": "$_("Power off Confirmation")",
diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
index 3ac1059..ed98e52 100644
--- a/ui/pages/tabs/templates.html.tmpl
+++ b/ui/pages/tabs/templates.html.tmpl
@@ -52,12 +52,26 @@
<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">
- <label for="search_input" class="sr-only">$_("Filter"):</label>
- <input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")">
+ <button type="button" id="gallery-table-button" class="btn btn-default"><span class="text">$_("View Gallery")</span> <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="form-group pull-right">
+ <div class="btn-group bootstrap-select control">
+ <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>
</div>
<div id="alert-container"></div>
<div id="noTemplates" class="list-no-result" style="display: none;">
@@ -95,7 +109,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