[Kimchi-devel] [PATCH] [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
Signed-off-by: Hongliang Wang <hlwang(a)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