[Kimchi-devel] [PATCH] [Kimchi 1/2] Issue #939: [UI] Guest tab is not rendered correctly if guests are not in 'running' or ''shutoff' state
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Aug 30 19:23:11 UTC 2016
From: Samuel Guimarães <sguimaraes943 at gmail.com>
Signed-off-by: Samuel Guimarães <sguimaraes943 at gmail.com>
---
ui/css/kimchi.css | 122 ++++++++++++++++-----------------
ui/css/src/modules/_guests.scss | 147 ++++++++++++++++++++++------------------
ui/pages/guest.html.tmpl | 6 +-
3 files changed, 146 insertions(+), 129 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 59d96e1..1562fd6 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -525,7 +525,8 @@
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 {
+#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;
}
@@ -752,105 +753,100 @@
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-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,
-#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-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 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-body .wok-guest-list-item > span.column-state > span.guest-state.pmsuspended span.pmsuspended {
+ display: block;
}
-#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-body .wok-guest-list-item > span.column-state > span.guest-state.pmsuspended .fa {
+ color: #999;
}
-#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-body .wok-guest-list-item > span.column-state > span.guest-state.nostate span.nostate {
+ display: block;
}
-#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-body .wok-guest-list-item > span.column-state > span.guest-state.nostate .fa {
+ color: #999;
}
-#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 {
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.crashed span.crashed {
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-body .wok-guest-list-item > span.column-state > span.guest-state.crashed .fa {
+ color: #999;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutdown span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutdown span.blocked,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutdown span.shutdown,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.blocked span.shutoff,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.blocked span.blocked,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.blocked span.shutdown,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > 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.blocked,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.shutoff span.shutdown {
+ display: block;
}
-#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.shutdown .fa,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.blocked .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-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.starting .fa,
-#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > 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.paused span.paused {
+ display: block;
+}
+
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state.paused .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.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 {
+#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-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,
-#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-state > span.guest-state span,
+#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state > span.guest-state span {
+ display: none;
}
#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-name,
diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
index 6c24800..040b351 100644
--- a/ui/css/src/modules/_guests.scss
+++ b/ui/css/src/modules/_guests.scss
@@ -105,13 +105,13 @@
list-style: none;
padding: 0;
> li:nth-child(even) {
- background-color: #fcfcfc;
+ background-color: #fcfcfc;
}
> li:nth-child(odd) {
- background-color: #fff;
+ background-color: #fff;
}
> li:first-child {
- border-top: 0;
+ border-top: 0;
}
}
.wok-guest-list-header {
@@ -239,7 +239,8 @@
padding-bottom: 115px;
text-align: center;
}
- span.column-action, span.column-name {
+ span.column-action,
+ span.column-name {
display: block !important;
}
.btn {
@@ -296,10 +297,10 @@
position: absolute;
}
.ul-body {
- display: inline-block;
- padding: 0;
- margin: 0;
- list-style: none;
+ display: inline-block;
+ padding: 0;
+ margin: 0;
+ list-style: none;
}
.column-type,
.nodata,
@@ -368,13 +369,11 @@
padding-left: 21px;
border-radius: 0;
background: rgba(0, 0, 0, .6) !important;
-
> span.guest-state {
.fa {
margin-right: 10px;
}
}
-
> span.guest-state.running {
span.running {
display: block;
@@ -451,6 +450,76 @@
}
}
}
+ .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-state {
+ > span.guest-state.running {
+ span.running {
+ display: block;
+ }
+ .fa {
+ color: $fa-green;
+ }
+ }
+ > span.guest-state.pmsuspended {
+ span.pmsuspended {
+ display: block;
+ }
+ .fa {
+ color: $gray-light;
+ }
+ }
+ > span.guest-state.nostate {
+ span.nostate {
+ display: block;
+ }
+ .fa {
+ color: $gray-light;
+ }
+ }
+ > span.guest-state.crashed {
+ span.crashed {
+ display: block;
+ }
+ .fa {
+ color: $gray-light;
+ }
+ }
+ > span.guest-state.shutdown,
+ > span.guest-state.blocked,
+ > span.guest-state.shutoff {
+ span.shutoff,
+ span.blocked,
+ span.shutdown {
+ display: block;
+ }
+ .fa {
+ color: $gray-light;
+ }
+ }
+ > span.guest-state.starting {
+ span.starting {
+ display: block;
+ }
+ .fa {
+ color: $gray-light;
+ }
+ }
+ > span.guest-state.paused {
+ span.paused {
+ display: block;
+ }
+ .fa {
+ color: $gray-light;
+ }
+ }
+ > span.guest-state.resetting {
+ span.resetting {
+ display: block;
+ }
+ .fa {
+ color: $fa-green;
+ }
+ }
+ }
.wok-guest-list .wok-guest-list-header,
.wok-guest-list .wok-guest-list-body .wok-guest-list-item {
> span.column-state {
@@ -463,61 +532,8 @@
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.guest-state span {
+ display: none;
}
}
> span.column-name {
@@ -615,6 +631,7 @@
}
}
}
+
body.wok-gallery {
background: $input-bg-disabled;
}
diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
index c89e450..f92bf11 100644
--- a/ui/pages/guest.html.tmpl
+++ b/ui/pages/guest.html.tmpl
@@ -25,8 +25,12 @@
<span class='column-state'>
<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="shutoff shutdown blocked"><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="crashed"><i class="fa fa-exclamation-triangle"></i><span class="text-status">$_("Crashed")</span></span><!--
+ --><span class="nostate"><i class="fa fa-question-circle"></i><span class="text-status">$_("Unknown")</span></span><!--
+ --><span class="paused"><i class="fa fa-pause"></i><span class="text-status">$_("Paused")</span></span><!--
+ --><span class="pmsuspended"><i class="fa fa-power-off"></i><span class="text-status">$_("Suspended")</span></span><!--
--><span class="resetting"><i class="fa fa-refresh fa-spin"></i><span class="text-status">$_("Resetting")</span></span>
</span>
</span><!--
--
2.5.5
More information about the Kimchi-devel
mailing list