mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-02 20:02:29 +01:00
Style advanced search
-Convert advanced search to a drop-down that overlaps the standard search when visible -Add new arrow icon to show advanced search popup
This commit is contained in:
Brian Federle
parent
2c2afda062
commit
44996d4611
@ -1,3 +1,4 @@
|
||||
/*[fmt]1C20-1C0D-E*/
|
||||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
@ -16,7 +17,6 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
/*[fmt]1C20-1C0D-E*/
|
||||
/*+clearfix {*/
|
||||
div.toolbar:after,
|
||||
.multi-wizard .progress ul li:after,
|
||||
@ -2543,6 +2543,7 @@ div.toolbar div.filters select {
|
||||
|
||||
div.toolbar div.text-search {
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.toolbar div.text-search div.search-bar {
|
||||
@ -2677,6 +2678,120 @@ div.toolbar div.button.add span {
|
||||
border-right: 1px solid #43586B;
|
||||
}
|
||||
|
||||
/*** Advanced search*/
|
||||
#advanced_search {
|
||||
width: 15px;
|
||||
position: absolute;
|
||||
left: 139px;
|
||||
top: 4px;
|
||||
z-index: 4;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#advanced_search .icon {
|
||||
/*+opacity:56%;*/
|
||||
filter: alpha(opacity=56);
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56);
|
||||
-moz-opacity: 0.56;
|
||||
opacity: 0.56;
|
||||
background: url(../images/sprites.png) no-repeat -62px -162px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -1px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#advanced_search:hover .icon {
|
||||
/*+opacity:100%;*/
|
||||
filter: alpha(opacity=100);
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#advanced_search .form-container {
|
||||
/*+opacity:91%;*/
|
||||
filter: alpha(opacity=91);
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=91);
|
||||
-moz-opacity: 0.91;
|
||||
opacity: 0.91;
|
||||
/*+box-shadow:0px 5px 9px #B6B0B0;*/
|
||||
-moz-box-shadow: 0px 5px 9px #B6B0B0;
|
||||
-webkit-box-shadow: 0px 5px 9px #B6B0B0;
|
||||
-o-box-shadow: 0px 5px 9px #B6B0B0;
|
||||
box-shadow: 0px 5px 9px #B6B0B0;
|
||||
border: 1px solid #808080;
|
||||
/*+border-radius:0 0 4px 4px;*/
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-khtml-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
left: -290px;
|
||||
top: 2px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background: #FFFFFF;
|
||||
padding: 18px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#advanced_search .form-container .name {
|
||||
width: 66px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#advanced_search .form-container .value {
|
||||
width: 186px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#advanced_search .form-container .form-item {
|
||||
width: 268px;
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#advanced_search .form-container .form-item input,
|
||||
#advanced_search .form-container .form-item select {
|
||||
width: 97%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#advanced_search input[type=submit] {
|
||||
background: url(../images/bg-gradients.png) 0px -220px;
|
||||
/*+box-shadow:0px 2px 5px #858585;*/
|
||||
-moz-box-shadow: 0px 2px 5px #858585;
|
||||
-webkit-box-shadow: 0px 2px 5px #858585;
|
||||
-o-box-shadow: 0px 2px 5px #858585;
|
||||
box-shadow: 0px 2px 5px #858585;
|
||||
border: 1px solid #606060;
|
||||
border-top: none;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
/*+text-shadow:0px 1px 1px #000000;*/
|
||||
-moz-text-shadow: 0px 1px 1px #000000;
|
||||
-webkit-text-shadow: 0px 1px 1px #000000;
|
||||
-o-text-shadow: 0px 1px 1px #000000;
|
||||
text-shadow: 0px 1px 1px #000000;
|
||||
/*+border-radius:4px;*/
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
#advanced_search input[type=submit]:hover {
|
||||
/*+box-shadow:inset 0px 2px 3px #000000;*/
|
||||
-moz-box-shadow: inset 0px 2px 3px #000000;
|
||||
-webkit-box-shadow: inset 0px 2px 3px #000000;
|
||||
-o-box-shadow: inset 0px 2px 3px #000000;
|
||||
box-shadow: inset 0px 2px 3px #000000;
|
||||
}
|
||||
|
||||
/*** Panel controls*/
|
||||
#browser div.panel div.toolbar div.panel-controls {
|
||||
float: right;
|
||||
|
||||
@ -666,26 +666,26 @@
|
||||
var createFilters = function($toolbar, filters) {
|
||||
if (!filters) return false;
|
||||
|
||||
var $filters = $('<div></div>').addClass('filters reduced-hide');
|
||||
$filters.append($('<label>').html(_l('label.filterBy')));
|
||||
var $filters = $('<div></div>').addClass('filters reduced-hide');
|
||||
$filters.append($('<label>').html(_l('label.filterBy')));
|
||||
|
||||
var $filterSelect = $('<select id="filterBy"></select>').appendTo($filters);
|
||||
var $filterSelect = $('<select id="filterBy"></select>').appendTo($filters);
|
||||
|
||||
if (filters)
|
||||
$.each(filters, function(key) {
|
||||
if(this.preFilter != null && this.preFilter() == false) {
|
||||
return true; //skip to next item in each loop
|
||||
}
|
||||
var $option = $('<option>').attr({
|
||||
value: key
|
||||
}).html(_l(this.label));
|
||||
if (filters)
|
||||
$.each(filters, function(key) {
|
||||
if(this.preFilter != null && this.preFilter() == false) {
|
||||
return true; //skip to next item in each loop
|
||||
}
|
||||
var $option = $('<option>').attr({
|
||||
value: key
|
||||
}).html(_l(this.label));
|
||||
|
||||
$option.appendTo($filterSelect);
|
||||
$option.appendTo($filterSelect);
|
||||
|
||||
return true;
|
||||
});
|
||||
return true;
|
||||
});
|
||||
|
||||
return $filters.appendTo($toolbar);
|
||||
return $filters.appendTo($toolbar);
|
||||
};
|
||||
|
||||
var createSearchBar = function($toolbar, listViewData) {
|
||||
@ -693,12 +693,19 @@
|
||||
var $searchBar = $('<div></div>').addClass('search-bar reduced hide').appendTo($search);
|
||||
$searchBar.append('<input type="text" />');
|
||||
$search.append('<div id="basic_search" class="button search"></div>');
|
||||
|
||||
if(listViewData.advSearchFields != null)
|
||||
$search.append('<div id="advanced_search" class="button search"></div>');
|
||||
|
||||
|
||||
if (listViewData.advSearchFields != null) {
|
||||
$search.append(
|
||||
$('<div>').attr({
|
||||
id: 'advanced_search'
|
||||
})
|
||||
.addClass('button search')
|
||||
.append($('<div>').addClass('icon'))
|
||||
);
|
||||
}
|
||||
|
||||
return $search.appendTo($toolbar);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Makes set of icons from data, in the for of a table cell
|
||||
@ -1527,9 +1534,20 @@
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$listView.find('.button.search#advanced_search').bind('click', function(event) {
|
||||
cloudStack.dialog.createForm({
|
||||
|
||||
var closeAdvancedSearch = function() {
|
||||
$('#advanced_search .form-container:visible').remove();
|
||||
};
|
||||
|
||||
$listView.find('.button.search#advanced_search .icon').bind('click', function(event) {
|
||||
if ($('#advanced_search .form-container:visible').size()) {
|
||||
closeAdvancedSearch();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
var form = cloudStack.dialog.createForm({
|
||||
noDialog: true,
|
||||
form: {
|
||||
title: 'Advanced Search',
|
||||
fields: listViewData.advSearchFields
|
||||
@ -1537,8 +1555,22 @@
|
||||
after: function(args) {
|
||||
advancedSearch(args);
|
||||
$listView.find('.button.search#basic_search').siblings('.search-bar').find('input').val(''); //clear basic search input field to avoid confusion of search result
|
||||
closeAdvancedSearch();
|
||||
}
|
||||
});
|
||||
var $formContainer = form.$formContainer;
|
||||
var $form = $formContainer.find('form');
|
||||
|
||||
$formContainer.hide().appendTo('#advanced_search').show();
|
||||
$form.find('.form-item:first input').focus();
|
||||
$form.find('input[type=submit]')
|
||||
.show()
|
||||
.appendTo($form)
|
||||
.val('Search');
|
||||
|
||||
$form.submit(function() {
|
||||
form.completeAction($formContainer);
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user