Multiple fixes in Gallery and List views for Templates and Guests tabs

Signed-off-by: Samuel Guimarães <sguimaraes943@gmail.com>
kimchi-project · Mar 4, 2016 · 4092ecc · 4092ecc
1 parent b5b737a
commit 4092ecc
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 39 deletions.
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
@@ -448,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 {
@@ -461,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;
 }
@@ -503,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;
@@ -535,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 {
@@ -571,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 {
@@ -618,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 {
@@ -816,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%;
   }
 }
 
@@ -863,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;
   }
 }
@@ -876,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,
@@ -1829,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 {
@@ -1854,6 +1871,8 @@ 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 {
@@ -1878,7 +1897,7 @@ body.wok-gallery {
 }
 
 #templates-root-container .wok-vm-gallery .menu-flat {
-  width: 239px;
+  width: 240px;
   margin-left: -20px;
 }
 

diff --git 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,15 +552,15 @@
                 color: $vnc-blue !important;
             }
             @media (min-width: $screen-lg + 130) {
-                width: 10.84%;
+                width: 10%;
                 display: inline-block;
             }
         }
         > span.column-processors,
         > 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
@@ -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
@@ -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
@@ -32,3 +32,7 @@ kimchi.getCapabilities(function(result) {
 }, function() {
     kimchi.capabilities = {};
 });
+
+$(function(){
+    $('body').removeClass('wok-list wok-gallery');
+});
diff --git 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
@@ -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() {