[Kimchi-devel] [PATCH] [Kimchi] Adding gallery view to guest tab and minor fixes to templates tab
peterpnns at gmail.com
peterpnns at gmail.com
Wed Mar 2 19:41:34 UTC 2016
From: peterpennings <peterpnns at gmail.com>
Signed-off-by: peterpennings <peterpnns at 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
More information about the Kimchi-devel
mailing list