Re: [Kimchi-devel] [PATCH] [Kimchi] Fix for Multi-culture UI issues for kimchi plugin.

From: Rajat Gupta <rajat.triumph(a)gmail.com&gt; 1. Fixed strings overlaps 2. Fixed button misalignments 3. Globalization text corrections

Signed-off-by: Rajat Gupta <rajat.triumph(a)gmail.com&gt; --- ui/css/kimchi.css | 156 +++++++++++++++++++++++---------- ui/css/src/modules/_edit-guests.scss | 32 +++++-- ui/css/src/modules/_guests.scss | 6 +- ui/css/src/modules/_network.scss | 4 + ui/css/src/modules/_storage.scss | 61 +++++++++---- ui/css/src/modules/_templates.scss | 19 ++-- ui/js/src/kimchi.guest_edit_main.js | 28 +++--- ui/js/src/kimchi.template_edit_main.js | 6 +- ui/pages/guest-edit.html.tmpl | 30 +++---- ui/pages/guest-storage-add.html.tmpl | 2 +- ui/pages/i18n.json.tmpl | 10 +++ ui/pages/tabs/guests.html.tmpl | 14 +-- ui/pages/tabs/storage.html.tmpl | 34 +++---- ui/pages/tabs/templates.html.tmpl | 24 ++--- ui/pages/template-edit.html.tmpl | 28 +++--- 15 files changed, 298 insertions(+), 156 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index 1b2c1dd..64bae4f 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -506,7 +506,7 @@ #guest-content-container .wok-guest-gallery .wok-guest-list-item { padding: 0; - width: 240px; + width: 290px; height: 435px; display: inline-block; border: 0; @@ -620,7 +620,7 @@ padding-left: 20px; margin-right: 20px; display: block; - width: 220px; + width: 290px; white-space: nowrap; cursor: default; } @@ -671,7 +671,7 @@ } #guest-content-container .wok-guest-gallery .wok-guest-list-item .menu-flat { - width: 240px; + width: 290px; } #guest-content-container .wok-guest-gallery .wok-guest-list-item .btn { @@ -1147,31 +1147,50 @@ body.wok-gallery { margin: 15px 0 0; } -#guest-edit-window form .header .column-actions, +#guest-edit-window form .header .cell.column-network { + display: inline-block; + overflow-x: hidden; + overflow-y: hidden; + text-overflow: ellipsis; + white-space: nowrap;

+ /*width: 184px;*/

+} + +#guest-edit-window form .header, +#guest-edit-window form .header .cell.column-mac { + display: inline-block; + overflow-x: hidden; + overflow-y: hidden; + text-overflow: ellipsis; + white-space: nowrap;

+ /*width: 174px;*/

