[Kimchi-devel] [PATCH] [Kimchi] Multiple fixes in Gallery and List views for Templates and Guests tabs
Socorro Stoppler
socorro at linux.vnet.ibm.com
Thu Mar 3 21:28:49 UTC 2016
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.
> +
> +$(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>
More information about the Kimchi-devel
mailing list