[Kimchi-devel] [PATCH 2/3 v2] [Kimchi] Issue #939: [UI] Guest tab is not rendered correctly if guests are not in 'running' or ''shutoff' state

From: Samuel Guimarães <sguimaraes943@gmail.com> Signed-off-by: Samuel Guimarães <sguimaraes943@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