+} + +#guest-edit-window form .column-actions, #guest-edit-window form .task .column-actions, #guest-edit-window form .body .column-actions { text-align: right; } -#guest-edit-window form .header .column-device, +#guest-edit-window form .column-device, #guest-edit-window form .task .column-device, #guest-edit-window form .body .column-device { width: 12.7%; } -#guest-edit-window form .header .column-path, +#guest-edit-window form .column-path, #guest-edit-window form .task .column-path, #guest-edit-window form .body .column-path { width: 60.25%; } -#guest-edit-window form .header .cell.column-network, +#guest-edit-window form .cell.column-network, #guest-edit-window form .task .cell.column-network, #guest-edit-window form .body .cell.column-network { - width: 18%; + width: 184px; } -#guest-edit-window form .header .cell.column-network > span, +#guest-edit-window form .cell.column-network > span, #guest-edit-window form .task .cell.column-network > span, #guest-edit-window form .body .cell.column-network > span { width: 100%; @@ -1180,74 +1199,77 @@ body.wok-gallery { overflow: hidden; } -#guest-edit-window form .header .cell.column-type, +#guest-edit-window form .cell.column-type, #guest-edit-window form .task .cell.column-type, #guest-edit-window form .body .cell.column-type { - width: 18%; + width: 184px; } -#guest-edit-window form .header .cell.column-mode, +#guest-edit-window form .cell.column-mode, #guest-edit-window form .task .cell.column-mode, #guest-edit-window form .body .cell.column-mode { - width: 16%; + width: 164px; } -#guest-edit-window form .header .cell.column-mac, +#guest-edit-window form .cell.column-mac, #guest-edit-window form .task .cell.column-mac, #guest-edit-window form .body .cell.column-mac { - width: 14%; + width: 174px; } -#guest-edit-window form .header .cell.column-ip, +#guest-edit-window form .cell.column-ip, #guest-edit-window form .task .cell.column-ip, #guest-edit-window form .body .cell.column-ip { - width: 12%; + width: 150px; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; } -#guest-edit-window form .header .cell.column-sel, +#guest-edit-window form .cell.column-sel, #guest-edit-window form .task .cell.column-sel, #guest-edit-window form .body .cell.column-sel { width: 1.77%; } -#guest-edit-window form .header .cell.column-snapshot-name, +#guest-edit-window form .cell.column-snapshot-name, #guest-edit-window form .task .cell.column-snapshot-name, #guest-edit-window form .body .cell.column-snapshot-name { width: 58%; } -#guest-edit-window form .header .cell.column-snapshot-created, +#guest-edit-window form .cell.column-snapshot-created, #guest-edit-window form .task .cell.column-snapshot-created, #guest-edit-window form .body .cell.column-snapshot-created { width: 16.5%; } -#guest-edit-window form .header .cell.column-pci-status, +#guest-edit-window form .cell.column-pci-status, #guest-edit-window form .task .cell.column-pci-status, #guest-edit-window form .body .cell.column-pci-status { width: 3.7%; } -#guest-edit-window form .header .cell.column-pci-status .fa, +#guest-edit-window form .cell.column-pci-status .fa, #guest-edit-window form .task .cell.column-pci-status .fa, #guest-edit-window form .body .cell.column-pci-status .fa { color: #8cc63f; font-size: 24px; } -#guest-edit-window form .header .cell.column-pci-name, +#guest-edit-window form .cell.column-pci-name, #guest-edit-window form .task .cell.column-pci-name, #guest-edit-window form .body .cell.column-pci-name { width: 21%; } -#guest-edit-window form .header .cell.column-product, +#guest-edit-window form .cell.column-product, #guest-edit-window form .task .cell.column-product, #guest-edit-window form .body .cell.column-product { width: 45%; } -#guest-edit-window form .header .cell.column-vendor, +#guest-edit-window form .cell.column-vendor, #guest-edit-window form .task .cell.column-vendor, #guest-edit-window form .body .cell.column-vendor { width: 24.1%; @@ -1612,7 +1634,7 @@ body.wok-gallery { #template-edit-window .template-edit-wrapper-controls { vertical-align: top; - width: 400px; + width: 480px; height: 35px; line-height: 35px; margin: 7px 0 8px; @@ -1722,15 +1744,15 @@ body.wok-gallery { } #template-edit-window .template-storage-cell.type { - width: 100px; + width: 110px; } #template-edit-window .template-storage-cell.disk { - width: 100px; + width: 133px; } #template-edit-window .template-storage-cell.format { - width: 250px; + width: 162px; } #template-edit-window .template-interface-cell.network { @@ -1899,6 +1921,10 @@ body.wok-gallery { } /* VM List View classes*/ +#templatestatusselect { + width: 240px !important; +} + #templates-root-container .grid-control input[type="text"] { height: 38px; display: inline-block; @@ -1985,6 +2011,10 @@ body.wok-gallery { border-bottom: none; border-top: 0; background-color: #fff; + width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } #templates-root-container .wok-vm-list .wok-vm-body { @@ -2004,6 +2034,7 @@ body.wok-gallery { font-size: 12.5pt; line-height: 2.42857; font-weight: 400; + width: 200px; } #templates-root-container .wok-vm-list .wok-vm-body .column-type { @@ -2058,7 +2089,7 @@ body.wok-gallery { } #templates-root-container .wok-vm-list .column-action { - width: 33.8000%; + width: 232px; } #templates-root-container .wok-vm-list .item-hidden { @@ -2281,6 +2312,10 @@ body.wok-gallery { display: block; } +#networkConfig .alert-dismissable .close, .alert-dismissible .close { + right: 7px !important; +} + #network-root-container .wok-nw-loading-icon { background: transparent url("../../../images/theme-default/spin5.svg") no-repeat 50% 50%; -webkit-animation: spin 3s infinite linear; @@ -2595,7 +2630,7 @@ body.wok-gallery { #storage-root-container .volumes .wok-gallery .volume-box-inner { padding: 0 16px; width: 409px; - height: 110px; + height: 150px; display: flex; flex-flow: row wrap; justify-content: space-around; @@ -2657,13 +2692,17 @@ body.wok-gallery { #storage-root-container .volumes .wok-gallery span.column-format, #storage-root-container .volumes .wok-gallery span.column-type { order: 3; - width: 72px; + width: 142px; margin-top: -5px; } #storage-root-container .volumes .wok-gallery span.gallery-header { font-weight: 600; display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 90px; } #storage-root-container .volumes .wok-gallery span.column-progress { @@ -2754,7 +2793,7 @@ body.wok-gallery { @media (min-width: 992px) { #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-format, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-format { - width: 95px; + width: 127px; } } @@ -2790,7 +2829,7 @@ body.wok-gallery { #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-capacity, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-allocated, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-progress { - width: 95px; + width: 142px; } } @@ -2845,14 +2884,14 @@ body.wok-gallery { @media (min-width: 992px) { #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name { - width: 333px; + width: 250px; } } @media (min-width: 1200px) { #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name { - width: 444px; + width: 300px; } } @@ -2882,29 +2921,44 @@ body.wok-gallery { #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-state, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-state { - width: 3.0519%; + width: 2.0519%; text-align: center; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-name, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-name { - width: 12.7272%; + width: 126px; text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-type, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-type { - width: 11.6883%; + width: 101px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-location, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-location { - width: 21.4285%; + width: 171px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-usage, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-usage { - width: 9.41558%; + width: 152px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-usage .usage-icon, @@ -2933,23 +2987,35 @@ body.wok-gallery { #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-capacity, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-capacity { - width: 8.701298%; + width: 129px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-allocated, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-allocated { - width: 9.35064%; + width: 134px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-disks, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-disks { text-align: center; - width: 2.9870%; + width: 105px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-action, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-action { - width: 20.64%; + width: 254px; text-align: right; } diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss index 6caa720..e3148bd 100644 --- a/ui/css/src/modules/_edit-guests.scss +++ b/ui/css/src/modules/_edit-guests.scss @@ -94,7 +94,24 @@ } form { margin: 15px 0 0; - .header,

