UI for Grid info and error msgs

ui/new/css/main.css

@@ -232,7 +232,7 @@ a:visited {
 	width:420px;
 	height:auto;
 	float:left;
-	background:#ffe5e5 repeat top left;
+	background:#ffe5e5 url(../images/errormsg_bg.gif) repeat-x top left;
 	border:1px solid #CCC;
 	margin:7px 0 0 0;
 	padding:0 0 5px 0;
@@ -2131,7 +2131,7 @@ a:visited {
 	width:100%;
 	height:auto;
 	float:left;
-	background:#fffbe6 repeat top left;
+	background:#fffbe6 url(../images/infomsg_bg.gif) repeat-x top left;
 	border:1px dashed #CCC;
 	color:#333;
 	margin:0 0 0 0;
@@ -2149,7 +2149,7 @@ a:visited {
 }
 
 .info_detailbox.errorbox {
-	background:#ffe5e5 repeat top left;
+	background:#ffe5e5 url(../images/errormsg_bg.gif) repeat-x top left;
 	color:#a90000;
 }
 
@@ -2215,8 +2215,7 @@ a:visited {
 	position:absolute;
 	background:#99b2c3 url(../images/gridheader_loadingbg.gif) repeat-x top left;
 	border-left:1px solid #999;
-	margin:0px 0 0 0;
+	padding:2px 5px 0 0;
-	padding:0;
 	z-index:1001;
 	right:0;
 }
@@ -2243,6 +2242,68 @@ a:visited {
 	padding:0;
 }
 
+.gridheader_message {
+	width:auto;
+	height:20px;
+	float:right;
+	position:absolute;
+	border-left:1px solid #999;
+	background:#fffbe6 url(../images/infomsg_bg.gif) repeat-x top left;
+	margin:0px 0 0 0;
+	padding:0 5px 0 0;
+	z-index:1005;
+	right:0;
+}
+
+.gridheader_message p {
+	width:auto;
+	height:auto;
+	float:left;
+	color:#333;
+	font-size:11px;
+	font-size:11px;
+	font-weight:bold;
+	margin:2px 0 0 5px;
+	display:inline;
+	padding:0;
+}
+
+
+.gridheader_message.error { 
+	background:#ffe5e5 url(../images/errormsg_bg.gif) repeat-x top left;
+}
+
+.gridheader_message.error p{
+	width:auto;
+	height:auto;
+	float:left;
+	color:#ae0000;
+	font-size:11px;
+	font-size:11px;
+	font-weight:bold;
+	margin:2px 0 0 5px;
+	display:inline;
+	padding:0;
+}
+
+.close_button {
+	width:38px;
+	height:17px;
+	float:left;
+	background:url(../images/close_button.png) no-repeat top left;
+	display:inline;
+	padding:0;
+	cursor:pointer;
+	cursor:hand;
+	margin:1px 0 0 5px;
+	padding:0;
+	
+}
+
+.close_button:hover{
+	background:url(../images/close_button_hover.png) no-repeat top left;
+}
+
 .grid_editbox {
 	width:27px;
 	height:17px;
@@ -2311,5 +2372,6 @@ a:visited {
 	top:17px;
 	right:6px;
 	margin:0;
-	padding:0
+	padding:0;
+	z-index:1002;
 }

ui/new/jsp/account.jsp

@@ -29,14 +29,28 @@
     </div>
     <div class="grid_actionpanel">
     	<div class="grid_actionbox">
-        	<div class="grid_actionsdropdown_box">
+        	<div class="grid_actionsdropdown_box" style="display:none;">
                 	<ul class="actionsdropdown_boxlist" id="action_list">
                     	<li> <a href="#"> Delete </a> </li>
                         <li> <a href="#"> Attach Disk </a> </li>
                     </ul>
             </div>
         </div>   
-        <div class="grid_editbox"></div>    
+        <div class="grid_editbox"></div>
+        <div class="gridheader_loaderbox" style="border:1px solid #999; display:none;">
+        	<div class="gridheader_loader"></div>
+            <p>Dettaching Disk &hellip;</p>
+        </div>
+        
+        <div class="gridheader_message" style="border:1px solid #999; display:block;">
+            <p>Disk has been succesfully dettached &hellip;</p>
+            <div class="close_button"></div>
+        </div>  
+        
+        <div class="gridheader_message error" style="border:1px solid #999; display:none;">
+            <p>Some problem occured while dettaching disk &hellip;</p>
+            <div class="close_button"></div>
+        </div>  
     </div>
     <div class="grid_container">
         <div class="grid_rows odd">