[Kimchi-devel] [PATCH] [Kimchi 4/4] Multi-culture UI issues for kimchi plugin Guest module
rajgupta at linux.vnet.ibm.com
rajgupta at linux.vnet.ibm.com
Wed Dec 14 11:09:04 UTC 2016
From: Rajat Gupta <rajat.triumph at gmail.com>
Added title tag for table headers
Externalized all the html and JS text content
Added data-none-selected-text tag to externalize "Nothing selected" text
Guest edit window and its columns width adjusted to avoid text overlap in other languages
Signed-off-by: Rajat Gupta <rajat.triumph at gmail.com>
---
ui/css/kimchi.css | 66 ++++++++++++++++++++----------------
ui/css/src/modules/_edit-guests.scss | 29 ++++++++++------
ui/css/src/modules/_guests.scss | 6 ++--
ui/js/src/kimchi.guest_edit_main.js | 28 +++++++--------
ui/pages/guest-edit.html.tmpl | 30 ++++++++--------
ui/pages/guest-storage-add.html.tmpl | 2 +-
ui/pages/i18n.json.tmpl | 7 ++++
ui/pages/tabs/guests.html.tmpl | 14 ++++----
8 files changed, 102 insertions(+), 80 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 852f9a0..fff3279 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 {
@@ -1094,10 +1094,6 @@ body.wok-gallery {
display: inline-block;
}
-#guest-edit-window #form-guest-edit-interface .column-actions {
- width: 20%;
-}
-
#guest-edit-window #form-guest-edit-storage .column-actions {
width: 26%;
}
@@ -1147,31 +1143,40 @@ body.wok-gallery {
margin: 15px 0 0;
}
-#guest-edit-window form .header .column-actions,
+#guest-edit-window form .header .cell.column-network,
+#guest-edit-window form .header .cell.column-mac {
+ display: inline-block;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+#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 +1185,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%;
diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss
index 6caa720..25d4d65 100644
--- a/ui/css/src/modules/_edit-guests.scss
+++ b/ui/css/src/modules/_edit-guests.scss
@@ -44,11 +44,6 @@
}
}
- #form-guest-edit-interface {
- .column-actions {
- width: 20%;
- }
- }
#form-guest-edit-storage {
.column-actions {
width: 26%;
@@ -94,7 +89,16 @@
}
form {
margin: 15px 0 0;
- .header,
+ .header{
+ .cell.column-network,
+ .cell.column-mac {
+ display: inline-block;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ },
.task,
.body {
.column-actions {
@@ -107,7 +111,7 @@
width: 60.25%;
}
.cell.column-network {
- width: 18%;
+ width: 184px;
> span {
width: 100%;
display: inline-block;
@@ -116,16 +120,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/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/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
index 9dd0c8f..d8a482c 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" title="$_('Network')">$_("Network")</span>
+ <span class="cell column-type" title="$_('Type')">$_("Type")</span>
+ <span class="cell column-mac" title="$_('MAC Address')">$_("MAC Address")</span>
+ <span class="cell column-ip" 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" title="$_('Type')">$_("Type")</span>
+ <span class="cell column-network" title="$_('Network/Interface')">$_("Network/Interface")</span>
+ <span class="cell column-mode" title="$_('Mode')">$_("Mode")</span>
+ <span class="cell column-mac" title="$_('MAC Address')">$_("MAC Address")</span>
+ <span class="cell column-ip" 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 9173c44..4510921 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -93,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 2ca3ede..938e38a 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")</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 title="$_('Guest Name ID')">$_("Guest Name ID")</span></span><!--
+ --><span class="column-type"><span title="$_('OS Type')">$_("OS Type")</span></span><!--
+ --><span class="column-vnc"><span title="$_('VNC')">$_("VNC")</span></span><!--
+ --><span class="column-processors"><span title="$_('Processors Utilization')">$_("Processors Utilization")</span></span><!--
+ --><span class="column-memory"><span title="$_('Memory Utilization')">$_("Memory Utilization")</span></span><!--
+ --><span class="column-storage"><span title="$_('Storage I/O')">$_("Storage I/O")</span></span><!--
+ --><span class="column-network"><span title="$_('Network I/O')">$_("Network I/O")</span></span><!--
--><span class="column-action" style="display:none">
<span class="sr-only">$_("Actions")</span><!--
--></span>
--
2.1.0
More information about the Kimchi-devel
mailing list