From e851353ebe4ccd9ff214f95f6eb135b6631c2b8c Mon Sep 17 00:00:00 2001
From: NIKITA <nikita@cloud.com>
Date: Fri, 15 Oct 2010 13:14:55 -0700
Subject: [PATCH] Loader for left menu

---
 ui/new/css/main.css               |  37 ++++++++++++++++++++++++++++--
 ui/new/images/leftmenu_loader.gif | Bin 0 -> 847 bytes
 ui/new/index.jsp                  |  28 +++++++++++++++++-----
 3 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 ui/new/images/leftmenu_loader.gif

diff --git a/ui/new/css/main.css b/ui/new/css/main.css
index 67c7369c0b3..4da2f36d7e9 100644
--- a/ui/new/css/main.css
+++ b/ui/new/css/main.css
@@ -1129,7 +1129,7 @@ a:visited {
 
 
 
-#header {
+#main_header {
 	min-width:960px;
 	width:100%;
 	height:44px;
@@ -1276,7 +1276,8 @@ a:visited {
 .leftmenu_expandedlist{
 	width:100%;
 	height:auto;
-	float:left; 
+	float:left;
+	position:relative;
 	margin:0;
 	padding:0;
 }
@@ -1313,6 +1314,38 @@ a:visited {
 }
 */
 
+
+.leftmenu_loadingbox {
+	width:100%;
+	height:auto;
+	position:absolute;
+	background:#fdecbc repeat top left;
+	margin:0;
+	padding:0;
+}
+
+.leftmenu_loadingbox p{
+	width:auto;
+	height:auto;
+	float:left;
+	color:#333;
+	font-size:11px;
+	font-weight:bold;
+	text-align:left;
+	margin:1px 0 0 10px;
+	display:inline;
+	padding:3px 0;
+}
+
+.leftmenu_loader {
+	width:16px;
+	height:16px;
+	float:left;
+	background:url(../images/leftmenu_loader.gif) no-repeat top left;
+	margin:2px 0 0 5px;
+	display:inline;
+}
+
 .white_openedarrow {
 	width:5px;
 	height:10px;
diff --git a/ui/new/images/leftmenu_loader.gif b/ui/new/images/leftmenu_loader.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a8c4760bdb7768a33f4d991f8a94e65bfde0a336
GIT binary patch
literal 847
zcmZ?wbhEHb6krfw_`<;O_st$-W8)vscf>^p%$`(fW@Z}T=YIFxvK?!Cot^9^bQCq$
zWWKnucJ;!R3y0=rr$v?(BruQy6#sMkxrPKgI|jHK=@~FH0`)5XlX5OfO)N=GQ7F$W
z$xuklO03AqPfXFv%uCB>Q2fcl$puuU1F{9=NCwsb1%<wp%y~-<L~<0hS`t>Rogs2;
zqLgXF2ez9X4bi<UHcXkV0TTsU89Q4S^{vs=Y4D8tu}CH9!!D0W6D(R*n5xNEbed)>
z*a(Y!s+2wYzTXL(B^e3|UGA59GPI<QK3K8BLB+N9z=4C;jxurdOle5X5E0@zctF8H
zkjv*l!-wQR_hu%iEl;-vn9fkJS!EiU61YwKh0?yo=~E0=h^<?+u-`FT;JmUU1Gi0p
zxdFQkCrg6?UnHA_7B6SJvLZIi6M#Nc{yahBmWYQI*O34bPTeK#hVP9VxvZQ|8+vc?
zXlZ)L=Ak!3<>tmp1`dIJ7tgTX$l}&(40mz3!xzc0$iRbBtX0RL&*=(RU$%hPv$s5<
z_NL{`EHx_GyfK>mJl$9=4T1z~gTfRhLy@BnE1I3<*w%<2%kFNP!>H)=B*C7caXZt#
z3CgZb7FAAx5e><^a~G9y3n?vBczI}XLSsT3Z>ZZc$)Y=wd`k;nYkp4q-+<K`kl%o@
zx59zP)llHjNr~K8iQ_vZJbEs)-Oykc=wdNpQh2VRBeBd)G0}q|B6tQzW3K6vt&B-7
z9$VNLR_#no(&6e;Z747nOFp8!LH!5s8zpuVGxGp7tqA=Fjh<c=td_<@E%g9;jANOD
z3B#dH#~hVBCvt3<wJ?FhF0Yl<(?F#|qF2t_d=syS4*S7Q-I8Xlre;?u5rHL#buT8Y
p=twxg^i#mFlS5*|bccREXY&jWeM6Qs))>w19yLV<Yf$n80{}|#1YrOG

