New UI for Zone wizard

This commit is contained in:
NIKITA 2010-11-09 17:55:16 -08:00
parent ea00c6c349
commit ad71a0f2f5
7 changed files with 421 additions and 71 deletions

View File

@ -4305,7 +4305,7 @@ a:hover.search_button {
.zonepopup_container {
width:500px;
height:505px;
height:342px;
float:left;
position:absolute;
top:200px;
@ -4319,7 +4319,7 @@ a:hover.search_button {
width:500px;
height:30px;
float:left;
background:url(../images/vmpopup_top.png) no-repeat top left;
background:url(../images/zonepopup_top.png) no-repeat top left;
margin:0;
padding:0;
overflow:hidden;
@ -4338,8 +4338,8 @@ a:hover.search_button {
}
.zonepopup_maincontentarea {
width:500px;
height:340px;
width:460px;
height:270px;
float:left;
margin:20px 0 0 19px;
display:inline;
@ -4347,7 +4347,7 @@ a:hover.search_button {
}
.zonepopup_titlebox {
width:500px;
width:450px;
height:auto;
float:left;
margin:0;
@ -4379,15 +4379,15 @@ a:hover.search_button {
}
.zonepopup_contentpanel {
width:500px;
height:240px;
width:460px;
height:225px;
float:left;
margin:15px 0 0 0;
margin:8px 0 0 0;
padding:0;
}
.zonepopup_contentpanel h3 {
width:500px;
width:420px;
height:auto;
color:#003a52;
font-size:12px;
@ -4398,22 +4398,195 @@ a:hover.search_button {
.zonepopup_container_mid {
width:500px;
height:260px;
height:340px;
float:left;
background:url(../images/vmpopup_mid.gif) repeat-y top left;
background:url(../images/zonepopup_mid.gif) repeat-y top left;
margin:0;
padding:0;
}
.zonepopup_navigationpanel {
width:460px;
height:29px;
float:left;
margin:15px 0 0 0;
padding:0;
}
.zonepopup_selectionpanel{
width:450px;
height:220px;
float:left;
margin:0 0 0 0;
padding:0;
overflow-y:scroll;
overflow-y:auto;
overflow-x:hidden;
}
.zonepopup_selectionbox {
width:440px;
height:auto;
float:left;
border:1px solid #c0c0c0;
background:#efefef url(../images/offeringbox_bg.gif) repeat-x top left;
margin:7px 0 0 0;
padding:0 0 5px 0;
}
.zonepopup_selectionbox .radio {
width:13px;
height:13px;
float:left;
margin:5px 0 0 10px;
display:inline;
padding:0;
}
.zonepopup_selectionbox .text {
width:80px;
height:15px;
float:left;
color:#333;
font-size:11px;
font-weight:normal;
background:#FFF;
border:1px solid #999;
margin:4px 0 0 8px;
display:inline;
padding:0;
}
.zonepopup_selectionbox .error_text {
width:80px;
height:15px;
float:left;
color:#333;
font-size:11px;
font-weight:normal;
background:#ffe5e5;
border:1px solid #999;
margin:4px 0 0 8px;
display:inline;
padding:0;
}
.zonepopup_selectionbox .label {
width:auto;
height:13px;
float:left;
color:#333;
font-size:12px;
font-weight:bold;
margin:5px 0 0 10px;
display:inline;
padding:0;
}
.zonepopup_selectionbox .label1 {
width:auto;
height:auto;
float:left;
color:#333;
font-size:11px;
font-weight:normal;
margin:8px 0 0 10px;
display:inline;
padding:0;
}
.zonepopup_selectionbox span {
width:auto;
height:auto;
float:left;
color:#666;
font-size:10px;
font-weight:normal;
margin:7px 0 0 3px;
display:inline;
padding:0;
}
.zonepopup_selectiondescriptionbox {
width:380px;
height:auto;
float:left;
margin:2px 0 0 35px;
padding:0;
}
.zonepopup_selectiondescriptionbox_top {
width:380px;
height:5px;
float:left;
background:url(../images/offeringbox_destop.gif) no-repeat top left;
margin:0 0 0 0;
padding:0;
}
.zonepopup_selectiondescriptionbox_bot {
width:380px;
height:auto;
float:left;
background:#FFF repeat top left;
border-left:1px solid #d7d7d7;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
margin:0;
padding:0 0 3px 0;
}
.zonepopup_selectiondescriptionbox_bot p {
width:360px;
height:auto;
float:left;
color:#666;
text-align:left;
font-size:11px;
font-weight:normal;
margin:5px 0 0 10px;
display:inline;
padding:0;
}
.zonepopup_container_bot {
width:500px;
height:12px;
float:left;
background:url(../images/vmpopup_bot.png) no-repeat top left;
background:url(../images/zonepopup_bot.png) no-repeat top left;
margin:0;
padding:0;
}
.zonepoup_formcontent{ width:auto; height:auto; float:left; margin-top:10px; padding:0; color:#FFF; font-size:11px; margin-left:0; display:inline;}
.zonepoup_formcontent ol { width:auto; height:auto; color:#333; float:left; font-family:Arial, Helvetica, sans-serif; font-size:11px; list-style:none; margin:0; padding:0;}
.zonepoup_formcontent li { width:auto; height:auto; float:left; padding-bottom: 4px; color:#FFF; font-size:12px; font-weight:normal; text-align:left; margin:0 0 0 0;}
.zonepoup_formcontent label { width:100px; float:left; text-align:left; font-weight:bold; margin:0px 15px 5px 5px; color:#333; font-size:11px; font-weight:normal;}
.zonepoup_formcontent p{ width:auto; float:left; text-align:left; font-weight:bold; margin:0; color:#333; font-size:11px; font-weight:normal;}
.zonepoup_formcontent .radio { width:15px; height:15px; float:left; margin:0 10px 0 0; padding:0;}
.zonepoup_formcontent .checkbox { width:12px; height:12px; float:left; margin:0 10px 0 0; padding:0;}
.zonepoup_formcontent .text { background-color: #f4f2f2; font: normal 11px Arial, Helvetica, sans-serif; float:left; border: 1px solid #999; height: 16px; width: 200px; margin:0 5px 3px 0; padding:0; color:#666;}
.zonepoup_formcontent .text2 { background-color: #f4f2f2; font: normal 11px Arial, Helvetica, sans-serif; float:left; border: 1px solid #999; height: 14px; width: auto; margin:0 0 0 0; padding:0; color:#666;}
.zonepoup_formcontent .smalltext { background-color: #f4f2f2; font: normal 11px Arial, Helvetica, sans-serif; float:left; border: 1px solid #999; height: 14px; width: 90px; margin:0 5px 3px 0 padding:0; color:#666;}
.zonepoup_formcontent .error_smalltext { background-color: #fbabb3; font: normal 11px Arial, Helvetica, sans-serif; float:left; border: 1px solid #999; height: 14px; width: 90px; margin:0 5px 3px 0; padding:0; color:#666;}
.zonepoup_formcontent_errormsg {font: normal 10px Arial, Helvetica, sans-serif; float:left; height: auto; width: 160px; margin:0 10px 2px 110px; padding:0; color:#F00; display:inline;}
.zonepoup_formcontent_errormsg_long {font: normal 10px Arial, Helvetica, sans-serif; float:left; height: auto; width: 250px; margin:2px 10px 2px 0; padding:0; color:#F00; display:inline;}
.zonepoup_formcontent .select { background-color: #f4f2f2; font: normal 11px Arial, Helvetica, sans-serif; float:left; border: 1px solid #999; height: auto; min-width: 203px; padding:0; color:#666; margin:0 10px 3px 0;}
.zonepoup_formcontent .snapselect { background-color: #f4f2f2; font: normal 11px Arial, Helvetica, sans-serif; float:left; border: 1px solid #999; height: auto; width: 70px; padding:0; color:#666; margin:0 0 0 0;}
.zonepoup_formcontent .error_text { background-color: #fbabb3; font: normal 11px Arial, Helvetica, sans-serif; float:left; border: 1px solid #999; height: 14px; width: 200px; margin:0 10px 0 0; padding:0; color:#666;}
.zonepoup_formcontent .error_text2 { background-color: #fbabb3; font: normal 11px Arial, Helvetica, sans-serif; float:left; border: 1px solid #999; height: 14px; width: auto; margin:0 0 0 0; padding:0; color:#666;}
.zonepoup_formcontent .error_icon { width:15px; height:12px; float:left; background:url(images/alert_icon.png) no-repeat top left; margin:2px 0 0 3px; padding:0;}
.zonepoup_formcontent span {font-family:Arial, Helvetica, sans-serif; font-size:11px; text-align:left; color:#333; font-weight:normal; float:left; margin:0 5px 0 0; padding:0;}
.zonepoup_formcontent a { color:#2c8bbc; font-size:11px; font-weight:normal; text-align:left; text-decoration:underline; float:left; margin:0; padding:0;}
.zonepoup_formcontent a:link .dialog_formcontent a:visited { text-decoration:underline;}
.zonepoup_formcontent a:hover { text-decoration:none;}
.zonepoup_loadingbox {width:440px; height:auto; float:left; margin:55px 0 0 0; padding:0 0 10px 0; background:#FFF repeat top left; border:1px solid #CCC;}
.zonepoup_loader {width:16px; height:16px; float:left; background:url(../images/zone_popuploader.gif) no-repeat top left; margin:7px 0 0 7px; display:inline; padding:0;}
.zonepoup_loadingbox p {width: 400px; height:auto; float:left; font-size:12px; text-align:left; color:#333; font-weight:normal; margin:10px 0 0 10px; display:inline; padding:0;}
.zonepoup_msgbox {width:420px; height:auto; float:left; margin:55px 0 0 0; padding:10px; background:#fff4c1 repeat top left; border:1px solid #CCC; color:#333; font-size:12px; text-align:left; font-weight:normal;}
.zonepoup_msgbox.error { background:#ffe5e5 repeat top left; color:#ae0000; }
/* customized jquery css */
.ui-widget-header {
@ -4531,7 +4704,7 @@ a:hover.search_button {
.dialog_formcontent span {font-family:Arial, Helvetica, sans-serif; font-size:11px; text-align:left; color:#333; font-weight:normal; float:left; margin:0 5px 0 0; padding:0;}
.dialog_formcontent a { color:#2c8bbc; font-size:11px; font-weight:normal; text-align:left; text-decoration:underline; float:left; margin:0; padding:0;}
.dialog_formcontent a:link .dialog_formcontent a:visited { text-decoration:underline;}
dialog_formcontent a:hover { text-decoration:none;}
.dialog_formcontent a:hover { text-decoration:none;}
/* Snapshots in dialog
----------------------------------*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 847 B

BIN
ui/images/zonepopup_bot.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 B

BIN
ui/images/zonepopup_bot.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 572 B

BIN
ui/images/zonepopup_mid.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 B

BIN
ui/images/zonepopup_top.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 841 B

View File

@ -108,77 +108,46 @@
</div>
</div>
<div class="zonepopup_container_mid">
<div class="vmpopup_maincontentarea">
<div class="vmpopup_titlebox">
<div class="zonepopup_maincontentarea">
<div class="zonepopup_titlebox">
<h2>
Step 1: <strong>Select a Network</strong></h2>
<p>
Please select a template for your new virtual instance. You can also choose to select
a blank template from which an ISO image can be installed onto.
Please select a Network for your new zone.
</p>
</div>
<div class="vmpopup_contentpanel">
<div class="rev_tempsearchpanel">
<label for="wizard_zone">
Availability Zone:</label>
<select class="select" id="wizard_zone" name="zone">
</select>
<div class="rev_tempsearchbox">
<form method="post" action="#">
<ol>
<li>
<input id="search_input" class="text" type="text" name="search_input" />
</ol>
</form>
<div id="search_button" class="rev_searchbutton">
Search</div>
</div>
</div>
<div class="rev_wizformarea">
<div class="revwiz_message_container" style="display: none;" id="wiz_message">
<div class="revwiz_message_top">
<p id="wiz_message_text">
Please select a template or ISO to continue</p>
</div>
<div class="revwiz_message_bottom">
<div class="revwizcontinue_button" id="wiz_message_continue">
<div class="zonepopup_contentpanel">
<div class="zonepopup_selectionpanel">
<div class="zonepopup_selectionbox">
<input type="radio" name="radiogroup" class="radio" />
<label class="label">
Basic Mode</label>
<div class="zonepopup_selectiondescriptionbox">
<div class="zonepopup_selectiondescriptionbox_top">
</div>
<div class="zonepopup_selectiondescriptionbox_bot">
<p>
Some decription about Basic Mode will appear here.. Some decription about Basic Mode will appear here.. Some decription about Basic Mode will appear here.. Some decription about Basic Mode will appear here.. Some decription about Basic Mode will appear here.. Some decription about Basic Mode will appear here..</p>
</div>
</div>
</div>
<div class="rev_wizmid_tempbox">
<div class="revwiz_loadingbox" id="wiz_template_loading" style="display: none">
<div class="loading_gridanimation">
<div class="zonepopup_selectionbox">
<input type="radio" name="radiogroup" class="radio" />
<label class="label">
Advance Mode</label>
<div class="zonepopup_selectiondescriptionbox">
<div class="zonepopup_selectiondescriptionbox_top">
</div>
<p>
Loading...</p>
</div>
<div class="rev_wizmid_tempbox_left" id="wiz_template_filter">
<div class="rev_wizmid_selectedtempbut" id="wiz_featured">
Featured Template</div>
<div class="rev_wizmid_nonselectedtempbut" id="wiz_my">
My Template</div>
<div class="rev_wizmid_nonselectedtempbut" id="wiz_community">
Community Template</div>
<div class="rev_wizmid_nonselectedtempbut" id="wiz_blank">
Blank Template</div>
</div>
<div class="rev_wizmid_tempbox_right">
<div class="rev_wiztemplistpanel" id="template_container">
</div>
<div class="rev_wiztemplistactions">
<div class="rev_wiztemplist_actionsbox">
<a href="#" id="prev_page">Prev</a> <a href="#" id="next_page">Next</a>
</div>
<div class="zonepopup_selectiondescriptionbox_bot">
<p>
Some decription about Advance Mode will appear here.. Some decription about Advance Mode will appear here.. Some decription about Advance Mode will appear here.. Some decription about Advance Mode will appear here.. Some decription about Advance Mode will appear here.. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="vmpopup_navigationpanel">
<div class="zonepopup_navigationpanel">
<div class="vmpop_prevbutton" id="prev_step" style="display: none;">
</div>
<div class="vmpop_nextbutton" id="next_step">
@ -191,8 +160,216 @@
</div>
<div id="step2" style="display: none;">
<div class="zonepopup_container_top">
<div class="vmpopup_steps" style="background: url(images/step1_bg_unselected.png) no-repeat top left">
Step 1</div>
<div class="vmpopup_steps" style="color: #FFF; background: url(images/step2_selected.gif) no-repeat top left">
Step 2</div>
<div class="vmpopup_steps" style="background: url(images/step2_bg.gif) no-repeat top left">
Step 3</div>
<div class="vmpopup_steps" style="background: url(images/laststep_bg.gif) no-repeat top left">
</div>
<div class="vmpopup_container_closebutton" id="close_button">
</div>
</div>
<div class="zonepopup_container_mid">
<div class="zonepopup_maincontentarea">
<div class="zonepopup_titlebox">
<h2>
Step 2: <strong>Add a Zone</strong></h2>
<p>
Please enter the following info to add a new zone
</p>
</div>
<div class="zonepopup_contentpanel">
<div class="zonepoup_formcontent">
<form action="#" method="post" id="form_acquire">
<ol>
<li>
<label>Name:</label>
<input class="text" type="text" name="add_zone_name" id="add_zone_name"/>
<div id="add_zone_name_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label>DNS 1:</label>
<input class="text" type="text" name="add_zone_dns1" id="add_zone_dns1"/>
<div id="add_zone_dns1_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label>DNS 2:</label>
<input class="text" type="text" name="add_zone_dns2" id="add_zone_dns2"/>
<div id="add_zone_dns2_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label>Internal DNS 1:</label>
<input class="text" type="text" id="add_zone_internaldns1"/>
<div id="add_zone_internaldns1_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label>Internal DNS 2:</label>
<input class="text" type="text" id="add_zone_internaldns2"/>
<div id="add_zone_internaldns2_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li id="add_zone_container">
<label>Zone VLAN Range:</label>
<input class="text" style="width:92px" type="text" name="add_zone_startvlan" id="add_zone_startvlan"/><span>-</span>
<input class="text" style="width:92px" type="text" name="add_zone_endvlan" id="add_zone_endvlan"/>
<div id="add_zone_startvlan_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
<div id="add_zone_endvlan_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label for="add_zone_guestcidraddress">Guest CIDR:</label>
<input class="text" type="text" id="add_zone_guestcidraddress" value="10.1.1.0/24"/>
<div id="add_zone_guestcidraddress_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
</li>
<li>
<label>Public?:</label>
<select class="select" id="add_zone_public">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</li>
<li id="domain_dropdown_container" style="display:none">
<label>Domain:</label>
<select class="select" id="domain_dropdown">
</select>
</li>
</ol>
</form>
</div>
</div>
<div class="zonepopup_navigationpanel">
<div class="vmpop_prevbutton" id="prev_step" style="display: block;">
Back
</div>
<div class="vmpop_nextbutton" id="next_step">
Go to Step 3</div>
</div>
</div>
</div>
<div class="zonepopup_container_bot">
</div>
</div>
<div id="step3" style="display: none;">
<div class="zonepopup_container_top">
<div class="vmpopup_steps" style="background: url(images/step1_bg_unselected.png) no-repeat top left">
Step 1</div>
<div class="vmpopup_steps" style="background: url(images/othersteps_bg.gif) no-repeat top left">
Step 2</div>
<div class="vmpopup_steps" style="color: #FFF; background: url(images/step2_selected.gif) no-repeat top left">
Step 3</div>
<div class="vmpopup_steps" style="background: url(images/laststep_slectedbg.gif) no-repeat top left">
</div>
<div class="vmpopup_container_closebutton" id="close_button">
</div>
</div>
<div class="zonepopup_container_mid">
<div class="zonepopup_maincontentarea">
<div class="zonepopup_titlebox">
<h2>
Step 3: <strong>Add a Pod</strong></h2>
<p>
Please enter the following info to add a new pod
</p>
</div>
<div class="zonepopup_contentpanel">
<div class="zonepoup_formcontent">
<form action="#" method="post" id="form_acquire">
<ol>
<li>
<label for="user_name" style="width: 115px;">
Name:</label>
<input class="text" type="text" name="add_pod_name" id="add_pod_name" />
<div id="add_pod_name_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li>
<label for="add_pod_gateway" style="width: 115px;">
Gateway:</label>
<input class="text" type="text" id="add_pod_gateway" />
<div id="add_pod_gateway_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li>
<label for="user_name" style="width: 115px;">
CIDR:</label>
<input class="text" type="text" name="add_pod_cidr" id="add_pod_cidr" />
<div id="add_pod_cidr_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
<li>
<label for="user_name" style="width: 115px;">
Private IP Range:</label>
<input class="text" style="width: 92px" type="text" name="add_pod_startip" id="add_pod_startip" /><span>-</span>
<input class="text" style="width: 92px" type="text" name="add_pod_endip" id="add_pod_endip" />
<div id="add_pod_startip_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
<div id="add_pod_endip_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
</div>
</li>
</ol>
</form>
</div>
</div>
<div class="zonepopup_navigationpanel">
<div class="vmpop_prevbutton" id="prev_step" style="display: block;">
Back
</div>
<div class="vmpop_nextbutton" id="next_step">
Submit</div>
</div>
</div>
</div>
<div class="zonepopup_container_bot">
</div>
</div>
<div id="step4" style="display: none;">
<div class="zonepopup_container_top">
<div class="vmpopup_steps" style="background: url(images/step1_bg_unselected.png) no-repeat top left">
Step 1</div>
<div class="vmpopup_steps" style="background: url(images/othersteps_bg.gif) no-repeat top left">
Step 2</div>
<div class="vmpopup_steps" style="color: #FFF; background: url(images/step2_selected.gif) no-repeat top left">
Step 3</div>
<div class="vmpopup_steps" style="background: url(images/laststep_slectedbg.gif) no-repeat top left">
</div>
<div class="vmpopup_container_closebutton" id="close_button">
</div>
</div>
<div class="zonepopup_container_mid">
<div class="zonepopup_maincontentarea">
<div class="zonepopup_contentpanel">
<div class="zonepoup_loadingbox" style="display:none;">
<div class="zonepoup_loader"></div>
<p> Adding Zone to Physical Resources</p>
</div>
<div class="zonepoup_msgbox"> Confirmation msg will appear here</div>
</div>
<div class="zonepopup_navigationpanel">
<div class="vmpop_prevbutton" id="prev_step" style="display: block;">
Cancel
</div>
<div class="vmpop_nextbutton" id="next_step">
OK</div>
</div>
</div>
</div>
<div class="zonepopup_container_bot">
</div>
</div>
</div>
<!-- Zone wizard (end)-->