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

From: Rajat Gupta <rajat.triumph(a)gmail.com&gt; Externalized all the html text content Html changes done for virtualization storage listing table to avoid text overlap in other languages CSS changes done for virtualization storage listing table columns to avoid strings overflow in other languages Signed-off-by: Rajat Gupta <rajat.triumph(a)gmail.com&gt; --- ui/css/kimchi.css | 61 ++++++++++++++++++++++++++++++---------- ui/css/src/modules/_storage.scss | 61 ++++++++++++++++++++++++++++++---------- ui/pages/tabs/storage.html.tmpl | 34 ++++++++++++---------- 3 files changed, 111 insertions(+), 45 deletions(-) diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css index ccb29fa..852f9a0 100644 --- a/ui/css/kimchi.css +++ b/ui/css/kimchi.css @@ -2608,7 +2608,7 @@ body.wok-gallery { #storage-root-container .volumes .wok-gallery .volume-box-inner { padding: 0 16px; width: 409px; - height: 110px; + height: 150px; display: flex; flex-flow: row wrap; justify-content: space-around; @@ -2670,13 +2670,17 @@ body.wok-gallery { #storage-root-container .volumes .wok-gallery span.column-format, #storage-root-container .volumes .wok-gallery span.column-type { order: 3; - width: 72px; + width: 142px; margin-top: -5px; } #storage-root-container .volumes .wok-gallery span.gallery-header { font-weight: 600; display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 90px; } #storage-root-container .volumes .wok-gallery span.column-progress { @@ -2767,7 +2771,7 @@ body.wok-gallery { @media (min-width: 992px) { #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-format, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-format { - width: 95px; + width: 127px; } } @@ -2803,7 +2807,7 @@ body.wok-gallery { #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-capacity, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-allocated, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-progress { - width: 95px; + width: 142px; } } @@ -2858,14 +2862,14 @@ body.wok-gallery { @media (min-width: 992px) { #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name { - width: 333px; + width: 250px; } } @media (min-width: 1200px) { #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-header > span.column-name, #storage-root-container .volumes .wok-list.wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > div > div > div > span.column-name { - width: 444px; + width: 300px; } } @@ -2895,29 +2899,44 @@ body.wok-gallery { #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-state, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-state { - width: 3.0519%; + width: 2.0519%; text-align: center; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-name, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-name { - width: 12.7272%; + width: 126px; text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-type, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-type { - width: 11.6883%; + width: 101px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-location, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-location { - width: 21.4285%; + width: 171px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-usage, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-usage { - width: 9.41558%; + width: 152px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-usage .usage-icon, @@ -2946,23 +2965,35 @@ body.wok-gallery { #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-capacity, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-capacity { - width: 8.701298%; + width: 129px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-allocated, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-allocated { - width: 9.35064%; + width: 134px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-disks, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-disks { text-align: center; - width: 2.9870%; + width: 105px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } #storage-root-container .wok-datagrid > .wok-datagrid-header > span.column-action, #storage-root-container .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span.column-action { - width: 20.64%; + width: 254px; text-align: right; } diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss index 0ccc816..70cb3fa 100644 --- a/ui/css/src/modules/_storage.scss +++ b/ui/css/src/modules/_storage.scss @@ -236,7 +236,7 @@ .volume-box-inner { padding: 0 16px; width: 409px; - height: 110px; + height: 150px; display: flex; flex-flow: row wrap; justify-content: space-around; @@ -299,13 +299,17 @@ span.column-format, span.column-type { order: 3; - width: 72px; + width: 142px; margin-top: -5px; } span.gallery-header { font-weight: 600; display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 90px; } span.column-progress { @@ -406,7 +410,7 @@ width: 57px; @media (min-width: $screen-md) { - width: 95px; + width: 127px; } @media (min-width: $screen-lg) { left: 173px; @@ -421,7 +425,7 @@ width: 79px; text-transform: capitalize; @media (min-width: $screen-md) { - width: 95px; + width: 142px; } @media (min-width: $screen-lg) { left: 165px; @@ -449,10 +453,10 @@ width: 202px; @media (min-width: $screen-md) { - width: 333px; + width: 250px; } @media (min-width: $screen-lg) { - width: 444px; + width: 300px; } label { @@ -485,21 +489,36 @@ .wok-datagrid > .wok-datagrid-header, .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row { - width: 3.0519%; + width: 2.0519%; text-align: center; } - width: 12.7272%; + width: 126px; text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } - width: 11.6883%; + width: 101px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } - width: 21.4285%; + width: 171px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } - width: 9.41558%; + width: 152px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; .usage-icon { padding-left: 35px; display: inline-block; @@ -518,17 +537,29 @@ } } - width: 8.701298%; + width: 129px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } - width: 9.35064%; + width: 134px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } text-align: center; - width: 2.9870%; + width: 105px; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + overflow: hidden !important; } - width: 20.64%; + width: 254px; text-align: right; } } diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl index 5468138..9675579 100644 --- a/ui/pages/tabs/storage.html.tmpl +++ b/ui/pages/tabs/storage.html.tmpl @@ -41,13 +41,13 @@ <div id='storageGrid' class="hidden"> <div> <span class="column-state"><span class="sr-only">$_("State")</span></span><!-- - --><span class="column-name">$_("Name")</span><!-- - --><span class="column-type">$_("Type")</span><!-- - --><span class="column-location">$_("Location")</span><!-- - --><span class="column-usage">$_("%Used")</span><!-- - --><span class="column-allocated">$_("Allocated")</span><!-- - --><span class="column-capacity">$_("Capacity")</span><!-- - --><span class="column-disks">$_("Disks")</span><!-- + --><span class="column-name" title="$_('Name')">$_("Name")</span><!-- + --><span class="column-type" title="$_('Type')">$_("Type")</span><!-- + --><span class="column-location" title="$_('Location')">$_("Location")</span><!-- + --><span class="column-usage" title="$_('%Used')">$_("%Used")</span><!-- + --><span class="column-allocated" title="$_('Allocated')">$_("Allocated")</span><!-- + --><span class="column-capacity" title="$_('Capacity')">$_("Capacity")</span><!-- + --><span class="column-disks" title="$_('Disks')">$_("Disks")</span><!-- --><span class="column-action" display="none"><span class="sr-only">$_("Actions")</span></span> </div> <div id="storagepoolsList" class="list-storage empty-when-logged-off"></div> @@ -87,8 +87,8 @@ <span class='column-state' val="{state}"><span class='storage-state {state}'><i class="fa fa-power-off"></i></span></span><!-- --><span class='column-name' title="{name}" val="{name}">{name}</span><!-- --><span class='column-type' val="{type}">{type}</span><!-- - --><span class='column-location' val="{path}">{path}</span><!-- - --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>%</span><!-- + --><span class='column-location' title="{path}" val="{path}">{path}</span><!-- + --><span class='column-usage {state}' val="{usage}" ><span class='usage-icon {icon}'>{usage}</span>$_("%")</span><!-- --><span class='column-allocated' val="{allocated}">{allocated}</span><!-- --><span class='column-capacity' val="{capacity}">{capacity}</span><!-- --><span class="column-disks {state}"><div class="handle arrow-down"></div></span><!-- @@ -108,7 +108,8 @@ <div class="volumes"> <div id="volume-{name}" class="volumeslist" data-name="{name}" data-type="{type}"> <div class="row"> - <div class="pull-left"> + <div class="col-sm-7"> + <div class="btn-group"> <div class="dropdown menu-flat pool-action"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="edit-alt"></span>$_("Actions")<span class="caret"></span></button> <ul class="dropdown-menu actionsheet"> @@ -119,14 +120,17 @@ <li class="disabled critical"><a href="#" class="volume-delete" data-name="{name}"><i class="fa fa-minus-circle"></i> $_("Delete")</a></li> </ul> </div> - <button type="button" class="btn btn-default toggle-gallery"><span class="text">$_('View Gallery')</span> <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></button> + </div> + <button type="button" class="btn btn-default toggle-gallery"><span class="text">$_('View Gallery')</span> <i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i><i class="fa fa-angle-right"></i></button> </div> + <div class="col-sm-5"> <div class="pull-right"> <label><span class="sr-only">$_('Filter:')</span> <input type="text" class="filter form-control search" placeholder="$_('Filter')"> </label> </div> </div> + </div> <div class="wok-datagrid wok-list"> <div class="wok-datagrid-header"> <span class="column-name">$_('Name')</span><!-- @@ -168,12 +172,12 @@ <input type="checkbox" class="wok-checkbox" name="selected-volume[]" id="{checkbox}" value="{name}"> <label class="volume-name volume-name-filter" for="{checkbox}"><span class="volume-inline-progress hidden"><span class="wok-loading-icon"></span></span> {name}</label><!-- --></span><!-- - --><span class="column-format volume-format-filter"><span class="gallery-header">$_('Format')</span><span class="format-text">{format}</span></span><!-- - --><span class="column-type volume-type-filter"><span class="gallery-header">$_('Type')</span>{type}</span><!-- + --><span class="column-format volume-format-filter"><span class="gallery-header" title="$_('Format')">$_('Format')</span><span class="format-text">{format}</span></span><!-- + --><span class="column-type volume-type-filter"><span class="gallery-header" title="$_('Type')">$_('Type')</span>{type}</span><!-- --><span class="column-used-by volume-used-by-filter"><i class="fa fa-exclamation-circle" data-toggle="tooltip" title="$_('Used by the following VMs:') {used_by_formatted}" data-placement="bottom" data-original-title="$_('Used by the following VMs:') {used_by_formatted}"></i><span class="format-text" data-toggle="tooltip" title="$_('Used by the following VMs:') {used_by_formatted}" data-placement="bottom" data-original-title="$_('Used by the following VMs:') {used_by_formatted}">{used_by_text}</span></span><!-- --><span class="column-used"><span role="presentation" class="volume-icon {capacityIcon}"></span> {capacityLevel}%</span><!-- - --><span class="column-allocated"><span class="gallery-header">$_('Allocation')</span>{allocation}</span><!-- - --><span class="column-capacity"><span class="gallery-header">$_('Capacity')</span>{capacity}</span><!-- + --><span class="column-allocated"><span class="gallery-header" title="$_('Allocation')">$_('Allocation')</span>{allocation}</span><!-- + --><span class="column-capacity"><span class="gallery-header" title="$_('Capacity')">$_('Capacity')</span>{capacity}</span><!-- --><span class="column-progress hidden"><span class="progress-status"></span> <span class="progress-transferred"></span> </span> </div> -- 2.1.0