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

From: Rajat Gupta <rajat.triumph(a)gmail.com&gt; 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(a)gmail.com&gt; --- 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; 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">&times;</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