Re: [Kimchi-devel] [PATCH] [Kimchi] Multiple fixes in Gallery and List views for Templates and Guests tabs

Tested-by: Socorro Stoppler <socorro(a)linux.vnet.ibm.com&gt; One comment below. On 03/03/2016 12:57 PM, sguimaraes943(a)gmail.com wrote: > 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; > > li.wok-guest-list-header { > 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; > > span.guest-state { > .fa { > @@ -508,7 +523,7 @@ > width: 9.7%; > } > @media (min-width: $screen-xlg) { > - width: 14.15%; > + width: 12%; > } > } > > span.column-type { > @@ -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 @@ > > span.column-memory, > > span.column-storage, > > span.column-network { > - width: 12.5%; > + width: 13%; > } > > span.column-action { > 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; > > span { > 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'); Probably need to delete above if it's truly no longer needed.

> + > +$(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> _______________________________________________ Kimchi-devel mailing list Kimchi-devel(a)ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel