[Kimchi-devel] [PATCH] [Kimchi 1/4] Multi-culture UI issues for kimchi plugin template module

Wednesday, 14 December 2016

From: Rajat Gupta <rajat.triumph(a)gmail.com&gt;

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(a)gmail.com&gt;
---
 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>&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"
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


    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

[Kimchi-devel] [PATCH] [Kimchi 1/4] Multi-culture UI issues for kimchi plugin template module