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

14 Dec 2016

From: Rajat Gupta <rajat.triumph@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@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

    

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

rajgupta＠linux.vnet.ibm.com