[Kimchi-devel] [PATCH] [Kimchi] Fix for Multi-culture UI issues for kimchi plugin.
rajgupta at linux.vnet.ibm.com
rajgupta at linux.vnet.ibm.com
Fri Dec 2 08:40:30 UTC 2016
From: Rajat Gupta <rajat.triumph at gmail.com>
1. Fixed strings overlaps
2. Fixed button misalignments
3. Globalization text corrections
Signed-off-by: Rajat Gupta <rajat.triumph at gmail.com>
---
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">×</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> <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> <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">
--
2.1.0
More information about the Kimchi-devel
mailing list