[Kimchi-devel] [PATCH] [Kimchi] Multiple fixes in Gallery and List views for Templates and Guests tabs
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Thu Mar 3 20:57:30 UTC 2016
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');
+
+$(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
More information about the Kimchi-devel
mailing list