Skip to content

Commit 4092ecc

Browse files
samhenrialinefm
samhenri
authored and
alinefm
committed
Multiple fixes in Gallery and List views for Templates and Guests tabs
Signed-off-by: Samuel Guimarães <[email protected]>
1 parent b5b737a commit 4092ecc

File tree

9 files changed

+100
-39
lines changed

9 files changed

+100
-39
lines changed

‎ui/css/kimchi.css

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -448,7 +448,7 @@
448448

449449
#guest-content-container .wok-guest-gallery {
450450
list-style: none;
451-
padding: 0;
451+
padding: 0 0 0 5px;
452452
}
453453

454454
#guest-content-container .wok-guest-gallery > li.wok-guest-list-header {
@@ -461,13 +461,14 @@
461461
}
462462

463463
#guest-content-container .wok-guest-gallery .wok-guest-list-item {
464-
padding: 0 0px 0 0px;
464+
padding: 0;
465465
width: 240px;
466-
height: 453px;
466+
height: 435px;
467467
display: inline-block;
468468
border: 0;
469469
background: #fff;
470470
margin-right: 20px;
471+
margin-bottom: 20px;
471472
position: relative;
472473
vertical-align: top;
473474
}
@@ -503,8 +504,10 @@
503504
}
504505

505506
#guest-content-container .wok-guest-gallery .wok-guest-list-item .progress {
506-
display: inline-block;
507+
display: block;
508+
float: right;
507509
width: 125px;
510+
height: 18px;
508511
position: relative;
509512
vertical-align: top;
510513
margin-top: 0;
@@ -535,10 +538,13 @@
535538
}
536539

537540
#guest-content-container .wok-guest-gallery .wok-guest-list-item .item-hidden {
541+
clear: both;
538542
display: block;
539543
white-space: nowrap;
540544
overflow: hidden;
541545
text-overflow: ellipsis;
546+
position: relative;
547+
top: -10px;
542548
}
543549

544550
#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-action.pull-right {
@@ -571,23 +577,33 @@
571577
display: block;
572578
width: 220px;
573579
white-space: nowrap;
580+
cursor: default;
574581
}
575582

576583
#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-processors,
577584
#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-memory,
578585
#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-storage,
579586
#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-network {
580-
margin-top: 21px;
587+
margin-top: 14px;
581588
display: block;
582589
height: 38px;
583590
padding-left: 20px;
584-
padding-right: 20px;
591+
padding-right: 18px;
592+
}
593+
594+
#guest-content-container .wok-guest-gallery .wok-guest-list-item .column-processors {
595+
margin-top: 18px !important;
585596
}
586597

587598
#guest-content-container .wok-guest-gallery .wok-guest-list-item .percentage-label,
588599
#guest-content-container .wok-guest-gallery .wok-guest-list-item .measure-label {
589-
display: inline-block;
600+
float: left;
601+
display: block;
590602
width: 68px;
603+
font-size: 21px;
604+
font-weight: 600;
605+
top: -7px;
606+
position: relative;
591607
}
592608

593609
#guest-content-container .wok-guest-gallery .wok-guest-list-item .font-bold {
@@ -618,7 +634,7 @@
618634
text-align: left;
619635
padding-left: 21px;
620636
border-radius: 0;
621-
background: rgba(0, 0, 0, 0.8) !important;
637+
background: rgba(0, 0, 0, 0.6) !important;
622638
}
623639

624640
#guest-content-container .wok-guest-gallery .wok-guest-list-item .btn > span.guest-state .fa {
@@ -816,7 +832,7 @@
816832
@media (min-width: 1540px) {
817833
#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-name,
818834
#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-name {
819-
width: 14.15%;
835+
width: 12%;
820836
}
821837
}
822838

@@ -863,7 +879,7 @@
863879
@media (min-width: 1330px) {
864880
#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-vnc,
865881
#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-vnc {
866-
width: 10.84%;
882+
width: 10%;
867883
display: inline-block;
868884
}
869885
}
@@ -876,7 +892,7 @@
876892
#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-memory,
877893
#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-storage,
878894
#guest-content-container .wok-guest-list .wok-guest-list-body .wok-guest-list-item > span.column-network {
879-
width: 12.5%;
895+
width: 13%;
880896
}
881897

882898
#guest-content-container .wok-guest-list .wok-guest-list-header > span.column-action,
@@ -1829,6 +1845,7 @@ body.wok-gallery {
18291845
border: 0;
18301846
background: #fff;
18311847
margin-right: 20px;
1848+
margin-bottom: 20px;
18321849
}
18331850

18341851
#templates-root-container .wok-vm-gallery .wok-vm-body > span {
@@ -1854,6 +1871,8 @@ body.wok-gallery {
18541871
text-overflow: ellipsis !important;
18551872
overflow: hidden !important;
18561873
padding-right: 35px !important;
1874+
white-space: nowrap;
1875+
cursor: default;
18571876
}
18581877