literal 0
HcmV?d00001

diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index 112dce1c8ca..b3e69fd3fa3 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -79,7 +79,7 @@ long milliseconds = new Date().getTime();
     <div id="overlay_black" style="display: none">
     </div>
     <div id="main">
-        <div id="header">
+        <div id="main_header">
             <div class="header_left">
                 <div class="logo">
                 </div>
@@ -582,10 +582,10 @@ long milliseconds = new Date().getTime();
                                 </div>
                             </div>
                         </div>
-                        <div class="leftmenu_expandedlist">
-                            <div class="leftmenu_content" id="leftmenu_zone_tree">
-                            </div>
-                        </div>                                             
+                        
+                        <div id="leftmenu_zone_tree">
+                        </div>
+                                                                    
                         <div class="leftmenu_expandedlist">
                             <div class="leftmenu_content" style="border-bottom: 1px dashed b4c8d6;" id="leftmenu_service_offering">
                                 <div class="leftmenu_secondindent">
@@ -699,6 +699,10 @@ long milliseconds = new Date().getTime();
         <%=t.t("no.available.actions")%></li>
      
      <div class="leftmenu_expandedlist" id="leftmenu_zone_node_template" style="display:none">
+     	<div class="leftmenu_loadingbox" style="display:none;">
+        	<div class="leftmenu_loader"></div>
+            <p> Adding Zone &hellip; </p>
+        </div>
         <div class="leftmenu_content selected" id="header">  
             <div class="leftmenu_thirdindent">
                 <div class="leftmenu_arrows expanded_close" id="arrowIcon">
@@ -708,9 +712,13 @@ long milliseconds = new Date().getTime();
                 Zone: <strong><span id="zone_name"></span></strong>
             </div>  
         </div>
-        <div id="zone_container"></div>
+		<div id="zone_container"></div>
     </div>
     <div class="leftmenu_expandedlist" id="leftmenu_pod_node_template" style="display:none">
+    	<div class="leftmenu_loadingbox" style="display:none;">
+        	<div class="leftmenu_loader"></div>
+            <p> Adding Pod &hellip; </p>
+        </div>
         <div class="leftmenu_content selected" id="header">
             <div class="leftmenu_fourthindent">
                 <div class="leftmenu_arrows expanded_close" id="arrowIcon">
@@ -724,6 +732,10 @@ long milliseconds = new Date().getTime();
     </div>
     
     <div class="leftmenu_expandedlist" id="leftmenu_cluster_node_template" style="display:none">
+    	<div class="leftmenu_loadingbox" style="display:none;">
+        	<div class="leftmenu_loader"></div>
+            <p> Adding Cluster &hellip; </p>
+        </div>
         <div class="leftmenu_content selected" id="header">
             <div class="leftmenu_fifthindent">
                 <div class="leftmenu_arrows expanded_close" id="arrowIcon">
@@ -737,6 +749,10 @@ long milliseconds = new Date().getTime();
     </div> 
     
     <div class="leftmenu_expandedlist" id="leftmenu_systemvm_node_template" style="display:none">
+    	<div class="leftmenu_loadingbox" style="display:none;">
+        	<div class="leftmenu_loader"></div>
+            <p> Adding Sytem VM &hellip; </p>
+        </div>
         <div class="leftmenu_content selected" id="header">
             <div class="leftmenu_fourthindent">
                 <div class="leftmenu_arrows expanded_close" id="arrowIcon">