[Kimchi-devel] [PATCH] [Kimchi] Adding gallery view to guest tab and minor fixes to templates tab

2 Mar 2016

From: peterpennings <peterpnns@gmail.com>

Signed-off-by: peterpennings <peterpnns@gmail.com>
---
 ui/css/kimchi.css                  | 494 ++++++++++++++++++++++++++++---------
 ui/css/src/modules/_guests.scss    | 434 +++++++++++++++++++++++++-------
 ui/css/src/modules/_templates.scss |   3 +-
 ui/js/src/kimchi.guest_main.js     |  37 ++-
 ui/js/src/kimchi.template_main.js  |   2 +
 ui/pages/guest.html.tmpl           |  50 ++--
 ui/pages/tabs/guests.html.tmpl     |   5 +-
 7 files changed, 792 insertions(+), 233 deletions(-)

diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 51bb226..346d04f 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -302,15 +302,20 @@
   list-style-type: none;
 }
 
-#guest-content-container .wok-guest-list > li:nth-child(even) {
+#guest-content-container .wok-guest-list .wok-guest-list-body > ul {
+  list-style: none;
+  padding: 0;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-body > ul > li:nth-child(even) {
   background-color: #fcfcfc;
 }
 
-#guest-content-container .wok-guest-list > li:nth-child(odd) {
+#guest-content-container .wok-guest-list .wok-guest-list-body > ul > li:nth-child(odd) {
   background-color: #fff;
 }
 
-#guest-content-container .wok-guest-list > li:first-child {
+#guest-content-container .wok-guest-list .wok-guest-list-body > ul > li:first-child {
   border-top: 0;
 }
 
