[Kimchi-devel] [PATCH v3] [UI] Grid Loading Mask - Some Elements are Missing

[Adam King]

Reviewed-by: Adam King <rak at linux.vnet.ibm.com>


On 03/13/2014 11:23 PM, Hongliang Wang wrote:
> Some elements were lost and add them back here:
> 1) Show a message under the icon
> 2) Put the icon and text in the center both horizontally and vertically
> 3) Give the mask a opacity value
> 4) Hide the mask initially
>
> v2 -> v3:
>    3a) Put toolbar under mask
>        (Adam King's comment)
>
> v1 -> v2:
>    2a) Rebased.
>
> Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/grid.css | 13 +++++++------
>   ui/js/src/kimchi.grid.js      |  6 ++++--
>   2 files changed, 11 insertions(+), 8 deletions(-)
>
> diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css
> index 958bdb0..44ae614 100644
> --- a/ui/css/theme-default/grid.css
> +++ b/ui/css/theme-default/grid.css
> @@ -214,27 +214,28 @@
>   }
>
>   .grid-mask {
> +    background: rgba(190, 190, 190, .9);
>       bottom: 0;
>       left: 0;
>       position: absolute;
>       right: 0;
> -    top: 48px;
> +    z-index: 5;
>   }
>
>   .grid-loading {
>       bottom: 0;
> -    height: 100%;
> +    height: 68px;
>       left: 0;
>       margin: auto;
> +    position: absolute;
>       right: 0;
>       text-align: center;
>       top: 0;
> -    width: 100%;
> +    width: 49px;
>   }
>
>   .grid-loading-icon {
>       background: url("../images/theme-default/kimchi-loading.gif") no-repeat left top;
> -    height: 100%;
> -    width: 100%;
> -    background-position: center;
> +    height: 48px;
> +    width: 49px;
>   }
> diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js
> index e5892ff..540f1ba 100644
> --- a/ui/js/src/kimchi.grid.js
> +++ b/ui/js/src/kimchi.grid.js
> @@ -57,7 +57,9 @@ kimchi.widget.Grid = function(params) {
>           '<div class="grid-mask hidden">',
>               '<div class="grid-loading">',
>                   '<div class="grid-loading-icon"></div>',
> -                '<div class="grid-loading-text"></div>',
> +                '<div class="grid-loading-text">',
> +                    i18n['KCHGRD6001M'],
> +                '</div>',
>               '</div>',
>           '</div>',
>         '</div>'
> @@ -157,7 +159,7 @@ kimchi.widget.Grid = function(params) {
>       gridContentNode.css('top', (captionHeight + toolbarHeight) + 'px');
>
>       var maskNode = $('.grid-mask', gridNode);
> -    maskNode.css('top', (captionHeight + toolbarHeight) + 'px');
> +    maskNode.css('top', captionHeight + 'px');
>
>       var fillBody = function(container, fields, data) {
>           var tbody = ($('tbody', container).length && $('tbody', container))


-- 
Adam King <rak at linux.vnet.ibm.com>
IBM CSI