[Kimchi-devel] [PATCH] [Kimchi 1/4] Multi-culture UI issues for kimchi plugin template module
rajgupta at linux.vnet.ibm.com
rajgupta at linux.vnet.ibm.com
Wed Dec 14 11:09:01 UTC 2016
From: Rajat Gupta <rajat.triumph at gmail.com>
Externalized all the html text content
Added data-none-selected-text tag to externalize "Nothing selected" text
Added title tag for table headers
Width adjusted for virtualization template various elements to avoid text overlap in other languages
Moved js string to i18n file
Signed-off-by: Rajat Gupta <rajat.triumph at gmail.com>
---
ui/css/kimchi.css | 19 ++++++++++++++-----
ui/css/src/modules/_templates.scss | 19 ++++++++++++++-----
ui/js/src/kimchi.template_edit_main.js | 6 +++---
ui/pages/i18n.json.tmpl | 3 +++
ui/pages/tabs/templates.html.tmpl | 24 ++++++++++++------------
ui/pages/template-edit.html.tmpl | 28 ++++++++++++++--------------
6 files changed, 60 insertions(+), 39 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 1b2c1dd..b67a4ed 100644
--- a/ui/css/kimchi.css
+++ b/ui/css/kimchi.css
@@ -1612,7 +1612,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 +1722,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 +1899,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 +1989,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 +2012,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 +2067,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 {
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
index f72efe9..49a4f1a 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;
@@ -319,6 +319,10 @@ $kimchi-icon-path: '../images';
/* VM List View classes*/
+#templatestatusselect{
+ width: 240px !important;
+}
+
#templates-root-container {
.grid-control input[type="text"] {
height: 38px;
@@ -390,6 +394,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 +414,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 +459,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.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/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index cd23fcb..9173c44 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")",
diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
index 2207292..2700dd7 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" title="$_('Name')">$_("Name")</a></li>
+ <li nwAct="clone"><a href="#" class="sort" data-sort="os-type-filter" title="$_('OS')">$_("OS")</a></li>
+ <li nwAct="clone"><a href="#" class="sort" data-sort="os-version-filter" title="$_('Version')">$_("Version")</a></li>
+ <li nwAct="clone"><a href="#" class="sort" data-sort="cpus-filter" title="$_('Current CPUs')">$_("Current CPUs")</a></li>
+ <li nwAct="clone"><a href="#" class="sort" data-sort="memory-filter" 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" title="$_('Template Name (ID)')">$_("Template Name (ID)")</span><!--
+ --><span class="column-type" title="$_('OS')">$_("OS")</span><!--
+ --><span class="column-version" title="$_('Version')">$_("Version")</span><!--
+ --><span class="column-processors" title="$_('Current CPUs')">$_("Current CPUs")</span><!--
+ --><span class="column-memory" 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