@@ -341,11 +346,11 @@
   display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body {
+#guest-content-container .wok-guest-list .wok-guest-list-item {
   border-top: 1px solid #eee;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body > span {
+#guest-content-container .wok-guest-list .wok-guest-list-item > span {
   padding: 6px 2px;
   display: inline-block;
   vertical-align: middle;
@@ -355,7 +360,16 @@
   font-weight: 400;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body .progress {
+#guest-content-container .wok-guest-list .wok-guest-list-item .nodata,
+#guest-content-container .wok-guest-list .wok-guest-list-item .screenshot {
+  display: none;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-item .column-name.distro-icon {
+  background: none;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-item .progress {
   display: inline-block;
   width: 60%;
   position: relative;
@@ -366,7 +380,7 @@
   box-shadow: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body .progress-bar {
+#guest-content-container .wok-guest-list .wok-guest-list-item .progress-bar {
   position: absolute;
   top: 0;
   left: 0;
@@ -374,129 +388,400 @@
   box-shadow: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body .progress-bar.dark-grey {
+#guest-content-container .wok-guest-list .wok-guest-list-item .progress-bar.dark-grey {
   background-color: #929497;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body .progress-bar.medium-grey {
+#guest-content-container .wok-guest-list .wok-guest-list-item .progress-bar.medium-grey {
   background-color: #bbbdbf;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body .progress-bar.light-grey {
+#guest-content-container .wok-guest-list .wok-guest-list-item .progress-bar.light-grey {
   background-color: #e6e7e8;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body div.percentage-label {
+#guest-content-container .wok-guest-list .wok-guest-list-item .column-type {
+  padding-left: 40px;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-item .column-actions .btn {
+  margin-top: 6px;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-item div.percentage-label {
   display: inline-block;
   width: 25%;
   margin-top: 6px;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body div.measure-label {
+#guest-content-container .wok-guest-list .wok-guest-list-item div.measure-label {
   display: inline-block;
   width: 35%;
   margin-top: 6px;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state {
-  width: 40px;
-  text-align: center;
+#guest-content-container .wok-guest-list .wok-guest-list-item .item-hidden {
+  display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state {
-  font-size: 22px;
-  position: relative;
+#guest-content-container .wok-guest-list .wok-guest-list-item .btn .guest-state {
+  display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running > .fa-ban,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.running > .fa-ban {
+#guest-content-container .wok-guest-gallery {
+  list-style: none;
+  padding: 0;
+}
+
+#guest-content-container .wok-guest-gallery > li.wok-guest-list-header {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running > .fa-power-off,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.running > .fa-power-off {
-  color: #a8d46f;
+#guest-content-container .wok-guest-gallery > li > ul {
+  list-style: none;
+  padding: 0;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running > .fa-undo,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.running > .fa-undo {
+#guest-content-container .wok-guest-gallery .wok-guest-list-item {
+  padding: 0 0px 0 0px;
+  width: 240px;
+  height: 453px;
+  display: inline-block;
+  border: 0;
+  background: #fff;
+  margin-right: 20px;
+  position: relative;
+  vertical-align: top;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive .progress,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive .item-hidden,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive [class^="column-"] {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running > .fa-refresh,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.running > .fa-refresh {
+#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive .nodata {
+  display: block;
+  padding-top: 115px;
+  padding-bottom: 115px;
+  text-align: center;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive span.column-action, #guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive span.column-name {
+  display: block !important;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item.inactive .btn {
+  background: #4d4c4e !important;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item > span {
+  display: inline-block;
+  width: 100%;
+  font-family: "Open Sans", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-size: 12.5pt;
+  line-height: 1.42857;
+  font-weight: 400;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .progress {
+  display: inline-block;
+  width: 125px;
+  position: relative;
+  vertical-align: top;
+  margin-top: 0;
+  margin-bottom: 0;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .progress-bar.dark-grey {
+  background-color: #929497;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .progress-bar.medium-grey {
+  background-color: #bbbdbf;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .progress-bar.light-grey {
+  background-color: #e6e7e8;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .item-hidden {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-action.pull-right {
+  position: absolute;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .ul-body {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-type,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .nodata,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-vnc,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-state {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff > .fa-ban,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.shutoff > .fa-ban {
-  color: #999;
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-name {
+  line-height: 2.5 !important;
+  font-size: 15.3pt !important;
+  font-weight: 500 !important;
+  text-overflow: ellipsis !important;
+  overflow: hidden !important;
+  padding-right: 35px !important;
+  padding-left: 20px;
+  margin-right: 20px;
+  display: block;
+  width: 220px;
+  white-space: nowrap;
+}
+
+#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;
+  display: block;
+  height: 38px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+#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;
+  width: 68px;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .font-bold {
+  font-weight: bold !important;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .pull-right {
+  float: none !important;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .dropdown-menu {
+  width: 100%;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .screenshot {
+  width: 100%;
+  height: 148px;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .menu-flat {
+  width: 240px;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff > .fa-power-off,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.shutoff > .fa-power-off {
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn {
+  width: 100%;
+  text-align: left;
+  padding-left: 21px;
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state .fa {
+  margin-right: 10px;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.running {
+  display: block;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.paused,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.shutoff,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.starting,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.running span.resetting {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff > .fa-undo,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.shutoff > .fa-undo {
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.shutoff {
+  display: block;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.paused,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.running,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.starting,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.shutoff span.resetting {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff > .fa-refresh,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.shutoff > .fa-refresh {
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.starting {
+  display: block;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.paused,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.running,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.shutoff,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.starting span.resetting {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting > .fa-ban,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.starting > .fa-ban {
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.resetting {
+  display: block;
+}
+
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.paused,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.running,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.shutoff,
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state.resetting span.starting {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting > .fa-power-off,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.starting > .fa-power-off {
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .guest-done {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting > .fa-undo,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.starting > .fa-undo {
-  color: #999;
+#guest-content-container .wok-guest-gallery .wok-guest-list-item .guest-state {
+  display: block;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-processors > div > div.progress-bar.cpu-progress-bar,
+#guest-content-container .wok-guest-gallery .wok-guest-list-body .wok-guest-list-item > span.column-processors > div > div.progress-bar.cpu-progress-bar {
+  background-color: #d9182d;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-memory > div > div.progress-bar.memory-progress-bar,
+#guest-content-container .wok-guest-gallery .wok-guest-list-body .wok-guest-list-item > span.column-memory > div > div.progress-bar.memory-progress-bar {
+  background-color: #008abf;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting > .fa-refresh,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.starting > .fa-refresh {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-storage > div > div.progress-bar.storage-progress-bar,
+#guest-content-container .wok-guest-gallery .wok-guest-list-body .wok-guest-list-item > span.column-storage > div > div.progress-bar.storage-progress-bar {
+  background-color: #fdb813;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-network > div > div.progress-bar.network-progress-bar,
+#guest-content-container .wok-guest-gallery .wok-guest-list-body .wok-guest-list-item > span.column-network > div > div.progress-bar.network-progress-bar {
+  background-color: #7f1c7d;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state {
+  width: 40px;
+  text-align: center;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state {
+  font-size: 22px;
+  position: relative;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state span.text-status,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state span.text-status {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting > .fa-ban,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.resetting > .fa-ban {
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.running,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.running {
+  display: block;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.paused,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.starting,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running span.resetting,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.paused,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.starting,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running span.resetting {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting > .fa-power-off,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.resetting > .fa-power-off {
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.running .fa,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.running .fa {
+  color: #a8d46f;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.shutoff {
+  display: block;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.paused,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.running,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.starting,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff span.resetting,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.paused,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.running,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.starting,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.resetting {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting > .fa-undo,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.resetting > .fa-undo {
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.shutoff .fa,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff .fa {
+  color: #999;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.starting,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.starting {
+  display: block;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.paused,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.running,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting span.resetting,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.paused,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.running,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting span.resetting {
   display: none;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting > .fa-refresh,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.resetting > .fa-refresh {
-  color: #a8d46f;
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.starting .fa,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.starting .fa {
+  color: #999;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.resetting,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.resetting {
+  display: block;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.paused > .fa,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-state > span.guest-state.paused > .fa {
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.paused,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.running,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting span.starting,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.paused,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.running,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting span.starting {
   display: none;
 }
 
+#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-state > span.guest-state.resetting .fa,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.resetting .fa {
+  color: #a8d46f;
+}
+
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-name,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-name {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-name {
   width: 13.7%;
   overflow: hidden;
   white-space: nowrap;
@@ -505,20 +790,20 @@
 
 @media (min-width: 1330px) {
   #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-name,
-  #guest-content-container .wok-guest-list .wok-guest-list-body > span.column-name {
+  #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-name {
     width: 9.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 > span.column-name {
+  #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-name {
     width: 14.15%;
   }
 }
 
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-type,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-type {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-type {
   width: 11.74%;
   background-position: 0 50%;
   text-overflow: ellipsis;
@@ -528,29 +813,29 @@
 
 @media (min-width: 1330px) {
   #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-type,
-  #guest-content-container .wok-guest-list .wok-guest-list-body > span.column-type {
+  #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-type {
     width: 10.74%;
   }
 }
 
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-vnc,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-vnc {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-vnc {
   display: none;
 }
 
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-vnc > a,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-vnc > a {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-vnc > a {
   font-weight: normal;
   color: #5ab3d4 !important;
 }
 
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-vnc .fa-spin,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-vnc .fa-spin {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-vnc .fa-spin {
   display: none;
 }
 
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-vnc .fa-spin.active,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-vnc .fa-spin.active {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-vnc .fa-spin.active {
   display: inline-block;
   margin-right: 8px;
   font-size: 22px;
@@ -559,7 +844,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 > span.column-vnc {
+  #guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-vnc {
     width: 10.84%;
     display: inline-block;
   }
@@ -569,92 +854,76 @@
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-memory,
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-storage,
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-network,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-processors,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-memory,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-storage,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-network {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-processors,
+#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%;
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-processors > div > div.progress-bar.cpu-progress-bar,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-processors > div > div.progress-bar.cpu-progress-bar {
-  background-color: #d9182d;
-}
-
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-memory > div > div.progress-bar.memory-progress-bar,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-memory > div > div.progress-bar.memory-progress-bar {
-  background-color: #008abf;
-}
-
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-storage > div > div.progress-bar.storage-progress-bar,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-storage > div > div.progress-bar.storage-progress-bar {
-  background-color: #fdb813;
-}
-
-#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-network > div > div.progress-bar.network-progress-bar,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-network > div > div.progress-bar.network-progress-bar {
-  background-color: #7f1c7d;
-}
-
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.column-action,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.column-action {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-action {
   width: 165px;
 }
 
 #guest-content-container .wok-guest-list .wok-guest-list-header > span.item-hidden,
-#guest-content-container .wok-guest-list .wok-guest-list-body > span.item-hidden {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.item-hidden {
   display: none !important;
 }
 
 #guest-content-container .wok-guest-list .wok-guest-list-header .btn .guest-pending,
-#guest-content-container .wok-guest-list .wok-guest-list-body .btn .guest-pending {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item .btn .guest-pending {
   margin-left: -38px;
   margin-right: -45px;
 }
 
-#guest-content-container .wok-guest-list .distro-icon {
-  background-color: transparent;
-  background-size: 27px 27px;
-  background-repeat: no-repeat;
-  background-position: left;
-}
-
 #guest-content-container .wok-guest-list .distro-icon.inactive {
   -webkit-filter: grayscale(100%) contrast(0.8) brightness(110%);
   -moz-filter: grayscale(100%) contrast(0.8) brightness(110%);
   filter: grayscale(100%) contrast(0.8) brightness(110%);
 }
 
-#guest-content-container .wok-guest-list .distro-icon.icon-centos {
+#guest-content-container .wok-guest-list .wok-guest-list-body.inactive {
+  color: #999 !important;
+}
+
+#guest-content-container .distro-icon {
+  background-color: transparent;
+  background-size: 32px 32px;
+  background-repeat: no-repeat;
+  background-position: 100% 50%;
+}
+
+#guest-content-container .distro-icon.icon-centos {
   background-image: url("/images/theme-default/icon-centos.png");
 }
 
-#guest-content-container .wok-guest-list .distro-icon.icon-debian {
+#guest-content-container .distro-icon.icon-debian {
   background-image: url("/images/theme-default/icon-debian.png");
 }
 
-#guest-content-container .wok-guest-list .distro-icon.icon-fedora {
+#guest-content-container .distro-icon.icon-fedora {
   background-image: url("/images/theme-default/icon-fedora.png");
 }
 
-#guest-content-container .wok-guest-list .distro-icon.icon-opensuse {
+#guest-content-container .distro-icon.icon-opensuse {
   background-image: url("/images/theme-default/icon-opensuse.png");
 }
 
-#guest-content-container .wok-guest-list .distro-icon.icon-ubuntu {
+#guest-content-container .distro-icon.icon-ubuntu {
   background-image: url("/images/theme-default/icon-ubuntu.png");
 }
 
-#guest-content-container .wok-guest-list .distro-icon.icon-gentoo {
+#guest-content-container .distro-icon.icon-gentoo {
   background-image: url("/images/theme-default/icon-gentoo.png");
 }
 
-#guest-content-container .wok-guest-list .distro-icon.icon-unknown {
+#guest-content-container .distro-icon.icon-unknown {
   background-image: url("/images/theme-default/icon-unknown.png");
 }
 
-#guest-content-container .wok-guest-list .wok-guest-list-body.inactive {
-  color: #999 !important;
+body.wok-gallery {
+  background: #eee;
 }
 
 #guest-edit-window .tab-content {
@@ -1539,7 +1808,8 @@
   padding: 0 20px 0 20px;
   width: 240px;
   display: inline-block;
-  border: 1px solid #e3e3e3;
+  border: 0;
+  background: #fff;
   margin-right: 20px;
 }
 
diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
index 9d62636..9cf87a2 100644
--- a/ui/css/src/modules/_guests.scss
+++ b/ui/css/src/modules/_guests.scss
@@ -95,14 +95,18 @@
         width: 100%;
         padding: 0;
         list-style-type: none;
-        > li:nth-child(even) {
-            background-color: $table-bg-accent;
-        }
-        > li:nth-child(odd) {
-            background-color: $table-bg;
-        }
-        > li:first-child {
-            border-top: 0;
+        .wok-guest-list-body > ul {
+            list-style: none;
+            padding: 0;
+            > li:nth-child(even) {
+              background-color: #fcfcfc;
+            }
+            > li:nth-child(odd) {
+              background-color: #fff;
+            }
+            > li:first-child {
+              border-top: 0;
+            }
         }
         .wok-guest-list-header {
             border-top: 0 none;
@@ -128,7 +132,7 @@
                 }
             }
         }
-        .wok-guest-list-body {
+        .wok-guest-list-item {
             border-top: 1px solid $table-border-color;
             > span {
                 padding: 6px 2px;
@@ -139,6 +143,13 @@
                 line-height: 2.42857;
                 font-weight: 400;
             }
+            .nodata,
+            .screenshot {
+                display: none;
+            }
+            .column-name.distro-icon {
+                background: none;
+            }
             .progress {
                 display: inline-block;
                 width: 60%;
@@ -165,6 +176,12 @@
                     background-color: map-get($guestCharts, lightGray);
                 }
             }
+            .column-type {
+                padding-left: 40px;
+            }
+            .column-actions .btn {
+                margin-top: 6px;
+            }
             div.percentage-label {
                 display: inline-block;
                 width: 25%;
@@ -175,67 +192,311 @@
                 width: 35%;
                 margin-top: 6px;
             }
+            .item-hidden {
+                display: none;
+            }
+            .btn .guest-state {
+                display: none;
+            }
         }
     }
-    .wok-guest-list .wok-guest-list-header,
-    .wok-guest-list .wok-guest-list-body {
-        > span.column-state {
-            width: 40px;
-            text-align: center;
-            > span.guest-state {
-                font-size: 22px;
+    .wok-guest-gallery {
+        list-style: none;
+        padding: 0;
+        > li.wok-guest-list-header {
+            display: none;
+        }
+        > li > ul {
+            list-style: none;
+            padding: 0;
+        }
+        .wok-guest-list-item {
+            padding: 0 0px 0 0px;
+            width: 240px;
+            height: 453px;
+            display: inline-block;
+            border: 0;
+            background: $body-bg;
+            margin-right: 20px;
+            position: relative;
+            vertical-align: top;
+            &.inactive {
+                .progress,
+                .item-hidden,
+                [class^="column-"] {
+                    display: none;
+                }
+                .nodata {
+                    display: block;
+                    padding-top: 115px;
+                    padding-bottom: 115px;
+                    text-align: center;
+                }
+                span.column-action, span.column-name {
+                    display: block !important;
+                }
+                .btn {
+                    background: #4d4c4e !important;
+                }
+            }
+            > span {
+                display: inline-block;
+                width: 100%;
+                font-family: $font-family-sans-serif;
+                font-size: 12.5pt;
+                line-height: $line-height-base;
+                font-weight: 400;
+            }
+            .progress {
+                display: inline-block;
+                width: 125px;
                 position: relative;
+                vertical-align: top;
+                margin-top: 0;
+                margin-bottom: 0;
+                border-radius: 0;
+                -webkit-box-shadow: none;
+                box-shadow: none;
             }
-            > span.guest-state.running > .fa-ban {
-                display: none;
+            .progress-bar {
+                position: absolute;
+                top: 0;
+                left: 0;
+                -webkit-box-shadow: none;
+                box-shadow: none;
+                &.dark-grey {
+                    background-color: map-get($guestCharts, darkGray);
+                }
+                &.medium-grey {
+                    background-color: map-get($guestCharts, mediumGray);
+                }
+                &.light-grey {
+                    background-color: map-get($guestCharts, lightGray);
+                }
             }
-            > span.guest-state.running > .fa-power-off {
-                color: $fa-green;
+            .item-hidden {
+                display: block;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
-            > span.guest-state.running > .fa-undo {
-                display: none;
+            .column-action.pull-right {
+                position: absolute;
+            }
+            .ul-body {
+            display: inline-block;
+            padding: 0;
+            margin: 0;
+            list-style: none;
             }
-            > span.guest-state.running > .fa-refresh {
+            .column-type,
+            .nodata,
+            .column-vnc,
+            .column-state {
                 display: none;
             }
-            > span.guest-state.shutoff > .fa-ban {
-                color: $gray-light;
+            .column-name {
+                line-height: 2.5 !important;
+                font-size: 15.3pt !important;
+                font-weight: 500 !important;
+                text-overflow: ellipsis !important;
+                overflow: hidden !important;
+                padding-right: 35px !important;
+                padding-left: 20px;
+                margin-right: 20px;
+                display: block;
+                width: 220px;
+                white-space: nowrap;
+            }
+            .column-processors,
+            .column-memory,
+            .column-storage,
+            .column-network {
+                margin-top: 21px;
+                display: block;
+                height: 38px;
+                padding-left: 20px;
+                padding-right: 20px;
+            }
+            .percentage-label,
+            .measure-label {
+                display: inline-block;
+                width: 68px;
             }
-            > span.guest-state.shutoff > .fa-power-off {
-                display: none;
+            .font-bold {
+                font-weight: bold !important;
             }
-            > span.guest-state.shutoff > .fa-undo {
-                display: none;
+            .pull-right {
+                float: none !important;
             }
-            > span.guest-state.shutoff > .fa-refresh {
-                display: none;
+            .dropdown-menu {
+                width: 100%;
             }
-            > span.guest-state.starting > .fa-ban {
-                display: none;
+            .screenshot {
+                width: 100%;
+                height: 148px;
+                background-size: cover;
+                background-repeat: no-repeat;
             }
-            > span.guest-state.starting > .fa-power-off {
-                display: none;
+            .menu-flat {
+                width: 240px;
             }
-            > span.guest-state.starting > .fa-undo {
-                color: $gray-light;
+            .btn {
+                width: 100%;
+                text-align: left;
+                padding-left: 21px;
+                border-radius: 0;
+                background: rgba(0, 0, 0, .8) !important;
+
+                > span.guest-state {
+                    .fa {
+                        margin-right: 10px;
+                    }
+                }
+
+                > span.guest-state.running {
+                    span.running {
+                        display: block;
+                    }
+                    span.paused,
+                    span.shutoff,
+                    span.starting,
+                    span.resetting {
+                        display: none;
+                    }
+                }
+                > span.guest-state.shutoff {
+                    span.shutoff {
+                        display: block;
+                    }
+                    span.paused,
+                    span.running,
+                    span.starting,
+                    span.resetting {
+                        display: none;
+                    }
+                }
+                > span.guest-state.starting {
+                    span.starting {
+                        display: block;
+                    }
+                    span.paused,
+                    span.running,
+                    span.shutoff,
+                    span.resetting {
+                        display: none;
+                    }
+                }
+                > span.guest-state.resetting {
+                    span.resetting {
+                        display: block;
+                    }
+                    span.paused,
+                    span.running,
+                    span.shutoff,
+                    span.starting {
+                        display: none;
+                    }
+                }
             }
-            > span.guest-state.starting > .fa-refresh {
+            .guest-done {
                 display: none;
             }
-            > span.guest-state.resetting > .fa-ban {
-                display: none;
+            .guest-state {
+                display: block;
             }
-            > span.guest-state.resetting > .fa-power-off {
-                display: none;
+        }
+    }
+    .wok-guest-list .wok-guest-list-body .wok-guest-list-item,
+    .wok-guest-gallery .wok-guest-list-body .wok-guest-list-item {
+        > span.column-processors {
+            > div > div.progress-bar.cpu-progress-bar {
+                background-color: map-get($colors, wok);
             }
-            > span.guest-state.resetting > .fa-undo {
-                display: none;
+        }
+        > span.column-memory {
+            > div > div.progress-bar.memory-progress-bar {
+                background-color: map-get($colors, host);
             }
-            > span.guest-state.resetting > .fa-refresh {
-                color: $fa-green;
+        }
+        > span.column-storage {
+            > div > div.progress-bar.storage-progress-bar {
+                background-color: $state-warning-border;
             }
-            > span.guest-state.paused > .fa {
-                display: none;
+        }
+        > span.column-network {
+            > div > div.progress-bar.network-progress-bar {
+                background-color: map-get($colors, network);
+            }
+        }
+    }
+    .wok-guest-list .wok-guest-list-header,
+    .wok-guest-list .wok-guest-list-body .wok-guest-list-item {
+        > span.column-state {
+            width: 40px;
+            text-align: center;
+            > span.guest-state {
+                font-size: 22px;
+                position: relative;
+                span.text-status {
+                    display: none;
+                }
+            }
+            > span.guest-state.running {
+                span.running {
+                    display: block;
+                }
+                span.paused,
+                span.shutoff,
+                span.starting,
+                span.resetting {
+                    display: none;
+                }
+                .fa {
+                    color: $fa-green;
+                }
+            }
+            > span.guest-state.shutoff {
+                span.shutoff {
+                    display: block;
+                }
+                span.paused,
+                span.running,
+                span.starting,
+                span.resetting {
+                    display: none;
+                }
+                .fa {
+                    color: $gray-light;
+                }
+            }
+            > span.guest-state.starting {
+                span.starting {
+                    display: block;
+                }
+                span.paused,
+                span.running,
+                span.shutoff,
+                span.resetting {
+                    display: none;
+                }
+                .fa {
+                    color: $gray-light;
+                }
+            }
+            > span.guest-state.resetting {
+                span.resetting {
+                    display: block;
+                }
+                span.paused,
+                span.running,
+                span.shutoff,
+                span.starting {
+                    display: none;
+                }
+                .fa {
+                    color: $fa-green;
+                }
             }
         }
         > span.column-name {
@@ -286,26 +547,6 @@
         > span.column-network {
             width: 12.5%;
         }
-        > span.column-processors {
-            > div > div.progress-bar.cpu-progress-bar {
-                background-color: map-get($colors, administration);
-            }
-        }
-        > span.column-memory {
-            > div > div.progress-bar.memory-progress-bar {
-                background-color: map-get($colors, host);
-            }
-        }
-        > span.column-storage {
-            > div > div.progress-bar.storage-progress-bar {
-                background-color: $state-warning-border;
-            }
-        }
-        > span.column-network {
-            > div > div.progress-bar.network-progress-bar {
-                background-color: map-get($colors, network);
-            }
-        }
         > span.column-action {
             width: 165px;
         }
@@ -317,39 +558,42 @@
             margin-right: -45px;
         }
     }
-    .wok-guest-list .distro-icon {
-        background-color: transparent;
-        background-size: 27px 27px;
-        background-repeat: no-repeat;
-        background-position: left;
-    }
     .wok-guest-list .distro-icon.inactive {
         -webkit-filter: grayscale(100%) contrast(0.8) brightness(110%);
         -moz-filter: grayscale(100%) contrast(0.8) brightness(110%);
         filter: grayscale(100%) contrast(0.8) brightness(110%);
     }
-    .wok-guest-list .distro-icon.icon-centos {
-        background-image: url('#{$wok-icon-path}/icon-centos.png');
-    }
-    .wok-guest-list .distro-icon.icon-debian {
-        background-image: url('#{$wok-icon-path}/icon-debian.png');
-    }
-    .wok-guest-list .distro-icon.icon-fedora {
-        background-image: url('#{$wok-icon-path}/icon-fedora.png');
-    }
-    .wok-guest-list .distro-icon.icon-opensuse {
-        background-image: url('#{$wok-icon-path}/icon-opensuse.png');
-    }
-    .wok-guest-list .distro-icon.icon-ubuntu {
-        background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
-    }
-    .wok-guest-list .distro-icon.icon-gentoo {
-        background-image: url('#{$wok-icon-path}/icon-gentoo.png');
-    }
-    .wok-guest-list .distro-icon.icon-unknown {
-        background-image: url('#{$wok-icon-path}/icon-unknown.png');
-    }
     .wok-guest-list .wok-guest-list-body.inactive {
         color: $disabled-color !important;
     }
+    .distro-icon {
+        background-color: transparent;
+        background-size: 32px 32px;
+        background-repeat: no-repeat;
+        background-position: 100% 50%;
+        &.icon-centos {
+            background-image: url('#{$wok-icon-path}/icon-centos.png');
+        }
+        &.icon-debian {
+            background-image: url('#{$wok-icon-path}/icon-debian.png');
+        }
+        &.icon-fedora {
+            background-image: url('#{$wok-icon-path}/icon-fedora.png');
+        }
+        &.icon-opensuse {
+            background-image: url('#{$wok-icon-path}/icon-opensuse.png');
+        }
+        &.icon-ubuntu {
+            background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+        }
+        &.icon-gentoo {
+            background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+        }
+        &.icon-unknown {
+            background-image: url('#{$wok-icon-path}/icon-unknown.png');
+        }
+    }
+}
+body.wok-gallery {
+    background: $input-bg-disabled;
 }
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
index 44a1d20..371d5ce 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -396,7 +396,8 @@
             padding: 0 20px 0 20px;
             width: 240px;
             display: inline-block;
-            border: 1px solid $table-first-row-border-color;
+            border: 0;
+            background: $body-bg;
             margin-right: 20px;
             > span {
                 display: inline-block;
diff --git a/ui/js/src/kimchi.guest_main.js b/ui/js/src/kimchi.guest_main.js
index fc44a11..eb05033 100644
--- a/ui/js/src/kimchi.guest_main.js
+++ b/ui/js/src/kimchi.guest_main.js
@@ -61,7 +61,6 @@ kimchi.vmstart = function(event) {
         $(vm).find('.progress').css("display", "none");
         $(vm).find('.percentage - label').html('--');
         $(vm).find('.measure-label').html('--');
-        $(vm).find('.guest-actions').css("margin-top", "3px");
         $(vm).addClass('inactive');
         $(vm).find('.distro-icon').addClass('inactive');
         $(vm).find('.vnc-link').css("display", "none");
@@ -362,6 +361,7 @@ kimchi.listVmsAuto = function() {
 
         kimchi.listVMs(function(result, textStatus, jqXHR) {
                 if (result && textStatus == "success") {
+
                     var migrated = getMigratingGuests();
                     for (i = migrated.length - 1; i >= 0; i--) {
                         for (j = result.length - 1; j >= 0; j--) {
@@ -442,8 +442,11 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
     var guestTitle = result.find('.title').attr('val', vmObject.name);
     guestTitle.html(vmObject.name);
 
+    var scrensh = result.find('.screenshot').css('background-image', 'url('+vmObject.screenshot+')');
+    scrensh.attr('title', vmObject.name);
+
     //Add the OS Type and Icon
-    var osType = result.find('.distro-icon');
+    var osType = result.find('.column-type.distro-icon');
     if (vmObject.icon == 'plugins/kimchi/images/icon-fedora.png') {
         osType.addClass('icon-fedora');
         osType.attr('val', 'Fedora');
@@ -474,6 +477,23 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
         osType.attr('val', 'Unknown');
         osType.html('Unknown');
     }
+    //Add the OS Icon to VM name in Gallery View
+    var osName = result.find('.column-name.distro-icon');
+    if (vmObject.icon == 'plugins/kimchi/images/icon-fedora.png') {
+        osName.addClass('icon-fedora');
+    } else if (vmObject.icon == 'plugins/kimchi/images/icon-ubuntu.png') {
+        osName.addClass('icon-ubuntu');
+    } else if (vmObject.icon == 'plugins/kimchi/images/icon-centos.png') {
+        osName.addClass('icon-centos');
+    } else if (vmObject.icon == 'plugins/kimchi/images/icon-opensuse.png') {
+        osName.addClass('icon-opensuse');
+    } else if (vmObject.icon == 'plugins/kimchi/images/icon-gentoo.png') {
+        osName.addClass('icon-gentoo');
+    } else if (vmObject.icon == 'plugins/kimchi/images/icon-debian.png') {
+        osName.addClass('icon-debian');
+    } else {
+        osName.addClass('icon-unknown');
+    }
 
     //Setup the VM console thumbnail display
     var curImg = vmObject.icon;
@@ -603,8 +623,6 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
         result.find('.progress').css("display", "none");
         result.find('.percentage-label').html('--');
         result.find('.measure-label').html('--');
-        result.find('.measure-label').html('--');
-        result.find('.guest-actions').css("margin-top", "3px");
     }
 
     //Setup the VM Actions
@@ -742,6 +760,7 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
     } else {
         guestActions.find('.btn').attr('disabled', true);
         result.find('.guest-done').addClass('hidden');
+        result.find('.guest-state').addClass('hidden');
         result.find('.guest-pending').removeClass('hidden');
         pendingText = result.find('.guest-pending .text')
         if (vmObject.isCloning)
@@ -771,6 +790,16 @@ kimchi.guest_main = function() {
     $('#guests-root-container').on('remove', 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.resetGuestFilter();
     kimchi.initGuestFilter();
     kimchi.listVmsAuto();
diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js
index 46a229c..93c3837 100644
--- a/ui/js/src/kimchi.template_main.js
+++ b/ui/js/src/kimchi.template_main.js
@@ -91,6 +91,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']);
     });
@@ -106,6 +107,7 @@ kimchi.hideTitle = function() {
 };
 
 kimchi.template_main = function() {
+    $('body').removeClass("wok-gallery").addClass("wok-list");
     if (wok.tabMode['templates'] === 'admin') {
         $('.tools').attr('style', 'display');
         $("#template-add").on("click", function(event) {
diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
index 4097a0c..be9b47e 100644
--- a/ui/pages/guest.html.tmpl
+++ b/ui/pages/guest.html.tmpl
@@ -21,23 +21,30 @@
 #silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang, fallback=True)
 #silent _ = t.gettext
 #silent _t = t.gettext
-        <li name="guest" class="wok-guest-list-body">
-            <span class='column-state'>
+        <li name="guest" class="wok-guest-list-item">
+                <span class='column-state'>
                     <span class='guest-state'>
-                        <i class="fa fa-power-off"></i>
-                        <i class="fa fa-ban"></i>
-                        <i class="fa fa-undo"></i>
-                        <i class="fa fa-refresh fa-spin"></i>
+                        <span class="running"><i class="fa fa-power-off"></i><span class="text-status">$_("Running")</span></span><!--
+                     --><span class="shutoff"><i class="fa fa-ban"></i><span class="text-status">$_("Disconnected")</span></span><!--
+                     --><span class="starting"><i class="fa fa-undo"></i><span class="text-status">$_("Starting")</span></span><!--
+                     --><span class="resetting"><i class="fa fa-refresh fa-spin"></i><span class="text-status">$_("Resetting")</span></span>
                     </span>
                 </span><!--
-            --><span class='column-name title'></span><!--
-            --><span class='column-action pull-right'>
+            --><span class='column-name title distro-icon'></span>
+            <span class='column-action pull-right'>
                 <span class="pull-right">
-                    <div class="dropdown menu-flat guest-actions" name="guest-actions" style="margin-top: 6px">
+                    <div class="dropdown menu-flat guest-actions" name="guest-actions">
                         <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                             <span class="guest-done">
                                 <span class="edit-alt"></span>$_("Actions")<span class="caret"></span>
                             </span>
+                            <span class="guest-state">
+                                <span class="running"><i class="fa fa-power-off"></i><span class="text-status">$_("Running")</span></span><!--
+                             --><span class="shutoff"><i class="fa fa-ban"></i><span class="text-status">$_("Disconnected")</span></span><!--
+                             --><span class="starting"><i class="fa fa-undo"></i><span class="text-status">$_("Starting")</span></span><!--
+                             --><span class="resetting"><i class="fa fa-refresh fa-spin"></i><span class="text-status">$_("Resetting")</span></span><!--
+                             --><span class="caret"></span>
+                            </span>
                             <span class="guest-pending hidden">
                                 <span class="wok-loading-icon"></span>
                                 <span class="text"></span>
@@ -60,8 +67,11 @@
                         </ul>
                     </div>
                 </span>
-            </span><!--
-            --><span class='column-type distro-icon' style='padding-left: 40px !important'></span><!--
+            </span>
+            <span class="screenshot"></span>
+            <span class="nodata">[$_("No Data Available")]</span>
+            <!--
+            --><span class='column-type distro-icon'></span><!--
             --><span class='column-vnc'><i class="fa fa-spinner fa-spin"></i><a nwAct="connect-vnc" name="vm-console" class="vnc-link" href="#">$_("View Console")</a></span><!--
             --><span class='column-processors'>
                 <div class="percentage-label processors-percentage">
@@ -71,9 +81,9 @@
                     <div class="progress-bar medium-grey cpu"></div>
                     <div class="progress-bar light-grey cpu"></div>
                     <div class="progress-bar cpu-progress-bar"></div>
-                </div>
+                </div><!--
+                --><span class="item-hidden">$_("Processors Used")</span>
             </span><!--
-            --><span class="item-hidden">$_("Processors Used")</span><!--
             --><span class='column-memory'>
                 <div class='percentage-label memory-percentage'></div>
                 <div class="progress">
@@ -81,9 +91,9 @@
                     <div class="progress-bar medium-grey memory"></div>
                     <div class="progress-bar light-grey memory"></div>
                     <div class="progress-bar memory-progress-bar"></div>
-                </div>
+                </div><!--
+                --><span class="item-hidden">$_("Memory Available")</span>
             </span><!--
-            --><span class="item-hidden">$_("Memory Available")</span><!--
             --><span class='column-storage'>
                 <div class='measure-label storage-percentage'></div>
                 <div class="progress">
@@ -91,9 +101,9 @@
                     <div class="progress-bar medium-grey io"></div>
                     <div class="progress-bar light-grey io"></div>
                     <div class="progress-bar storage-progress-bar"></div>
-                </div>
+                </div><!--
+                --><span class="item-hidden">$_("Storage I/O")</span>
             </span><!--
-            --><span class="item-hidden">$_("Storage I/O")</span><!--
             --><span class='column-network'>
                 <div class='measure-label network-percentage'></div>
                 <div class="progress">
@@ -101,7 +111,7 @@
                     <div class="progress-bar medium-grey network" style="width: 85%"></div>
                     <div class="progress-bar light-grey network" style="width: 75%"></div>
                     <div class="progress-bar network-progress-bar"></div>
-                </div>
-            </span><!--
-            --><span class="item-hidden">$_("Network I/O")</span>
+                </div><!--
+                --><span class="item-hidden">$_("Network I/O")</span>
+            </span>
         </li>
diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl
index 8bd815f..60a87aa 100644
--- a/ui/pages/tabs/guests.html.tmpl
+++ b/ui/pages/tabs/guests.html.tmpl
@@ -56,6 +56,9 @@
     <div id="guest-content-container">
         <div class="container">
             <div class="row grid-control hidden">
+                <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">
                     <label for="search_input" class="sr-only">$_("Filter"):</label>
                     <input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")">
@@ -78,7 +81,7 @@
                       --></span>
                     </li>
                     <li class="wok-guest-list-body">
-                        <ul id="guestList" class="wok-guest-list empty-when-logged-off list">
+                        <ul id="guestList" class="empty-when-logged-off list">
                         </ul>
                     </li>
                 </ul>
-- 
2.5.0

    

[Kimchi-devel] [PATCH] [Kimchi] Adding gallery view to guest tab and minor fixes to templates tab

peterpnns＠gmail.com