+ .header{ + .cell.column-network{ + display: inline-block; + overflow-x: hidden; + overflow-y: hidden; + text-overflow: ellipsis; + white-space: nowrap; + /*width: 184px;*/ + }, + .cell.column-mac{ + display: inline-block; + overflow-x: hidden; + overflow-y: hidden; + text-overflow: ellipsis; + white-space: nowrap; + /*width: 174px;*/

+ } + }, .task, .body { .column-actions { @@ -107,7 +124,7 @@ width: 60.25%; } .cell.column-network { - width: 18%; + width: 184px; > span { width: 100%; display: inline-block; @@ -116,16 +133,19 @@ } } .cell.column-type { - width: 18%; + width: 184px; } .cell.column-mode { - width: 16%; + width: 164px; } .cell.column-mac { - width: 14%; + width: 174px; } .cell.column-ip { - width: 12%; + width: 150px; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; } .cell.column-sel { width: 1.77%; diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss index 7893cb3..37654dd 100644 --- a/ui/css/src/modules/_guests.scss +++ b/ui/css/src/modules/_guests.scss @@ -223,7 +223,7 @@ } .wok-guest-list-item { padding: 0; - width: 240px; + width: 290px; height: 435px; display: inline-block; border: 0; @@ -323,7 +323,7 @@ padding-left: 20px; margin-right: 20px; display: block; - width: 220px; + width: 290px; white-space: nowrap; cursor: default; } @@ -366,7 +366,7 @@ background-repeat: no-repeat; } .menu-flat { - width: 240px; + width: 290px; } .btn { width: 100%; diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss index b030ee4..12684ce 100644 --- a/ui/css/src/modules/_network.scss +++ b/ui/css/src/modules/_network.scss @@ -38,6 +38,10 @@ } +#networkConfig .alert-dismissable .close, .alert-dismissible .close{ + right: 7px !important; +} + #network-root-container { .wok-nw-loading-icon { diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss index 0ccc816..70cb3fa 100644 --- a/ui/css/src/modules/_storage.scss +++ b/ui/css/src/modules/_storage.scss @@ -236,7 +236,7 @@ .volume-box-inner { padding: 0 16px; width: 409px; - height: 110px; + height: 150px; display: flex; flex-flow: row wrap; justify-content: space-around; @@ -299,13 +299,17 @@ span.column-format, span.column-type { order: 3; - width: 72px; + width: 142px; margin-top: -5px; } span.gallery-header { font-weight: 600; display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 90px; } span.column-progress { @@ -406,7 +410,7 @@ > span.column-format { width: 57px; @media (min-width: $screen-md) { - width: 95px; + width: 127px; } @media (min-width: $screen-lg) { left: 173px; @@ -421,7 +425,7 @@ width: 79px; text-transform: capitalize; @media (min-width: $screen-md) { - width: 95px; + width: 142px; } @media (min-width: $screen-lg) { left: 165px; @@ -449,10 +453,10 @@ > span.column-name { width: 202px; @media (min-width: $screen-md) { - width: 333px; + width: 250px; } @media (min-width: $screen-lg) { - width: 444px; + width: 300px; } label { @@ -485,21 +489,36 @@ .wok-datagrid > .wok-datagrid-header, .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row { > span.column-state { - width: 3.0519%; + width: 2.0519%; text-align: center; } > span.column-name { - width: 12.7272%; + width: 126px; text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } > span.column-type { - width: 11.6883%; + width: 101px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } > span.column-location { - width: 21.4285%; + width: 171px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } > span.column-usage { - width: 9.41558%; + width: 152px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; .usage-icon { padding-left: 35px; display: inline-block; @@ -518,17 +537,29 @@ } } > span.column-capacity { - width: 8.701298%; + width: 129px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } > span.column-allocated { - width: 9.35064%; + width: 134px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } > span.column-disks { text-align: center; - width: 2.9870%; + width: 105px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } > span.column-action { - width: 20.64%; + width: 254px; text-align: right; } } diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss index f72efe9..c5d727e 100644 --- a/ui/css/src/modules/_templates.scss +++ b/ui/css/src/modules/_templates.scss @@ -77,7 +77,7 @@ $kimchi-icon-path: '../images'; } .template-edit-wrapper-controls { vertical-align: top; - width: 400px; + width: 480px; height: 35px; line-height: 35px; margin: 7px 0 8px; @@ -167,13 +167,13 @@ $kimchi-icon-path: '../images'; width: 180px !important; } .template-storage-cell.type { - width: 100px; + width: 110px; } .template-storage-cell.disk { - width: 100px; + width: 133px; } .template-storage-cell.format { - width: 250px; + width: 162px; } .template-interface-cell.network { width: 220px; @@ -318,7 +318,9 @@ $kimchi-icon-path: '../images'; /* VM List View classes*/ - +#templatestatusselect{ + width: 240px !important; +} #templates-root-container { .grid-control input[type="text"] { height: 38px; @@ -390,6 +392,10 @@ $kimchi-icon-path: '../images'; border-bottom: none; border-top: 0; background-color: $table-bg; + width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } .wok-vm-body { @@ -406,6 +412,7 @@ $kimchi-icon-path: '../images'; font-size: 12.5pt; line-height: (1 + $line-height-base); font-weight: 400; + width: 200px; } .column-type { padding-left: 40px !important; @@ -450,7 +457,7 @@ $kimchi-icon-path: '../images'; width: 1.6900%; } .column-action { - width: 33.8000%; + width: 232px; } .item-hidden { display: none !important; diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js index 7667fad..bb82077 100644 --- a/ui/js/src/kimchi.guest_edit_main.js +++ b/ui/js/src/kimchi.guest_edit_main.js @@ -341,13 +341,13 @@ kimchi.guest_edit_main = function() { case 'ovs' : $("#label-type-" + data.id, item).text(result.type); $("#label-network-" + data.id, item).text(result.source); - $("#label-mode-" + data.id, item).text('None'); + $("#label-mode-" + data.id, item).text(i18n['KCHVMED6018M']); break; case 'network' : $("#label-type-" + data.id, item).text(result.type); $("#label-network-" + data.id, item).text(result.network); - $("#label-mode-" + data.id, item).text('None'); + $("#label-mode-" + data.id, item).text(i18n['KCHVMED6018M']); break; } @@ -397,7 +397,7 @@ kimchi.guest_edit_main = function() { break; case 'ovs': - $('#label-mode-' + data.id).html('None'); + $('#label-mode-' + data.id).html(i18n['KCHVMED6018M']); $('#label-mode-' + data.id).removeClass('hide'); $('span.column-mode .bootstrap-select', itemNode).toggleClass("hide", true); @@ -405,7 +405,7 @@ kimchi.guest_edit_main = function() { $("span.column-network select", itemNode).selectpicker('refresh'); break; case 'network': - $('#label-mode-' + data.id).html('None'); + $('#label-mode-' + data.id).html(i18n['KCHVMED6018M']); $('#label-mode-' + data.id).removeClass('hide'); $('span.column-mode .bootstrap-select', itemNode).toggleClass("hide", true); @@ -470,14 +470,14 @@ kimchi.guest_edit_main = function() { $('#form-guest-edit-interface > div.s390x').show(); var typeOptionsdata = [{ - label: "macvtap", - value: "macvtap" + label: i18n['KCHVMED6013M'], + value: 'macvtap' }, { - label: "ovs", - value: "ovs" + label: i18n['KCHVMED6014M'], + value: 'ovs' }, { - label: "network", - value: "network" + label: i18n['KCHVMED6015M'], + value: 'network' }]; var typeOptions = ''; @@ -487,11 +487,11 @@ kimchi.guest_edit_main = function() { } var modeOptionsdata = [{ - label: "Bridge", - value: "bridge" + label: i18n['KCHVMED6016M'], + value: 'bridge' }, { - label: "Vepa", - value: "vepa" + label: i18n['KCHVMED6017M'], + value: 'vepa' }]; var modeOptions = ''; diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js index 414a108..05bf1f4 100644 --- a/ui/js/src/kimchi.template_edit_main.js +++ b/ui/js/src/kimchi.template_edit_main.js @@ -616,9 +616,9 @@ kimchi.template_edit_main = function() { //initialize type option var typeOptionsdata = {}; var typeOptions = ''; - typeOptionsdata.macvtap = 'macvtap'; - typeOptionsdata.ovs = 'ovs'; - typeOptionsdata.network = 'network'; + typeOptionsdata.macvtap = i18n['KCHTMPL6009M']; + typeOptionsdata.ovs = i18n['KCHTMPL6010M']; + typeOptionsdata.network = i18n['KCHTMPL6011M']; $.each(typeOptionsdata, function(key, value) { if (value === networkData.type) { diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index 9dd0c8f..09a2ac4 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -23,7 +23,7 @@ <!DOCTYPE html> <html> <body> -<div id="guest-edit-window" class="window modal-content"> +<div id="guest-edit-window" class="window modal-content" style="width:1280px; right:80px;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">$_("Edit Guest")</h4> @@ -63,7 +63,7 @@ </div> <div class="form-group" id="guest-console-panel" style="display:none;"> <label for="guest-edit-console">$_("Console")</label> - <select id="guest-edit-console" name="console" class="form-control"> + <select id="guest-edit-console" data-none-selected-text="$_("Nothing selected")" name="console" class="form-control"> <option value="sclp">$_("sclp")</option> <option value="virtio">$_("virtio")</option> </select> @@ -83,18 +83,18 @@ <form role="tabpanel" class="guest-edit-interface tab-pane" id="form-guest-edit-interface"> <button class="add btn btn-primary"><i class="fa fa-plus-circle"></i>$_("Add")</button> <div class="header"> - <span class="cell column-network">$_("Network")</span> - <span class="cell column-type">$_("Type")</span> - <span class="cell column-mac">$_("MAC Address")</span> - <span class="cell column-ip">$_("IP Address")</span> + <span class="cell column-network" data-toggle="tooltip" title="$_('Network')">$_("Network")</span> + <span class="cell column-type" data-toggle="tooltip" title="$_('Type')">$_("Type")</span> + <span class="cell column-mac" data-toggle="tooltip" title="$_('MAC Address')">$_("MAC Address")</span> + <span class="cell column-ip" data-toggle="tooltip" title="$_('IP Address')">$_("IP Address")</span> <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span> </div> <div class="header s390x" style="display:none"> - <span class="cell column-type">$_("Type")</span> - <span class="cell column-network">$_("Network/Interface")</span> - <span class="cell column-mode">$_("Mode")</span> - <span class="cell column-mac">$_("MAC Address")</span> - <span class="cell column-ip">$_("IP Address")</span> + <span class="cell column-type" data-toggle="tooltip" title="$_('Type')">$_("Type")</span> + <span class="cell column-network" data-toggle="tooltip" title="$_('Network/Interface')">$_("Network/Interface")</span> + <span class="cell column-mode" data-toggle="tooltip" title="$_('Mode')">$_("Mode")</span> + <span class="cell column-mac" data-toggle="tooltip" title="$_('MAC Address')">$_("MAC Address")</span> + <span class="cell column-ip" data-toggle="tooltip" title="$_('IP Address')">$_("IP Address")</span> <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span> </div> <div class="body"></div> @@ -272,7 +272,7 @@ <div class="item" id="{mac}"> <span class="cell column-network"> <span id="label-network-{id}" class="{viewMode}">{network}</span> - <select class="{editMode}"></select> + <select class="{editMode}" data-none-selected-text="$_("Nothing selected")"></select> </span> <span class="cell column-type"> {type} @@ -299,15 +299,15 @@ <div class="item" id="{mac}"> <span class="cell column-type"> <span id="label-type-{id}" class="{viewMode}">{type}</span> - <select id="interface-s390x-type-{id}" class="{editMode}"></select> + <select id="interface-s390x-type-{id}" data-none-selected-text="$_("Nothing selected")" class="{editMode}"></select> </span> <span class="cell column-network"> <span id="label-network-{id}" class="{viewMode}">{network}{source}</span> - <select id="interface-s390x-network-{id}" class="{editMode}"></select> + <select id="interface-s390x-network-{id}" data-none-selected-text="$_("Nothing selected")" class="{editMode}"></select> </span> <span class="cell column-mode"> <span id="label-mode-{id}" class="{viewMode}">{mode}</span> - <select id="interface-s390x-mode-{id}" class="{editMode}"></select> + <select id="interface-s390x-mode-{id}" data-none-selected-text="$_("Nothing selected")" class="{editMode}"></select> </span> <span class="cell column-mac"> <span id="label-mac-{id}" class="{viewMode}">{mac}</span> diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl index dad3c3b..3b60b14 100644 --- a/ui/pages/guest-storage-add.html.tmpl +++ b/ui/pages/guest-storage-add.html.tmpl @@ -95,7 +95,7 @@ </div> <div class="form-group volume"> <label>$_("Storage Volume")</label> - <select id="guest-disk-vol" class="selectpicker col-md-12 col-lg-12"> + <select id="guest-disk-vol" data-none-selected-text="$_("Nothing selected")" class="selectpicker col-md-12 col-lg-12"> </select> <p class="help-block"><i class="fa fa-info-circle"></i> $_("Storage volume to be attached")</p> </div> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl index cd23fcb..4510921 100644 --- a/ui/pages/i18n.json.tmpl +++ b/ui/pages/i18n.json.tmpl @@ -54,6 +54,9 @@ "KCHTMPL6006M": "$_("Not Available")", "KCHTMPL6007M": "$_("Please check the invalid Storage Pools")", "KCHTMPL6008M": "$_("Please check the invalid Storage Pools or Paths")", + "KCHTMPL6009M": "$_("macvtap")", + "KCHTMPL6010M": "$_("ovs")", + "KCHTMPL6011M": "$_("network")", "KCHVM6001M": "$_("This will delete the %1 virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")", "KCHVM6002M": "$_("Power off Confirmation")", @@ -90,6 +93,13 @@ "KCHVMED6010M": "$_("Successfully attached device to VM")", "KCHVMED6011M": "$_("Successfully detached device from VM")", "KCHVMED6012M": "$_("Following devices will be affected, confirm?")", + "KCHVMED6013M": "$_("macvtap")", + "KCHVMED6014M": "$_("ovs")", + "KCHVMED6015M": "$_("network")", + "KCHVMED6016M": "$_("Bridge")", + "KCHVMED6017M": "$_("Vepa")", + "KCHVMED6018M": "$_("None")", + "KCHNET6001M": "$_("unavailable")", "KCHNET6002M": "$_("This action will interrupt network connectivity for any virtual machine that depend on the %1 network.")", diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl index 37c9ce2..5d49e1c 100644 --- a/ui/pages/tabs/guests.html.tmpl +++ b/ui/pages/tabs/guests.html.tmpl @@ -50,13 +50,13 @@ <ul class="wok-guest-list"> <li class="wok-guest-list-header"> <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- - --><span class="column-name"><span>$_("Guest Name ID")</span></span><!-- - --><span class="column-type"><span>$_("OS Type")</span></span><!-- - --><span class="column-vnc"><span>$_("VNC")</span></span><!-- - --><span class="column-processors"><span>$_("Processors Utilization")</span></span><!-- - --><span class="column-memory"><span>$_("Memory Utilization")</span></span><!-- - --><span class="column-storage"><span>$_("Storage I/O")</span></span><!-- - --><span class="column-network"><span>$_("Network I/O")</span></span><!-- + --><span class="column-name"><span data-toggle="tooltip" title="$_('Guest Name ID')">$_("Guest Name ID")</span></span><!-- + --><span class="column-type"><span data-toggle="tooltip" title="$_('OS Type')">$_("OS Type")</span></span><!-- + --><span class="column-vnc"><span data-toggle="tooltip" title="$_('VNC')">$_("VNC")</span></span><!-- + --><span class="column-processors"><span data-toggle="tooltip" title="$_('Processors Utilization')">$_("Processors Utilization")</span></span><!-- + --><span class="column-memory"><span data-toggle="tooltip" title="$_('Memory Utilization')">$_("Memory Utilization")</span></span><!-- + --><span class="column-storage"><span data-toggle="tooltip" title="$_('Storage I/O')">$_("Storage I/O")</span></span><!-- + --><span class="column-network"><span data-toggle="tooltip" title="$_('Network I/O')">$_("Network I/O")</span></span><!-- --><span class="column-action" style="display:none"> <span class="sr-only">$_("Actions")</span><!-- --></span> diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl index 5468138..7c1ed39 100644 --- a/ui/pages/tabs/storage.html.tmpl +++ b/ui/pages/tabs/storage.html.tmpl @@ -41,13 +41,13 @@ <div id='storageGrid' class="hidden"> <div> <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- - --><span class="column-name">$_("Name")</span><!-- - --><span class="column-type">$_("Type")</span><!-- - --><span class="column-location">$_("Location")</span><!-- - --><span class="column-usage">$_("%Used")</span><!-- - --><span class="column-allocated">$_("Allocated")</span><!-- - --><span class="column-capacity">$_("Capacity")</span><!-- - --><span class="column-disks">$_("Disks")</span><!-- + --><span class="column-name" data-taggle="tooltip" title="$_('Name')">$_("Name")</span><!-- + --><span class="column-type" data-taggle="tooltip" title="$_('Type')">$_("Type")</span><!-- + --><span class="column-location" data-taggle="tooltip" title="$_('Location')">$_("Location")</span><!-- + --><span class="column-usage" data-taggle="tooltip" title="$_('%Used')">$_("%Used")</span><!-- + --><span class="column-allocated" data-taggle="tooltip" title="$_('Allocated')">$_("Allocated")</span><!-- + --><span class="column-capacity" data-taggle="tooltip" title="$_('Capacity')">$_("Capacity")</span><!-- + --><span class="column-disks" data-taggle="tooltip" title="$_('Disks')">$_("Disks")</span><!-- --><span class="column-action" display="none"><span class="sr-only">$_("Actions")</span></span> </div> <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div> @@ -87,8 +87,8 @@ <span class='column-state' val="{state}"><span class='storage-state {state}'><i class="fa fa-power-off"></i></span></span><!-- --><span class='column-name' title="{name}" val="{name}">{name}</span><!-- --><span class='column-type' val="{type}">{type}</span><!-- - --><span class='column-location' val="{path}">{path}</span><!-- - --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>%</span><!-- + --><span class='column-location' title="{path}" val="{path}">{path}</span><!-- + --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>$_("%")</span><!-- --><span class='column-allocated' val="{allocated}">{allocated}</span><!-- --><span class='column-capacity' val="{capacity}">{capacity}</span><!-- --><span class="column-disks {state}"><div class="handle arrow-down"></div></span><!-- @@ -108,7 +108,8 @@ <div class="volumes"> <div id="volume-{name}" class="volumeslist" data-name="{name}" data-type="{type}"> <div class="row"> - <div class="pull-left"> + <div class="col-sm-7"> + <div class="btn-group"> <div class="dropdown menu-flat pool-action"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span></button> <ul class="dropdown-menu actionsheet"> @@ -119,14 +120,17 @@ <li class="disabled critical"><a href="#" class="volume-delete" data-name="{name}"><i class="fa fa-minus-circle"></i> $_("Delete")</a></li> </ul> </div> - <button type="button" class="btn btn-default toggle-gallery"><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> + <button type="button" class="btn btn-default toggle-gallery"><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="col-sm-5"> <div class="pull-right"> <label><span class="sr-only">$_('Filter:')</span> <input type="text" class="filter form-control search" placeholder="$_('Filter')"> </label> </div> </div> + </div> <div class="wok-datagrid wok-list"> <div class="wok-datagrid-header"> <span class="column-name">$_('Name')</span><!-- @@ -168,12 +172,12 @@ <input type="checkbox" class="wok-checkbox" name="selected-volume[]" id="{checkbox}" value="{name}"> <label class="volume-name volume-name-filter" for="{checkbox}"><span class="volume-inline-progress hidden"><span class="wok-loading-icon"></span></span> {name}</label><!-- --></span><!-- - --><span class="column-format volume-format-filter"><span class="gallery-header">$_('Format')</span><span class="format-text">{format}</span></span><!-- - --><span class="column-type volume-type-filter"><span class="gallery-header">$_('Type')</span>{type}</span><!-- + --><span class="column-format volume-format-filter"><span class="gallery-header" title="$_('Format')">$_('Format')</span><span class="format-text">{format}</span></span><!-- + --><span class="column-type volume-type-filter"><span class="gallery-header" title="$_('Type')">$_('Type')</span>{type}</span><!-- --><span class="column-used-by volume-used-by-filter"><i class="fa fa-exclamation-circle" data-toggle="tooltip" title="$_('Used by the following VMs:') {used_by_formatted}" data-placement="bottom" data-original-title="$_('Used by the following VMs:') {used_by_formatted}"></i><span class="format-text" data-toggle="tooltip" title="$_('Used by the following VMs:') {used_by_formatted}" data-placement="bottom" data-original-title="$_('Used by the following VMs:') {used_by_formatted}">{used_by_text}</span></span><!-- --><span class="column-used"><span role="presentation" class="volume-icon {capacityIcon}"></span> {capacityLevel}%</span><!-- - --><span class="column-allocated"><span class="gallery-header">$_('Allocation')</span>{allocation}</span><!-- - --><span class="column-capacity"><span class="gallery-header">$_('Capacity')</span>{capacity}</span><!-- + --><span class="column-allocated"><span class="gallery-header" title="$_('Allocation')">$_('Allocation')</span>{allocation}</span><!-- + --><span class="column-capacity"><span class="gallery-header" title="$_('Capacity')">$_('Capacity')</span>{capacity}</span><!-- --><span class="column-progress hidden"><span class="progress-status"></span> <span class="progress-transferred"></span> </span> </div> diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl index 2207292..f947bc9 100644 --- a/ui/pages/tabs/templates.html.tmpl +++ b/ui/pages/tabs/templates.html.tmpl @@ -37,15 +37,15 @@ </div> <div class="form-group pull-right"> - <div class="btn-group bootstrap-select control"> - <button type="button" class="btn dropdown-toggle form-control selectpicker btn-default sort-button" data-toggle="dropdown" title="Status" aria-expanded="false"><span class="filter-option pull-left">$_("Status")</span>&nbsp;<span class="caret"></span></button> + <div class="btn-group bootstrap-select control" id="templatestatusselect"> + <button type="button" class="btn dropdown-toggle form-control selectpicker btn-default sort-button" data-toggle="dropdown" aria-expanded="false"><span class="filter-option pull-left" data-placement="auto bottom" data-toggle="tooltip" title="$_('Status')">$_("Status")</span>&nbsp;<span class="caret"></span></button> <div class="dropdown-menu open" style="max-height: 668px; overflow: hidden; min-height: 0px;padding: 0px;"> <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 656px; overflow-y: auto; min-height: 0px;"> - <li nwAct="sort"><a href="#" class="sort" data-sort="name-filter">$_("Name")</a></li> - <li nwAct="clone"><a href="#" class="sort" data-sort="os-type-filter">$_("OS")</a></li> - <li nwAct="clone"><a href="#" class="sort" data-sort="os-version-filter">$_("Version")</a></li> - <li nwAct="clone"><a href="#" class="sort" data-sort="cpus-filter">$_("Current CPUs")</a></li> - <li nwAct="clone"><a href="#" class="sort" data-sort="memory-filter">$_("Memory")</a></li> + <li nwAct="sort"><a href="#" class="sort" data-sort="name-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('Name')">$_("Name")</a></li> + <li nwAct="clone"><a href="#" class="sort" data-sort="os-type-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('OS')">$_("OS")</a></li> + <li nwAct="clone"><a href="#" class="sort" data-sort="os-version-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('Version')">$_("Version")</a></li> + <li nwAct="clone"><a href="#" class="sort" data-sort="cpus-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('Current CPUs')">$_("Current CPUs")</a></li> + <li nwAct="clone"><a href="#" class="sort" data-sort="memory-filter" data-placement="auto bottom" data-toggle="tooltip" title="$_('Memory')">$_("Memory")</a></li> </ul> </div> </div> @@ -57,11 +57,11 @@ <div id="alert-container"></div> <ul id="templates-grid" class="wok-vm-list hidden empty-when-logged-off"> <li class="wok-vm-header"> - <span class="column-name">$_("Template Name (ID)")</span><!-- - --><span class="column-type">$_("OS")</span><!-- - --><span class="column-version">$_("Version")</span><!-- - --><span class="column-processors">$_("Current CPUs")</span><!-- - --><span class="column-memory">$_("Memory")</span><!-- + <span class="column-name" data-placement="auto bottom" data-toggle="tooltip" title="$_('Template Name (ID)')">$_("Template Name (ID)")</span><!-- + --><span class="column-type" data-placement="auto bottom" data-toggle="tooltip" title="$_('OS')">$_("OS")</span><!-- + --><span class="column-version" data-placement="auto bottom" data-toggle="tooltip" title="$_('Version')">$_("Version")</span><!-- + --><span class="column-processors" data-placement="auto bottom" data-toggle="tooltip" title="$_('Current CPUs')">$_("Current CPUs")</span><!-- + --><span class="column-memory" data-placement="auto bottom" data-toggle="tooltip" title="$_('Memory')">$_("Memory")</span><!-- --><span class="column-action" style="display:none"><span class="sr-only">$_("Actions")</span></span> </li> <li> diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl index 728ce6d..4b5a407 100644 --- a/ui/pages/template-edit.html.tmpl +++ b/ui/pages/template-edit.html.tmpl @@ -218,13 +218,13 @@ <span class="template-storage-cell source" style="display:none"> <input class="template-storage-source" value={storageSource} type="text" style="display:none" /> <select id="source"> - <option value="pool">pool</option> - <option value="path">path</option> + <option value="pool">$_("pool")</option> + <option value="path">$_("path")</option> </select> </span> <span class="template-storage-cell storage-pool"> <input class="template-storage-name" value="{storageName}" type="text" style="display:none" /> - <select id="selectStorageName-{storageIndex}" class="selectStorageName"></select> + <select id="selectStorageName-{storageIndex}" data-none-selected-text="$_('Nothing selected')" class="selectStorageName"></select> </span> <span class="template-storage-cell storage-path" style="display:none"> <input class="template-storage-path storage-path form-control" value="{storagePath}" type="text" /> @@ -238,12 +238,12 @@ <span class="template-storage-cell format"> <input class="template-storage-disk-format" value={storageDiskFormat} type="text" style="display:none" /> <select id="diskFormat"> - <option value="qcow2">qcow2</option> - <option value="raw">raw</option> - <option value="qcow">qcow</option> - <option value="qed">qed</option> - <option value="vmdk">vmdk</option> - <option value="vpc">vpc</option> + <option value="qcow2">$_("qcow2")</option> + <option value="raw">$_("raw")</option> + <option value="qcow">$_("qcow")</option> + <option value="qed">$_("qed")</option> + <option value="vmdk">$_("vmdk")</option> + <option value="vpc">$_("vpc")</option> </select> </span> <span class="pull-right"> @@ -254,7 +254,7 @@ <script id="template-interface-tmpl" type="text/html"> <div class="item" id={networkID}> <span class="template-interface-cell network"> - <select></select> + <select data-none-selected-text="$_('Nothing selected')"></select> </span> <span class="template-interface-cell type"> <input value={type} readonly=true class="form-control" type="text" /> @@ -270,13 +270,13 @@ <select></select> </span> <span class="template-interface-cell network"> - <select></select> + <select data-none-selected-text="$_('Nothing selected')"></select> </span> <span class="template-interface-cell mode"> - <span class="label-mode hide">None</span> + <span class="label-mode hide">$_("None")</span> <select> - <option value="bridge">bridge</option> - <option value="vepa">vepa</option> + <option value="bridge">$_("bridge")</option> + <option value="vepa">$_("vepa")</option> </select> </span> <span class="pull-right">