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

From: peterpennings <peterpnns(a)gmail.com&gt; Signed-off-by: peterpennings <peterpnns(a)gmail.com&gt; --- 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; 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; + } } } @@ -286,26 +547,6 @@ 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); - } - } 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; 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