[Kimchi-devel] [PATCH v2] [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
v1 -> v2:
2a) Rebased.
Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/grid.css | 13 +++++++------
ui/js/src/kimchi.grid.js | 4 +++-
2 files changed, 10 insertions(+), 7 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 2e3d0ed..7360b36 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>'
--
1.8.1.4