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 Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/a8c11f11 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/a8c11f11 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/a8c11f11 Branch: refs/heads/junit-tests Commit: a8c11f117f72f1cf9f555d1b84a3386392315aa2 Parents: 88a777f Author: Brian Federle <[email protected]> Authored: Thu Oct 11 12:13:30 2012 -0700 Committer: Chip Childers <[email protected]> Committed: Mon Oct 15 16:19:15 2012 -0400 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 117 +++++++++++++++++++++++++++++++- ui/scripts/ui/widgets/listView.js | 78 +++++++++++++++------ 2 files changed, 171 insertions(+), 24 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/a8c11f11/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 8ad9538..c822ce0 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -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; http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/a8c11f11/ui/scripts/ui/widgets/listView.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js index 0be908a..726a8a2 100644 --- a/ui/scripts/ui/widgets/listView.js +++ b/ui/scripts/ui/widgets/listView.js @@ -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; });
