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

[Hongliang Wang]

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 at linux.vnet.ibm.com>
---
 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