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

[Adam King]

Mask should also cover the toolbar when opaque.


On 03/13/2014 01:08 AM, 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
>
> 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      |  4 +++-
>   2 files changed, 10 insertions(+), 7 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 2e3d0ed..7360b36 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>'


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