From 2185adc08694485df901909d5491c2b32bca075f Mon Sep 17 00:00:00 2001
From: NIKITA <nikita@cloud.com>
Date: Thu, 14 Oct 2010 14:42:08 -0700
Subject: [PATCH] New Loader for mid menu and Action for Account tab

---
 ui/new/css/main.css    |  38 +++-
 ui/new/jsp/account.jsp | 386 +++++++++++++++++++++--------------------
 2 files changed, 231 insertions(+), 193 deletions(-)

diff --git a/ui/new/css/main.css b/ui/new/css/main.css
index e420d7f9b9d..67c7369c0b3 100644
--- a/ui/new/css/main.css
+++ b/ui/new/css/main.css
@@ -1845,6 +1845,7 @@ a:hover.search_button {
 	min-height:1000px;
 	height:auto;
 	float:left;
+	position:relative;
 	background:#f0f0f0 repeat top left;
 	border-right:1px solid #aeb9c5;
 	margin:27px 0 0 -100%;
@@ -1852,6 +1853,39 @@ a:hover.search_button {
 	padding:0;
 }
 
+.midmenu_mainloaderbox {
+	width:auto;
+	height:auto;
+	position:absolute;
+	top:100px;
+	left:40px;
+	background:#FFF;
+	border:1px solid #CCC;
+	margin:0;
+	padding:0;
+}
+
+.midmenu_mainloaderbox p{
+	width:auto;
+	height:auto;
+	float:left;
+	color:#333;
+	font-size:16px;
+	font-weight:normal;
+	margin:15px 10px 0 10px;
+	display:inline;
+	padding:0;
+}
+.midmenu_mainloader_animatedicon {
+	width:40px;
+	height:40px;
+	float:left;
+	background:url(../images/big_loading.gif) no-repeat top left;
+	margin:3px 0 0 5px;
+	display:inline;
+	padding:0;
+}
+
 .midmenu_box {
 	width:220px;
 	height:800px;
@@ -2548,7 +2582,7 @@ a:hover.search_button {
 	width:67px;
 	height:16px;
 	float:right;
-	background:url(../images/grid_actions.png) no-repeat top left;
+	background:url(../images/grid_actions.gif) no-repeat top left;
 	margin:1px 0x 0 0;
 	padding:0;
 	cursor:pointer;
@@ -2556,7 +2590,7 @@ a:hover.search_button {
 }
 
 .grid_actionbox:hover {
-	background:url(../images/grid_actions_hover.png) no-repeat top left;
+	background:url(../images/grid_actions_hover.gif) no-repeat top left;
 }
 
 .gridheader_loaderbox {
diff --git a/ui/new/jsp/account.jsp b/ui/new/jsp/account.jsp
index 637e80637f5..6d3ed4d3765 100644
--- a/ui/new/jsp/account.jsp
+++ b/ui/new/jsp/account.jsp
@@ -1,192 +1,196 @@
-<%@ page import="java.util.*" %>
-
-<%@ page import="com.cloud.utils.*" %>
-
-<%
-    Locale browserLocale = request.getLocale();
-    CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
-%>
-<!-- account detail panel (begin) -->
-<div class="main_title" id="right_panel_header">
-    <div class="main_titleicon">
-        <img src="images/title_accountsicon.gif" alt="Accounts" /></div>
-    <h1>
-        Accounts</h1>
-</div>
-<div class="contentbox" id="right_panel_content">
-    <div class="info_detailbox errorbox" id="after_action_info_container" style="display: none">
-        <p id="after_action_info">
-        </p>
-    </div>
-    <div class="tabbox" style="margin-top: 15px;">
-        <div class="content_tabs on">
-            <%=t.t("Details")%></div>
-    </div> 
-    <div id="tab_content_details">
-        <div class="grid_actionpanel">
-            <div class="grid_actionbox" id="action_link">
-                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-                    <ul class="actionsdropdown_boxlist" id="action_list">
-                        <li><%=t.t("no.available.actions")%></li>
-                    </ul>
-                </div>
-            </div>           
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="icon">
-                </div>
-                <p id="description">
-                    Detaching Disk &hellip;</p>
-            </div>                 
-        </div>
-        <div class="grid_container">
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("ID")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="id">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows even">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Role")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="role">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Account")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="account">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows even">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Domain")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="domain">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("VMs")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="vm_total">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows even">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("IPs")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="ip_total">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Bytes.Received")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="bytes_received">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows even">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("Bytes.Sent")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="bytes_sent">
-                    </div>
-                </div>
-            </div>
-            <div class="grid_rows odd">
-                <div class="grid_row_cell" style="width: 20%;">
-                    <div class="row_celltitles">
-                        <%=t.t("State")%>:</div>
-                </div>
-                <div class="grid_row_cell" style="width: 79%;">
-                    <div class="row_celltitles" id="state">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<!-- account detail panel (end) -->
-
-
-<div id="dialog_resource_limits" title="Resource Limits" style="display:none">
-	<p>
-	    <%=t.t("please.specify.limits.to.the.various.resources.-1.means.the.resource.has.no.limits")%>	    
-	</p>
-	<div class="dialog_formcontent">
-		<form action="#" method="post" id="form_acquire">
-			<ol>
-				<li>
-					<label><%=t.t("instance.limit")%>:</label>
-					<input class="text" type="text" name="limits_vm" id="limits_vm" value="-1" />
-					<div id="limits_vm_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
-				</li>
-				<li>
-					<label><%=t.t("public.ip.limit")%>:</label>
-					<input class="text" type="text" name="limits_ip" id="limits_ip" value="-1" />
-					<div id="limits_ip_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
-				</li>
-				<li>
-					<label><%=t.t("disk.volume.limit")%>:</label>
-					<input class="text" type="text" name="limits_volume" id="limits_volume" value="-1" />
-					<div id="limits_volume_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
-				</li>
-				<li>
-					<label><%=t.t("snapshot.limit")%>:</label>
-					<input class="text" type="text" name="limits_snapshot" id="limits_snapshot" value="-1" />
-					<div id="limits_snapshot_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
-				</li>
-				<li>
-					<label><%=t.t("template.limit")%>:</label>
-					<input class="text" type="text" name="limits_template" id="limits_template" value="-1" />
-					<div id="limits_template_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
-				</li>
-			</ol>
-		</form>
-	</div>
-</div>
-
-<div id="dialog_disable_account" title="Disable account" style="display:none">
-    <p>
-        <%=t.t("please.confirm.you.want.to.disable.account.that.will.prevent.account.access.to.the.cloud.and.shut.down.all.existing.virtual.machines")%>        
-    </p>
-</div>
-
-<div id="dialog_lock_account" title="Lock account" style="display:none">
-    <p>
-        <%=t.t("please.confirm.you.want.to.lock.account.that.will.prevent.account.access.to.the.cloud")%>        
-    </p>
-</div>
-
-<div id="dialog_enable_account" title="Enable account" style="display:none">
-    <p>
-        <%=t.t("please.confirm.you.want.to.enable.account")%>        
-    </p>
+<%@ page import="java.util.*" %>
+
+<%@ page import="com.cloud.utils.*" %>
+
+<%
+    Locale browserLocale = request.getLocale();
+    CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
+%>
+<!-- account detail panel (begin) -->
+<div class="main_title" id="right_panel_header">
+    <div class="main_titleicon">
+        <img src="images/title_accountsicon.gif" alt="Accounts" /></div>
+    <h1>
+        Accounts</h1>
+</div>
+<div class="contentbox" id="right_panel_content">
+    <div class="info_detailbox errorbox" id="after_action_info_container" style="display: none">
+        <p id="after_action_info">
+        </p>
+    </div>
+    <div class="tabbox" style="margin-top: 15px;">
+        <div class="content_tabs on">
+            <%=t.t("Details")%></div>
+    </div> 
+    <div id="tab_content_details">
+        <div class="grid_actionpanel">
+                       
+            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                <div class="gridheader_loader" id="icon">
+                </div>
+                <p id="description">
+                    Detaching Disk &hellip;</p>
+            </div>                 
+        </div>
+        <div class="grid_container">
+        	<div class="grid_header">
+            	<div id="title" class="grid_header_title">TItle Name</div>
+                <div id="action_link" class="grid_actionbox" id="volume_action_link">
+                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                        <ul class="actionsdropdown_boxlist" id="action_list">
+                        	<li><%=t.t("no.available.actions")%></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows odd">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("ID")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="id">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows even">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Role")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="role">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows odd">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Account")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="account">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows even">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Domain")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="domain">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows odd">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("VMs")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="vm_total">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows even">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("IPs")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="ip_total">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows odd">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Bytes.Received")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="bytes_received">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows even">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Bytes.Sent")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="bytes_sent">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows odd">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("State")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="state">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- account detail panel (end) -->
+
+
+<div id="dialog_resource_limits" title="Resource Limits" style="display:none">
+	<p>
+	    <%=t.t("please.specify.limits.to.the.various.resources.-1.means.the.resource.has.no.limits")%>	    
+	</p>
+	<div class="dialog_formcontent">
+		<form action="#" method="post" id="form_acquire">
+			<ol>
+				<li>
+					<label><%=t.t("instance.limit")%>:</label>
+					<input class="text" type="text" name="limits_vm" id="limits_vm" value="-1" />
+					<div id="limits_vm_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
+				</li>
+				<li>
+					<label><%=t.t("public.ip.limit")%>:</label>
+					<input class="text" type="text" name="limits_ip" id="limits_ip" value="-1" />
+					<div id="limits_ip_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
+				</li>
+				<li>
+					<label><%=t.t("disk.volume.limit")%>:</label>
+					<input class="text" type="text" name="limits_volume" id="limits_volume" value="-1" />
+					<div id="limits_volume_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
+				</li>
+				<li>
+					<label><%=t.t("snapshot.limit")%>:</label>
+					<input class="text" type="text" name="limits_snapshot" id="limits_snapshot" value="-1" />
+					<div id="limits_snapshot_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
+				</li>
+				<li>
+					<label><%=t.t("template.limit")%>:</label>
+					<input class="text" type="text" name="limits_template" id="limits_template" value="-1" />
+					<div id="limits_template_errormsg" class="dialog_formcontent_errormsg" style="display:none;"></div> 
+				</li>
+			</ol>
+		</form>
+	</div>
+</div>
+
+<div id="dialog_disable_account" title="Disable account" style="display:none">
+    <p>
+        <%=t.t("please.confirm.you.want.to.disable.account.that.will.prevent.account.access.to.the.cloud.and.shut.down.all.existing.virtual.machines")%>        
+    </p>
+</div>
+
+<div id="dialog_lock_account" title="Lock account" style="display:none">
+    <p>
+        <%=t.t("please.confirm.you.want.to.lock.account.that.will.prevent.account.access.to.the.cloud")%>        
+    </p>
+</div>
+
+<div id="dialog_enable_account" title="Enable account" style="display:none">
+    <p>
+        <%=t.t("please.confirm.you.want.to.enable.account")%>        
+    </p>
 </div>
\ No newline at end of file