From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; --- 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>&nbsp;<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