mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
UI for Advanced Search Popup
This commit is contained in:
NIKITA
parent
b0fb42460f
commit
207cee40a7
@ -1386,6 +1386,7 @@ a:visited {
|
|||||||
width:223px;
|
width:223px;
|
||||||
height:27px;
|
height:27px;
|
||||||
float:left;
|
float:left;
|
||||||
|
position:relative;
|
||||||
margin:0;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
background:url(../images/actionpanel_border.gif) no-repeat top right;
|
background:url(../images/actionpanel_border.gif) no-repeat top right;
|
||||||
@ -1460,6 +1461,174 @@ a:visited {
|
|||||||
padding:0;
|
padding:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.adv_searchpopup {
|
||||||
|
width:156px;
|
||||||
|
height:auto;
|
||||||
|
float:left;
|
||||||
|
position:absolute;
|
||||||
|
background:#fefae7 repeat top left;
|
||||||
|
border:1px solid #999;
|
||||||
|
top:5px;
|
||||||
|
left:8px;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
z-index:1005;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox {
|
||||||
|
width:140px;
|
||||||
|
height:auto;
|
||||||
|
float:left;
|
||||||
|
margin:0 0 10px 10px;
|
||||||
|
display:inline;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox a:link {
|
||||||
|
width:auto;
|
||||||
|
height:auto;
|
||||||
|
float:right;
|
||||||
|
text-align:left;
|
||||||
|
text-decoration:underline;
|
||||||
|
font-size:10px;
|
||||||
|
font-weight:normal;
|
||||||
|
color: #2c8bbc;
|
||||||
|
margin: 7px 5px 0 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox a:visited {
|
||||||
|
width:auto;
|
||||||
|
height:auto;
|
||||||
|
float:right;
|
||||||
|
text-align:left;
|
||||||
|
text-decoration:underline;
|
||||||
|
font-size:10px;
|
||||||
|
font-weight:normal;
|
||||||
|
color: #2c8bbc;
|
||||||
|
margin: 7px 5px 0 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.adv_searchformbox a:hover {
|
||||||
|
width:auto;
|
||||||
|
height:auto;
|
||||||
|
float:right;
|
||||||
|
text-align:left;
|
||||||
|
text-decoration:none;
|
||||||
|
font-size:10px;
|
||||||
|
font-weight:normal;
|
||||||
|
color: #2c8bbc;
|
||||||
|
margin: 7px 5px 0 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox h3 {
|
||||||
|
width:auto;
|
||||||
|
height:auto;
|
||||||
|
color:#2d6487;
|
||||||
|
font-size:11px;
|
||||||
|
font-weight:bold;
|
||||||
|
float:left;
|
||||||
|
margin:8px 0 7px 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox ol {
|
||||||
|
width: auto;
|
||||||
|
color:#333;
|
||||||
|
float:left;
|
||||||
|
font-family:Arial, Helvetica, sans-serif;
|
||||||
|
font-size:11px;
|
||||||
|
list-style:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox li {
|
||||||
|
width:140px;
|
||||||
|
float:left;
|
||||||
|
clear:left;
|
||||||
|
font-family:Arial, Helvetica, sans-serif;
|
||||||
|
color:#333;
|
||||||
|
font-weight:normal;
|
||||||
|
margin:0 0 7px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox label {
|
||||||
|
width:45px;
|
||||||
|
float:left;
|
||||||
|
clear:left;
|
||||||
|
font-family:Arial, Helvetica, sans-serif;
|
||||||
|
color:#333;
|
||||||
|
font-size:10px;
|
||||||
|
font-weight:normal;
|
||||||
|
margin:2px 5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox .text {
|
||||||
|
background-color: #FFF;
|
||||||
|
font: normal 11px Arial, Helvetica, sans-serif;
|
||||||
|
float:left;
|
||||||
|
border: 1px solid #CCC;
|
||||||
|
height: 13px;
|
||||||
|
width: 80px;
|
||||||
|
color:#666;
|
||||||
|
margin:0;
|
||||||
|
padding:1px 0 0 2px;
|
||||||
|
font-weight:normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchformbox .select {
|
||||||
|
background-color: #FFF;
|
||||||
|
font: normal 11px Arial, Helvetica, sans-serif;
|
||||||
|
float:left;
|
||||||
|
border: 1px solid #CCC;
|
||||||
|
height: 17px;
|
||||||
|
width: 83px;
|
||||||
|
margin:0;
|
||||||
|
padding:1px 0 0 2px;
|
||||||
|
color:#666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.adv_search_actionbox {
|
||||||
|
width:140px;
|
||||||
|
height:20px;
|
||||||
|
float:left;
|
||||||
|
margin:5px 0 0 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.adv_searchpopup_button {
|
||||||
|
width:49px;
|
||||||
|
height:16px;
|
||||||
|
float:left;
|
||||||
|
background:url(../images/adv_searchbutton.gif) no-repeat top left;
|
||||||
|
margin:0 5px 0 0;
|
||||||
|
display:inline;
|
||||||
|
padding:0;
|
||||||
|
cursor:pointer;
|
||||||
|
cursor:hand;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv_searchpopup_button:hover {
|
||||||
|
background:url(../images/adv_searchbutton_hover.gif) no-repeat top left;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.search_button {
|
||||||
|
width:26px;
|
||||||
|
height:25px;
|
||||||
|
float:left;
|
||||||
|
margin-left:10px;
|
||||||
|
display:inline;
|
||||||
|
text-decoration:none;
|
||||||
|
background:url(../images/searchicon_button.jpg) no-repeat top left;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
a:hover.search_button {
|
||||||
|
background:url(../images/searchicon_button_hover.jpg) no-repeat top left;
|
||||||
|
}
|
||||||
|
|
||||||
.actionpanel_button_wrapper{
|
.actionpanel_button_wrapper{
|
||||||
width:auto;
|
width:auto;
|
||||||
height:27px;
|
height:27px;
|
||||||
|
|||||||
BIN
ui/new/images/adv_searchbutton.gif
Normal file
BIN
ui/new/images/adv_searchbutton.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
BIN
ui/new/images/adv_searchbutton_hover.gif
Normal file
BIN
ui/new/images/adv_searchbutton_hover.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
@ -89,16 +89,61 @@ long milliseconds = new Date().getTime();
|
|||||||
<li>
|
<li>
|
||||||
<div class="search_textbg">
|
<div class="search_textbg">
|
||||||
<input class="text" type="text" name="search_input" />
|
<input class="text" type="text" name="search_input" />
|
||||||
<div class="search_closebutton" style="display:none;"></div>
|
<div class="search_closebutton" style="display:block;"></div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</form>
|
</form>
|
||||||
<a href="#">Advanced</a>
|
<a href="#">Advanced</a>
|
||||||
|
<div class="adv_searchpopup" id="action_menu" style="display: none;">
|
||||||
|
<div class="adv_searchformbox">
|
||||||
|
<h3>
|
||||||
|
Advance Search</h3>
|
||||||
|
<a id="advanced_search_close" href="#">Close </a>
|
||||||
|
<form action="#"method="post">
|
||||||
|
<ol style="margin-top:8px;">
|
||||||
|
<li>
|
||||||
|
<label for="filter">
|
||||||
|
Name:</label>
|
||||||
|
<input class="text" type="text" name="adv_search_name" id="adv_search_name" />
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label for="filter">
|
||||||
|
Status:</label>
|
||||||
|
<select class="select" id="adv_search_state">
|
||||||
|
<option value=""></option>
|
||||||
|
<option value="Creating">Creating</option>
|
||||||
|
<option value="Starting">Starting</option>
|
||||||
|
<option value="Running">Running</option>
|
||||||
|
<option value="Stopping">Stopping</option>
|
||||||
|
<option value="Stopped">Stopped</option>
|
||||||
|
<option value="Destroyed">Destroyed</option>
|
||||||
|
<option value="Expunging">Expunging</option>
|
||||||
|
<option value="Migrating">Migrating</option>
|
||||||
|
<option value="Error">Error</option>
|
||||||
|
<option value="Unknown">Unknown</option>
|
||||||
|
</select>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label for="filter">
|
||||||
|
Zone:</label>
|
||||||
|
<select class="select" id="adv_search_zone">
|
||||||
|
</select>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ol>
|
||||||
|
</form>
|
||||||
|
<div class="adv_search_actionbox">
|
||||||
|
<div class="adv_searchpopup_button" id="adv_search_button">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="actionpanel_button_wrapper" id="midmenu_action_link" style="position: relative;
|
<div class="actionpanel_button_wrapper" id="midmenu_action_link" style="position: relative;
|
||||||
display: none">
|
display: none">
|
||||||
<div class="actionpanel_button">
|
<div class="actionpanel_button">
|
||||||
<div class="actionpanel_button_icons">
|
<div class="actionpanel_button_icons">
|
||||||
<img src="images/actions_actionicon.png" alt="Add" /></div>
|
<img src="images/actions_actionicon.png" alt="Add" /></div>
|
||||||
<div class="actionpanel_button_links">
|
<div class="actionpanel_button_links">
|
||||||
@ -108,6 +153,7 @@ long milliseconds = new Date().getTime();
|
|||||||
</div>
|
</div>
|
||||||
<div class="actionsdropdown_box" id="action_menu" style="display: none;">
|
<div class="actionsdropdown_box" id="action_menu" style="display: none;">
|
||||||
<ul class="actionsdropdown_boxlist" id="action_list">
|
<ul class="actionsdropdown_boxlist" id="action_list">
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user