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