[Kimchi-devel] [PATCH v3] [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

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))
-- 
1.8.1.4