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 Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/grid.css | 3 +++ ui/js/src/kimchi.grid.js | 6 ++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css index 761d32f..44ae614 100644 --- a/ui/css/theme-default/grid.css +++ b/ui/css/theme-default/grid.css @@ -214,10 +214,12 @@ } .grid-mask { + background: rgba(190, 190, 190, .9); bottom: 0; left: 0; position: absolute; right: 0; + z-index: 5; } .grid-loading { @@ -225,6 +227,7 @@ height: 68px; left: 0; margin: auto; + position: absolute; right: 0; text-align: center; top: 0; diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js index c53e584..7360b36 100644 --- a/ui/js/src/kimchi.grid.js +++ b/ui/js/src/kimchi.grid.js @@ -54,10 +54,12 @@ kimchi.widget.Grid = function(params) { '<div class="grid-resizer hidden"></div>', '</div>', '<div class="grid-footer"></div>', - '<div class="grid-mask">', + '<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>' -- 1.8.1.4