[PATCH] [UI] Grid Enhancement - Show Message when Loading Data - Kimchi-devel

12 Mar 2014

Sometimes when we draw a grid, the data is not ready and it's a time-consuming
task for back-end, so the user will expect that the grid is drawn there, and a
"loading" message is on top of the grid while loading data.

  In this patch, we make this enhancement. Meanwhile, we introduce a "loading"
icon which is made based-on Kimchi logo.

Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com>
---
 ui/css/theme-default/grid.css              |  24 +++++++++++++++++++++++
 ui/images/theme-default/kimchi-loading.gif | Bin 0 -> 6181 bytes
 ui/js/src/kimchi.grid.js                   |  30 ++++++++++++++++++++++++++++-
 ui/pages/i18n.html.tmpl                    |   2 ++
 4 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 ui/images/theme-default/kimchi-loading.gif

diff --git a/ui/css/theme-default/grid.css b/ui/css/theme-default/grid.css
index 9f8f98e..761d32f 100644
--- a/ui/css/theme-default/grid.css
+++ b/ui/css/theme-default/grid.css
@@ -212,3 +212,27 @@
     width: 0;
     z-index: 4;
 }
+
+.grid-mask {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
+.grid-loading {
+    bottom: 0;
+    height: 68px;
+    left: 0;
+    margin: auto;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: 49px;
+}
+
+.grid-loading-icon {
+    background: url("../images/theme-default/kimchi-loading.gif") no-repeat left top;
+    height: 48px;
+    width: 49px;
+}
diff --git a/ui/images/theme-default/kimchi-loading.gif b/ui/images/theme-default/kimchi-loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..af92bfdc0a44170c71fb7406d2c6bc359e176e91
GIT binary patch
literal 6181
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
VeND9!UFjIxpWWs~tzJ(W{~z1)DdhkF

literal 0
HcmV?d00001

diff --git a/ui/js/src/kimchi.grid.js b/ui/js/src/kimchi.grid.js
index 20cacc5..b6f6afb 100644
--- a/ui/js/src/kimchi.grid.js
+++ b/ui/js/src/kimchi.grid.js
@@ -54,6 +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-loading">',
+                '<div class="grid-loading-icon"></div>',
+                '<div class="grid-loading-text"></div>',
+            '</div>',
+        '</div>',
       '</div>'
     ];
 
@@ -150,6 +156,9 @@ kimchi.widget.Grid = function(params) {
     var toolbarHeight = toolbarNode && $(toolbarNode).height() || 0;
     gridContentNode.css('top', (captionHeight + toolbarHeight) + 'px');
 
+    var maskNode = $('.grid-mask', gridNode);
+    maskNode.css('top', (captionHeight + toolbarHeight) + 'px');
+
     var fillBody = function(container, fields, data) {
         var tbody = ($('tbody', container).length && $('tbody', container))
             || $('<tbody></tbody>').appendTo(container);
@@ -263,7 +272,6 @@ kimchi.widget.Grid = function(params) {
         setBodyListeners();
     };
 
-    this.setData(params['data']);
     this.getSelected = function() {
         return selectedIndex >= 0
             ? this.data[selectedIndex]
@@ -374,4 +382,24 @@ kimchi.widget.Grid = function(params) {
         $('body').off('mousemove', positionResizer);
         $('body').off('mouseup', endResizing);
     };
+
+    var data = params['data'];
+    if(!data) {
+        return;
+    }
+
+    if($.isArray(data)) {
+        this.setData(data);
+        return;
+    }
+
+    if($.isFunction(data)) {
+        var self = this;
+        var loadData = data;
+        maskNode.removeClass('hidden');
+        loadData(function(data) {
+            self.setData(data);
+            maskNode.addClass('hidden');
+        });
+    }
 };
diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl
index ba3a407..1a3a6d2 100644
--- a/ui/pages/i18n.html.tmpl
+++ b/ui/pages/i18n.html.tmpl
@@ -59,6 +59,8 @@ var i18n = {
     'KCHAPI6005M': "$_("Create")",
     'KCHAPI6006M': "$_("Warning")",
 
+    'KCHGRD6001M': "$_("Loading...")",
+
     'KCHTMPL6001W': "$_("No iso found")",
 
     'KCHTMPL6002E': "$_("This is not a valid ISO file.")",
-- 
1.8.1.4

    

[PATCH] [UI] Grid Enhancement - Show Message when Loading Data

Hongliang Wang

Aline Manera

tags

participants (2)