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

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(a)linux.vnet.ibm.com&gt; --- 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))