18591878
#templates-root-container .wok-vm-gallery .item-hidden.column-type, #templates-root-container .wok-vm-gallery .item-hidden.column-version, #templates-root-container .wok-vm-gallery .item-hidden.column-processors {
@@ -1878,7 +1897,7 @@ body.wok-gallery {
18781897
}
18791898

18801899
#templates-root-container .wok-vm-gallery .menu-flat {
1881-
width: 239px;
1900+
width: 240px;
18821901
margin-left: -20px;
18831902
}
18841903

‎ui/css/src/modules/_guests.scss

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@
202202
}
203203
.wok-guest-gallery {
204204
list-style: none;
205-
padding: 0;
205+
padding: 0 0 0 5px;
206206
> li.wok-guest-list-header {
207207
display: none;
208208
}
@@ -211,13 +211,14 @@
211211
padding: 0;
212212
}
213213
.wok-guest-list-item {
214-
padding: 0 0px 0 0px;
214+
padding: 0;
215215
width: 240px;
216-
height: 453px;
216+
height: 435px;
217217
display: inline-block;
218218
border: 0;
219219
background: $body-bg;
220220
margin-right: 20px;
221+
margin-bottom: 20px;
221222
position: relative;
222223
vertical-align: top;
223224
&.inactive {
@@ -248,8 +249,10 @@
248249
font-weight: 400;
249250
}
250251
.progress {
251-
display: inline-block;
252+
display: block;
253+
float: right;
252254
width: 125px;
255+
height: 18px;
253256
position: relative;
254257
vertical-align: top;
255258
margin-top: 0;
@@ -275,10 +278,13 @@
275278
}
276279
}
277280
.item-hidden {
281+
clear: both;
278282
display: block;
279283
white-space: nowrap;
280284
overflow: hidden;
281285
text-overflow: ellipsis;
286+
position: relative;
287+
top: -10px;
282288
}
283289
.column-action.pull-right {
284290
position: absolute;
@@ -307,21 +313,30 @@
307313
display: block;
308314
width: 220px;
309315
white-space: nowrap;
316+
cursor: default;
310317
}
311318
.column-processors,
312319
.column-memory,
313320
.column-storage,
314321
.column-network {
315-
margin-top: 21px;
322+
margin-top: 14px;
316323
display: block;
317324
height: 38px;
318325
padding-left: 20px;
319-
padding-right: 20px;
326+
padding-right: 18px;
327+
}
328+
.column-processors {
329+
margin-top: 18px !important;
320330
}
321331
.percentage-label,
322332
.measure-label {
323-
display: inline-block;
333+
float: left;
334+
display: block;
324335
width: 68px;
336+
font-size: 21px;
337+
font-weight: 600;
338+
top: -7px;
339+
position: relative;
325340
}
326341
.font-bold {
327342
font-weight: bold !important;
@@ -346,7 +361,7 @@
346361
text-align: left;
347362
padding-left: 21px;
348363
border-radius: 0;
349-
background: rgba(0, 0, 0, .8) !important;
364+
background: rgba(0, 0, 0, .6) !important;
350365

351366
> span.guest-state {
352367
.fa {
@@ -508,7 +523,7 @@
508523
width: 9.7%;
509524
}
510525
@media (min-width: $screen-xlg) {
511-
width: 14.15%;
526+
width: 12%;
512527
}
513528
}
514529
> span.column-type {
@@ -537,15 +552,15 @@
537552
color: $vnc-blue !important;
538553
}
539554
@media (min-width: $screen-lg + 130) {
540-
width: 10.84%;
555+
width: 10%;
541556
display: inline-block;
542557
}
543558
}
544559
> span.column-processors,
545560
> span.column-memory,
546561
> span.column-storage,
547562
> span.column-network {
548-
width: 12.5%;
563+
width: 13%;
549564
}
550565
> span.column-action {
551566
width: 165px;

‎ui/css/src/modules/_templates.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -399,6 +399,7 @@
399399
border: 0;
400400
background: $body-bg;
401401
margin-right: 20px;
402+
margin-bottom: 20px;
402403
> span {
403404
display: inline-block;
404405
width: 100%;
@@ -421,6 +422,8 @@
421422
text-overflow: ellipsis !important;
422423
overflow: hidden !important;
423424
padding-right: 35px !important;
425+
white-space: nowrap;
426+
cursor: default;
424427
}
425428
.item-hidden {
426429
&.column-type,
@@ -445,7 +448,7 @@
445448
width: 100%;
446449
}
447450
.menu-flat {
448-
width: 239px;
451+
width: 240px;
449452
margin-left: -20px;
450453
}
451454
.btn {

‎ui/js/src/kimchi.guest_main.js

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -439,11 +439,16 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
439439
result.data(vmObject);
440440

441441
//Add the Name
442-
var guestTitle = result.find('.title').attr('val', vmObject.name);
442+
var guestTitle = result.find('.title').attr({'val': vmObject.name, 'title': vmObject.name});
443443
guestTitle.html(vmObject.name);
444444

445-
var scrensh = result.find('.screenshot').css('background-image', 'url('+vmObject.screenshot+')');
446-
scrensh.attr('title', vmObject.name);
445+
if(vmObject.screenshot !== null){
446+
var scrensh = result.find('.screenshot').css('background-image', 'url('+vmObject.screenshot+')');
447+
scrensh.attr('title', vmObject.name);
448+
} else {
449+
var scrensh = result.find('.screenshot').css('background-image', 'none');
450+
scrensh.attr('title', vmObject.name);
451+
}
447452

448453
//Add the OS Type and Icon
449454
var osType = result.find('.column-type.distro-icon');
@@ -471,6 +476,10 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
471476
osType.addClass('icon-debian');
472477
osType.attr('val', 'Debian');
473478
osType.html('Debian');
479+
} else if (vmObject.icon !== null) {
480+
osType.css('background-image',vmObject.icon);
481+
osType.attr('val', 'Unknown');
482+
osType.html('Unknown');
474483
} else {
475484
//Unknown
476485
osType.addClass('icon-unknown');
@@ -491,6 +500,8 @@ kimchi.createGuestLi = function(vmObject, prevScreenImage, openMenu) {
491500
osName.addClass('icon-gentoo');
492501
} else if (vmObject.icon == 'plugins/kimchi/images/icon-debian.png') {
493502
osName.addClass('icon-debian');
503+
} else if (vmObject.icon !== null) {
504+
osName.css('background-image',vmObject.icon);
494505
} else {
495506
osName.addClass('icon-unknown');
496507
}
@@ -777,7 +788,15 @@ kimchi.guestSetRequestHeader = function(xhr) {
777788
xhr.setRequestHeader('Accept', 'text/html');
778789
};
779790

791+
kimchi.toggleGuestsGallery = function() {
792+
$(".wok-guest-list, .wok-guest-gallery").toggleClass("wok-guest-list wok-guest-gallery");
793+
$(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery");
794+
var text = $('#guest-gallery-table-button span.text').text();
795+
$('#guest-gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']);
796+
};
797+
780798
kimchi.guest_main = function() {
799+
$('body').addClass('wok-list');
781800

782801
if (wok.tabMode['guests'] === 'admin') {
783802
$('.tools').attr('style', 'display');
@@ -791,13 +810,8 @@ kimchi.guest_main = function() {
791810
kimchi.vmTimeout && clearTimeout(kimchi.vmTimeout);
792811
});
793812

794-
$('body').removeClass("wok-gallery").addClass("wok-list");
795-
796813
$('#guest-gallery-table-button').on('click', function(event) {
797-
$(".wok-guest-list, .wok-guest-gallery").toggleClass("wok-guest-list wok-guest-gallery");
798-
$(".wok-list, .wok-gallery").toggleClass("wok-list wok-gallery");
799-
var text = $('#guest-gallery-table-button span.text').text();
800-
$('#guest-gallery-table-button span.text').text(text == i18n['KCHTMPL6005M'] ? i18n['KCHTMPL6004M'] : i18n['KCHTMPL6005M']);
814+
kimchi.toggleGuestsGallery();
801815
});
802816

803817
kimchi.resetGuestFilter();

‎ui/js/src/kimchi.main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,7 @@ kimchi.getCapabilities(function(result) {
3232
}, function() {
3333
kimchi.capabilities = {};
3434
});
35+
36+
$(function(){
37+
$('body').removeClass('wok-list wok-gallery');
38+
});

‎ui/js/src/kimchi.network.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ kimchi.NETWORK_TYPE_VEPA = "vepa";
2222

2323

2424
kimchi.initNetwork = function() {
25+
$('body').removeClass('wok-list wok-gallery');
2526
if(wok.tabMode['network'] === 'admin') {
2627
$('.tools').attr('style','display');
2728
$('#networkGrid .wok-nw-grid-header span:last-child').attr('style','display');

‎ui/js/src/kimchi.storage_main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,7 @@ kimchi.doListVolumes = function(poolObj) {
420420
};
421421

422422
kimchi.storage_main = function() {
423+
$('body').removeClass('wok-list wok-gallery');
423424
if(wok.tabMode['storage'] === 'admin') {
424425
$('.tools').attr('style','display');
425426
$('#storage-pool-add').on('click', function() {

0 commit comments

Comments
 (0)