[Kimchi-devel] [PATCH] [Kimchi] Multiple fixes in Gallery and List views for Templates and Guests tabs
Aline Manera
alinefm at linux.vnet.ibm.com
Fri Mar 4 13:29:36 UTC 2016
On 03/03/2016 06:28 PM, Socorro Stoppler wrote:
> Tested-by: Socorro Stoppler <socorro at linux.vnet.ibm.com>
>
> One comment below.
>
> On 03/03/2016 12:57 PM, sguimaraes943 at gmail.com wrote:
>> From: Samuel Guimarães <sguimaraes943 at gmail.com>
>>
>> Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
>> ---
>> 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;
>> +}
>> +
>> + at 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.
Thanks Socorro! I will remove this block before applying upstream.
>> +
>> +$(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 at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel
More information about the Kimchi-devel
mailing list