UI for Grid actions like save and cancel

This commit is contained in:
NIKITA 2010-09-15 11:15:33 -07:00
parent 952ee0bfed
commit f5365da384
4 changed files with 235 additions and 202 deletions

View File

@ -1381,6 +1381,7 @@ a:visited {
padding:0;
}
.searchpanel {
width:223px;
height:27px;
@ -2179,6 +2180,34 @@ a:visited {
padding:0 0 0 0;
}
.grid_botactionpanel {
width:100%;
height:23px;
float:left;
margin:15px 0 0 0;
padding:0 0 0 0;
}
.gridbot_buttons {
width:64px;
height:17px;
float:left;
color:#FFF;
background:url(../images/gridbot_actionbutton.gif) no-repeat top left;
text-align:center;
font-weight:normal;
font-size:12px;
margin:0 10px 0 0;
padding:4px 0 0 0;
cursor:pointer;
cursor:hand;
}
.gridbot_buttons:hover {
background:url(../images/gridbot_actionbutton_hover.gif) no-repeat top left;
}
.grid_actionbox {
width:35px;
height:17px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 547 B

View File

@ -1,202 +1,206 @@
<%@ page import="java.util.*" %>
<%@ page import="com.cloud.utils.*" %>
<%
Locale browserLocale = request.getLocale();
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
%>
<!-- template detail panel (begin) -->
<div class="main_title" id="right_panel_header">
<div class="main_titleicon">
<img src="images/title_templatesicon.gif" alt="Instance" /></div>
<h1>
Template
</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="volume_action_link">
<div class="grid_actionsdropdown_box" id="volume_action_menu" 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" id="edit_icon">
</div>
<div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
display: none;">
<div class="gridheader_loader" id="Div1">
</div>
<p id="description">
Detaching Disk &hellip;</p>
</div>
<div class="gridheader_message" id="action_message_box" style="border: 1px solid #999; display: none;">
<p id="description"></p>
<div class="close_button" id="close_button">
</div>
</div>
</div>
<div class="grid_container">
<div class="grid_rows even">
<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 odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Zone")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="zonename">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Name")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="name">
</div>
<input class="text" id="name_edit" style="width: 200px; display: none;" type="text" />
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Display.Text")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="displaytext">
</div>
<input class="text" id="displaytext_edit" style="width: 200px; display: none;" type="text" />
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Status")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="status">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Password.Enabled")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="passwordenabled">
<div id="icon">
</div>
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Public")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="ispublic">
<div id="icon">
</div>
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Featured")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="isfeatured">
<div id="icon">
</div>
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Cross.Zones")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="crossZones">
<div id="icon">
</div>
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("OS.Type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="ostypename">
</div>
</div>
</div>
<div class="grid_rows even">
<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>
<select class="select" style="width: 202px; display: none;">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Created")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="created">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Size")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="size">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- template detail panel (end) -->
<%@ page import="java.util.*" %>
<%@ page import="com.cloud.utils.*" %>
<%
Locale browserLocale = request.getLocale();
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
%>
<!-- template detail panel (begin) -->
<div class="main_title" id="right_panel_header">
<div class="main_titleicon">
<img src="images/title_templatesicon.gif" alt="Instance" /></div>
<h1>
Template
</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="volume_action_link">
<div class="grid_actionsdropdown_box" id="volume_action_menu" 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" id="edit_icon">
</div>
<div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
display: none;">
<div class="gridheader_loader" id="Div1">
</div>
<p id="description">
Detaching Disk &hellip;</p>
</div>
<div class="gridheader_message" id="action_message_box" style="border: 1px solid #999; display: none;">
<p id="description"></p>
<div class="close_button" id="close_button">
</div>
</div>
</div>
<div class="grid_container">
<div class="grid_rows even">
<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 odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Zone")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="zonename">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Name")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="name">
</div>
<input class="text" id="name_edit" style="width: 200px; display: none;" type="text" />
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Display.Text")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="displaytext">
</div>
<input class="text" id="displaytext_edit" style="width: 200px; display: none;" type="text" />
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Status")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="status">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Password.Enabled")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="passwordenabled">
<div id="icon">
</div>
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Public")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="ispublic">
<div id="icon">
</div>
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Featured")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="isfeatured">
<div id="icon">
</div>
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Cross.Zones")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="crossZones">
<div id="icon">
</div>
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("OS.Type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="ostypename">
</div>
</div>
</div>
<div class="grid_rows even">
<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>
<select class="select" style="width: 202px; display: none;">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Created")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="created">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Size")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="size">
</div>
</div>
</div>
</div>
<div class="grid_botactionpanel" style="display:none;">
<div class="gridbot_buttons">Save</div>
<div class="gridbot_buttons">Cancel</div>
</div>
</div>
</div>
<!-- template detail panel (end) -->