From: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; Signed-off-by: Samuel Guimarães <sguimaraes943(a)gmail.com&gt; --- ui/css/kimchi.css | 76 +++++++++++++++++++++++++++++--------- ui/css/src/modules/_guests.scss | 37 +++++++++++++------ ui/css/src/modules/_templates.scss | 5 ++- ui/js/src/kimchi.guest_main.js | 32 +++++++++++----- ui/js/src/kimchi.main.js | 23 ++++++++++++ ui/js/src/kimchi.network.js | 1 + ui/js/src/kimchi.storage_main.js | 1 + ui/js/src/kimchi.template_main.js | 14 ++++--- ui/pages/tabs/guests.html.tmpl | 2 +- 9 files changed, 146 insertions(+), 45 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 346d04f..4fe259f 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -61,6 +61,24 @@ } } +.delayed-fadein { + -webkit-animation: fadein 2s; + -o-animation: fadein 2s; + animation: fadein 2s; +} + +@keyframes fadein { + 0% { + opacity: 0; + } + 20% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + /* Template & Guests Modal Windows */ #template-add-window.modal-content label.box-iso-outer, #guest-add-window.modal-content label.box-iso-outer { @@ -78,7 +96,7 @@ #guest-add-window.modal-content label.box-iso-outer span.box-iso-border { display: block; border: 3px solid transparent; - transition: all .1s ease-in-out; + transition: all 0.1s ease-in-out; } #template-add-window.modal-content label.box-iso-outer .iso-radio-hidden:checked + span.box-iso-border, @@ -100,7 +118,7 @@ display: block; border: 1px solid transparent; background: #fff; - transition: all .1s ease-in-out; + transition: all 0.1s ease-in-out; } #template-add-window.modal-content ul.list-template, @@ -430,7 +448,7 @@ #guest-content-container .wok-guest-gallery { list-style: none; - padding: 0; + padding: 0 0 0 5px; } #guest-content-container .wok-guest-gallery > li.wok-guest-list-header { @@ -443,13 +461,14 @@ } #guest-content-container .wok-guest-gallery .wok-guest-list-item { - padding: 0 0px 0 0px; + padding: 0; width: 240px; - height: 453px; + height: 435px; display: inline-block; border: 0; background: #fff; margin-right: 20px; + margin-bottom: 20px; position: relative; vertical-align: top; } @@ -485,8 +504,10 @@ } #guest-content-container .wok-guest-gallery .wok-guest-list-item .progress { - display: inline-block; + display: block; + float: right; width: 125px; + height: 18px; position: relative; vertical-align: top; margin-top: 0; @@ -517,10 +538,13 @@ } #guest-content-container .wok-guest-gallery .wok-guest-list-item .item-hidden { + clear: both; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + position: relative; + top: -10px; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-action.pull-right { @@ -553,23 +577,33 @@ display: block; width: 220px; white-space: nowrap; + cursor: default; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-processors, #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-memory, #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-storage, #guest-content-container .wok-guest-gallery .wok-guest-list-item .column-network { - margin-top: 21px; + margin-top: 14px; display: block; height: 38px; padding-left: 20px; - padding-right: 20px; + padding-right: 18px; +} + +#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-processors { + margin-top: 18px !important; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .percentage-label, #guest-content-container .wok-guest-gallery .wok-guest-list-item .measure-label { - display: inline-block; + float: left; + display: block; width: 68px; + font-size: 21px; + font-weight: 600; + top: -7px; + position: relative; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .font-bold { @@ -600,7 +634,7 @@ text-align: left; padding-left: 21px; border-radius: 0; - background: rgba(0, 0, 0, 0.8) !important; + background: rgba(0, 0, 0, 0.6) !important; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state .fa { @@ -798,7 +832,7 @@ @media (min-width: 1540px) { #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-name, #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-name { - width: 14.15%; + width: 12%; } } @@ -845,7 +879,7 @@ @media (min-width: 1330px) { #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-vnc, #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-vnc { - width: 10.84%; + width: 10%; display: inline-block; } } @@ -858,7 +892,7 @@ #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-memory, #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-storage, #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-network { - width: 12.5%; + width: 13%; } #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-action, @@ -1291,7 +1325,7 @@ body.wok-gallery { border: 1px solid #eee !important; margin-bottom: 3px; display: block; - padding: .2em .6em .3em; + padding: 0.2em 0.6em 0.3em; font-weight: 700; line-height: 1; text-align: left; @@ -1561,7 +1595,7 @@ body.wok-gallery { height: 664px; width: 2164px; left: 0; - transition: left .2s ease-in-out; + transition: left 0.2s ease-in-out; } #template-add-window.modal-content p { @@ -1811,6 +1845,7 @@ body.wok-gallery { border: 0; background: #fff; margin-right: 20px; + margin-bottom: 20px; } #templates-root-container .wok-vm-gallery .wok-vm-body > span { @@ -1836,9 +1871,13 @@ body.wok-gallery { text-overflow: ellipsis !important; overflow: hidden !important; padding-right: 35px !important; + white-space: nowrap; + cursor: default; } -#templates-root-container .wok-vm-gallery .item-hidden.column-type, #templates-root-container .wok-vm-gallery .item-hidden.column-version, #templates-root-container .wok-vm-gallery .item-hidden.column-processors { +#templates-root-container .wok-vm-gallery .item-hidden.column-type, +#templates-root-container .wok-vm-gallery .item-hidden.column-version, +#templates-root-container .wok-vm-gallery .item-hidden.column-processors { padding-bottom: 11px; } @@ -1860,7 +1899,7 @@ body.wok-gallery { } #templates-root-container .wok-vm-gallery .menu-flat { - width: 239px; + width: 240px; margin-left: -20px; } @@ -2379,7 +2418,8 @@ body.wok-gallery { white-space: nowrap; } -.storage-modal .filter-select.popable .popover ul li:hover, .storage-modal .filter-select.popable .popover ul li:focus, +.storage-modal .filter-select.popable .popover ul li:hover, +.storage-modal .filter-select.popable .popover ul li:focus, .storage-modal .storage-target-input .popover ul li:hover, .storage-modal .storage-target-input .popover ul li:focus, .storage-modal .storage-add-input .popover ul li:hover, diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss index 9cf87a2..6f5dbf0 100644 --- a/ui/css/src/modules/_guests.scss +++ b/ui/css/src/modules/_guests.scss @@ -202,7 +202,7 @@ } .wok-guest-gallery { list-style: none; - padding: 0; + padding: 0 0 0 5px; display: none; } @@ -211,13 +211,14 @@ padding: 0; } .wok-guest-list-item { - padding: 0 0px 0 0px; + padding: 0; width: 240px; - height: 453px; + height: 435px; display: inline-block; border: 0; background: $body-bg; margin-right: 20px; + margin-bottom: 20px; position: relative; vertical-align: top; &.inactive { @@ -248,8 +249,10 @@ font-weight: 400; } .progress { - display: inline-block; + display: block; + float: right; width: 125px; + height: 18px; position: relative; vertical-align: top; margin-top: 0; @@ -275,10 +278,13 @@ } } .item-hidden { + clear: both; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + position: relative; + top: -10px; } .column-action.pull-right { position: absolute; @@ -307,21 +313,30 @@ display: block; width: 220px; white-space: nowrap; + cursor: default; } .column-processors, .column-memory, .column-storage, .column-network { - margin-top: 21px; + margin-top: 14px; display: block; height: 38px; padding-left: 20px; - padding-right: 20px; + padding-right: 18px; + } + .column-processors { + margin-top: 18px !important; } .percentage-label, .measure-label { - display: inline-block; + float: left; + display: block; width: 68px; + font-size: 21px; + font-weight: 600; + top: -7px; + position: relative; } .font-bold { font-weight: bold !important; @@ -346,7 +361,7 @@ text-align: left; padding-left: 21px; border-radius: 0; - background: rgba(0, 0, 0, .8) !important; + background: rgba(0, 0, 0, .6) !important; .fa { @@ -508,7 +523,7 @@ width: 9.7%; } @media (min-width: $screen-xlg) { - width: 14.15%; + width: 12%; } } @@ -537,7 +552,7 @@ color: $vnc-blue !important; } @media (min-width: $screen-lg + 130) { - width: 10.84%; + width: 10%; display: inline-block; } } @@ -545,7 +560,7 @@ - width: 12.5%; + width: 13%; } width: 165px; diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index 371d5ce..86b9305 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -399,6 +399,7 @@ border: 0; background: $body-bg; margin-right: 20px; + margin-bottom: 20px; display: inline-block; width: 100%; @@ -421,6 +422,8 @@ text-overflow: ellipsis !important; overflow: hidden !important; padding-right: 35px !important; + white-space: nowrap; + cursor: default; } .item-hidden { &.column-type, @@ -445,7 +448,7 @@ width: 100%; } .menu-flat { - width: 239px; + width: 240px; margin-left: -20px; } .btn { diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js index eb05033..2542a63 100644 --- a/ui/js/src/kimchi.guest_main.js +++ b/ui/js/src/kimchi.guest_main.js @@ -439,11 +439,16 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { result.data(vmObject); //Add the Name - var guestTitle = result.find('.title').attr('val', vmObject.name); + var guestTitle = result.find('.title').attr({'val': vmObject.name, 'title': vmObject.name}); guestTitle.html(vmObject.name); - var scrensh = result.find('.screenshot').css('background-image', 'url('+vmObject.screenshot+')'); - scrensh.attr('title', vmObject.name); + if(vmObject.screenshot !== null){ + var scrensh = result.find('.screenshot').css('background-image', 'url('+vmObject.screenshot+')'); + scrensh.attr('title', vmObject.name); + } else { + var scrensh = result.find('.screenshot').css('background-image', 'none'); + scrensh.attr('title', vmObject.name); + } //Add the OS Type and Icon var osType = result.find('.column-type.distro-icon'); @@ -471,6 +476,10 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { osType.addClass('icon-debian'); osType.attr('val', 'Debian'); osType.html('Debian'); + } else if (vmObject.icon !== null) { + osType.css('background-image',vmObject.icon); + osType.attr('val', 'Unknown'); + osType.html('Unknown'); } else { //Unknown osType.addClass('icon-unknown'); @@ -491,6 +500,8 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) { osName.addClass('icon-gentoo'); } else if (vmObject.icon == 'plugins/kimchi/images/icon-debian.png') { osName.addClass('icon-debian'); + } else if (vmObject.icon !== null) { + osName.css('background-image',vmObject.icon); } else { osName.addClass('icon-unknown'); } @@ -777,7 +788,15 @@ kimchi.guestSetRequestHeader = function(xhr) { xhr.setRequestHeader('Accept', 'text/html'); }; +kimchi.toggleGuestsGallery = function() { + $(".wok-guest-list, .wok-guest-gallery").toggleClass("wok-guest-list wok-guest-gallery"); + $(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery"); + var text = $('#guest-gallery-table-button span.text').text(); + $('#guest-gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']); +}; + kimchi.guest_main = function() { + $('body').addClass('wok-list'); if (wok.tabMode['guests'] === 'admin') { $('.tools').attr('style', 'display'); @@ -791,13 +810,8 @@ kimchi.guest_main = function() { kimchi.vmTimeout && clearTimeout(kimchi.vmTimeout); }); - $('body').removeClass("wok-gallery").addClass("wok-list"); - $('#guest-gallery-table-button').on('click', function(event) { - $(".wok-guest-list, .wok-guest-gallery").toggleClass("wok-guest-list wok-guest-gallery"); - $(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery"); - var text = $('#guest-gallery-table-button span.text').text(); - $('#guest-gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']); + kimchi.toggleGuestsGallery(); }); kimchi.resetGuestFilter(); diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js index 5ea56a2..2d8b860 100644 --- a/ui/js/src/kimchi.main.js +++ b/ui/js/src/kimchi.main.js @@ -32,3 +32,26 @@ kimchi.getCapabilities(function(result) { }, function() { kimchi.capabilities = {}; }); + +// kimchi.adjustScreen = function() { +// //Get document height and adjusts main content to fill divs between topbar and footer +// var documentHeight = $('html').height(); +// var topBarHeight = $('.topbar').height(); +// var toolbarHeight = $('.toolbar').height(); +// var footerHeight = $('footer').height(); +// var offsetHeight = topBarHeight + toolbarHeight + footerHeight; +// var contentHeight = $('#main > div > div > .container').height(); +// //$('#main > div > div > .container').height(documentHeight - topBarHeight - footerHeight - toolbarHeight); +// console.log('documentHeight '+documentHeight); +// console.log('contentHeight '+contentHeight); +// }; + +// $(window).resize(function() { +// kimchi.adjustScreen(); +// }); + +// $(window).trigger('resize'); + +$(function(){ + $('body').removeClass('wok-list wok-gallery'); +}); \ No newline at end of file diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 02a37cd..5d6e52e 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -22,6 +22,7 @@ kimchi.NETWORK_TYPE_VEPA = "vepa"; kimchi.initNetwork = function() { + $('body').removeClass('wok-list wok-gallery'); if(wok.tabMode['network'] === 'admin') { $('.tools').attr('style','display'); $('#networkGrid .wok-nw-grid-header span:last-child').attr('style','display'); diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js index 17a43a7..9eaaa51 100644 --- a/ui/js/src/kimchi.storage_main.js +++ b/ui/js/src/kimchi.storage_main.js @@ -420,6 +420,7 @@ kimchi.doListVolumes = function(poolObj) { }; kimchi.storage_main = function() { + $('body').removeClass('wok-list wok-gallery'); if(wok.tabMode['storage'] === 'admin') { $('.tools').attr('style','display'); $('#storage-pool-add').on('click', function() { diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js index 93c3837..5787d77 100644 --- a/ui/js/src/kimchi.template_main.js +++ b/ui/js/src/kimchi.template_main.js @@ -52,6 +52,13 @@ kimchi.doListTemplates = function() { }); }; +kimchi.toggleTemplatesGallery = function() { + $(".wok-vm-list, .wok-vm-gallery").toggleClass("wok-vm-list wok-vm-gallery"); + $(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery"); + var text = $('#gallery-table-button span.text').text(); + $('#gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']); +}; + kimchi.templateBindClick = function() { $('.template-edit a').on('click', function(event) { event.preventDefault(); @@ -90,10 +97,7 @@ kimchi.templateBindClick = function() { }); $('#gallery-table-button').on('click', function(event) { - $(".wok-vm-list, .wok-vm-gallery").toggleClass("wok-vm-list wok-vm-gallery"); - $(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery"); - var text = $('#gallery-table-button span.text').text(); - $('#gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']); + kimchi.toggleTemplatesGallery(); }); $('.sort').on('click', function(event) { @@ -107,7 +111,7 @@ kimchi.hideTitle = function() { }; kimchi.template_main = function() { - $('body').removeClass("wok-gallery").addClass("wok-list"); + $('body').addClass('wok-list'); if (wok.tabMode['templates'] === 'admin') { $('.tools').attr('style', 'display'); $("#template-add").on("click", function(event) { diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl index 60a87aa..4d72ea6 100644 --- a/ui/pages/tabs/guests.html.tmpl +++ b/ui/pages/tabs/guests.html.tmpl @@ -59,7 +59,7 @@ <div class="pull-left"> <button type="button" id="guest-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="pull-right"> + <div class="form-group pull-right"> <label for="search_input" class="sr-only">$_("Filter"):</label> <input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")"> </div> -- 1.9.3

On 03/03/2016 06:28 PM, Socorro Stoppler wrote: Thanks Socorro! I will remove this block before applying upstream.