Advanced search: Merge due to recent sourceforge crash.

SVN:trunk[5645]

application/itopwebpage.class.inc.php

@@ -795,8 +795,6 @@ EOF
 		$('table.listResults').each( function() { FixTableSorter($(this)); } );
 		
 		$('.multiselect').multiselect($sJSMultiselectOptions);
-
-		FixSearchFormsDisposition();
 EOF
 		);
 

css/css-variables.scss

@@ -44,6 +44,10 @@ $search-criteria-box-radius: 1px;
 $search-add-criteria-box-color: $search-criteria-box-color;
 $search-add-criteria-box-bg-color: $white;
 $search-add-criteria-box-hover-color: $gray-extra-light;
+//
+$search-button-box-color: $combodo-orange;
+$search-button-box-bg-color: $white;
+$search-button-box-bg-hover-color: $gray-extra-light;
 
 // Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0
 $version: "v2.5.0";

css/light-grey.css

@@ -721,7 +721,7 @@ input.dp-applied {
   font-size: 12px;
   text-align: initial;
   /* To compensate .search_box:text-align */
-  border: 1px solid #3f7294;
+  border: 1px solid #1c94c4;
   /* Sizing reset */
   /* Hyperlink reset */
   /* Input reset */
@@ -740,6 +740,9 @@ input.dp-applied {
 .search_form_handler:not(.closed) .sf_title .sft_short {
   display: none;
 }
+.search_form_handler:not(.closed) .sf_title .sft_hint, .search_form_handler:not(.closed) .sf_title .sft_toggler {
+  margin-top: 4px;
+}
 .search_form_handler:not(.closed) .sf_title .sft_toggler {
   transform: rotateX(180deg);
   transition: transform 0.5s linear;
@@ -765,9 +768,11 @@ input.dp-applied {
 .search_form_handler.closed .sf_title .sft_long {
   display: none;
 }
-.search_form_handler.closed .sf_title .sft_refresh {
+.search_form_handler.closed .sf_title .sft_hint {
+  display: none;
+}
+.search_form_handler:not(.no_auto_submit) .sft_hint {
   display: none;
-  line-height: 10pt;
 }
 .search_form_handler:not(.no_auto_submit) .sfc_fg_apply {
   display: none;
@@ -780,27 +785,19 @@ input.dp-applied {
   padding: 8px 10px;
   margin: 0;
   color: #fff;
-  background-color: #3f7294;
+  background-color: #1c94c4;
   cursor: pointer;
-  /* Pictogram */
 }
-.search_form_handler .sf_title .sft_picto {
+.search_form_handler .sf_title .sft_hint {
-  display: none;
+  font-size: 8pt;
-  /* TODO: Remove this class and the correspondig DOM element if this option is kept. */
+  font-style: italic;
-  margin-right: 10px;
-}
-.search_form_handler .sf_title .sft_refresh, .search_form_handler .sf_title .sft_toggler {
-  transition: color 0.2s ease-in-out, transform 0.4s ease-in-out;
-}
-.search_form_handler .sf_title .sft_refresh:hover, .search_form_handler .sf_title .sft_toggler:hover {
-  color: #f1f1f1;
-}
-.search_form_handler .sf_title .sft_refresh {
-  font-size: 10pt;
-  line-height: 13pt;
 }
 .search_form_handler .sf_title .sft_toggler {
   margin-left: 0.7em;
+  transition: color 0.2s ease-in-out, transform 0.4s ease-in-out;
+}
+.search_form_handler .sf_title .sft_toggler:hover {
+  color: #f1f1f1;
 }
 .search_form_handler .sf_message {
   display: none;
@@ -815,31 +812,62 @@ input.dp-applied {
   /* Common style between criterion and more criterion */
   /* Criteria tags */
   /* More criterion */
+  /* Misc. buttons */
 }
-.search_form_handler .sf_criterion_area .search_form_criteria, .search_form_handler .sf_criterion_area .sf_more_criterion {
+.search_form_handler .sf_criterion_area .sf_criterion_row {
+  position: relative;
+}
+.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child) {
+  margin-top: 20px;
+}
+.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: -12px;
+  left: 0px;
+  width: 100%;
+  border-top: 1px solid #ccc;
+}
+.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child)::after {
+  content: "or";
+  /* TODO: Make this into a dict entry */
+  position: absolute;
+  top: -20px;
+  left: 8px;
+  padding-left: 5px;
+  padding-right: 5px;
+  color: #808080;
+  background-color: #fff;
+  /* Must match .sf_criterion_area:background-color */
+}
+.search_form_handler .sf_criterion_area .sf_criterion_row .sf_criterion_group {
+  display: inline;
+}
+.search_form_handler .sf_criterion_area .search_form_criteria, .search_form_handler .sf_criterion_area .sf_more_criterion, .search_form_handler .sf_criterion_area .sf_button {
   position: relative;
   display: inline-block;
+  margin-right: 10px;
   margin-bottom: 5px;
   vertical-align: top;
 }
-.search_form_handler .sf_criterion_area .search_form_criteria.opened, .search_form_handler .sf_criterion_area .sf_more_criterion.opened {
+.search_form_handler .sf_criterion_area .search_form_criteria.opened, .search_form_handler .sf_criterion_area .sf_more_criterion.opened, .search_form_handler .sf_criterion_area .sf_button.opened {
   margin-bottom: 0px;
   /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
 }
-.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfc_header, .search_form_handler .sf_criterion_area .search_form_criteria.opened .sfm_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_header {
+.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfc_header, .search_form_handler .sf_criterion_area .sf_button.opened .sfc_header, .search_form_handler .sf_criterion_area .search_form_criteria.opened .sfm_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_header, .search_form_handler .sf_criterion_area .sf_button.opened .sfm_header {
   border-bottom: none !important;
   box-shadow: none !important;
   padding-bottom: 13px;
   /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */
 }
-.search_form_handler .sf_criterion_area .search_form_criteria > *, .search_form_handler .sf_criterion_area .sf_more_criterion > * {
+.search_form_handler .sf_criterion_area .search_form_criteria > *, .search_form_handler .sf_criterion_area .sf_more_criterion > *, .search_form_handler .sf_criterion_area .sf_button > * {
   padding: 7px 8px;
   vertical-align: top;
   border: 1px solid #ccc;
   border-radius: 1px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group, .search_form_handler .sf_criterion_area .sf_more_criterion .sfc_form_group, .search_form_handler .sf_criterion_area .search_form_criteria .sfm_content, .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group, .search_form_handler .sf_criterion_area .sf_more_criterion .sfc_form_group, .search_form_handler .sf_criterion_area .sf_button .sfc_form_group, .search_form_handler .sf_criterion_area .search_form_criteria .sfm_content, .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content, .search_form_handler .sf_criterion_area .sf_button .sfm_content {
   position: absolute;
   z-index: -1;
   min-width: 100%;
@@ -847,10 +875,10 @@ input.dp-applied {
   margin-top: -1px;
 }
 .search_form_handler .sf_criterion_area .search_form_criteria {
-  margin-right: 30px;
   /* Non editable criteria */
   /* Draft criteria (modifications not applied) */
   /* Opened criteria (form group displayed) */
+  /* Add "and" on criterion but the one and submit button */
   /* Top left corner icons */
   /* Special criterion processing */
 }
@@ -881,6 +909,9 @@ input.dp-applied {
   left: auto;
   right: 0px;
 }
+.search_form_handler .sf_criterion_area .search_form_criteria:not(:last-of-type) {
+  margin-right: 30px;
+}
 .search_form_handler .sf_criterion_area .search_form_criteria:not(:last-of-type)::after {
   /* TODO: Find an elegant way to do this, without hardcoding the content (could be a <style> in the markup) and margin. Note, only a few languages (hawaiian and stuff like this have more than 4 letters in for "and" word. */
   content: "and";
@@ -922,7 +953,7 @@ input.dp-applied {
   text-overflow: ellipsis;
   cursor: pointer;
 }
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title .values {
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title .sfc_values {
   font-weight: bold;
 }
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group {
@@ -964,7 +995,7 @@ input.dp-applied {
   margin-right: 8px;
 }
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items_wrapper {
-  max-height: 445px;
+  max-height: 415px;
   /* Must be less than .sfc_form_group:max-height - .sfc_opc_mc_toggler:height - .sfc_opc_mc_filter:height */
   overflow-y: auto;
   margin: 0px -8px;
@@ -1102,9 +1133,6 @@ input.dp-applied {
 .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time button.ui-datepicker-trigger img, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date button.ui-datepicker-trigger img {
   vertical-align: middle;
 }
-.search_form_handler .sf_criterion_area .sf_more_criterion {
-  margin-right: 10px;
-}
 .search_form_handler .sf_criterion_area .sf_more_criterion.opened {
   z-index: 2;
   /* To be over criterion */
@@ -1153,6 +1181,13 @@ input.dp-applied {
 .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_buttons button:last-of-type {
   margin-right: 0px;
 }
+.search_form_handler .sf_criterion_area .sf_button {
+  cursor: pointer;
+}
+.search_form_handler .sf_criterion_area .sf_button > * {
+  background-color: #fff;
+  color: #ea7d1e;
+}
 .search_form_handler .sf_list:not(:first-of-type) .sfl_title {
   border-top: 1px solid #ddd;
   padding-top: 8px;

css/light-grey.scss

@@ -800,7 +800,7 @@ input.dp-applied {
 	margin-right: auto;
 	font-size: 12px;
 	text-align: initial; /* To compensate .search_box:text-align */
-	border: 1px solid #3F7294;
+	border: 1px solid $complement-color;
 	//transition: width 0.3s ease-in-out;
 
 	/* Sizing reset */
@@ -823,14 +823,16 @@ input.dp-applied {
 			.sft_short{
 				display: none;
 			}
+
+			.sft_hint,
+			.sft_toggler{
+				margin-top: 4px;
+			}
 			.sft_toggler{
 				transform: rotateX(180deg);
 				transition: transform 0.5s linear;
 			}
 		}
-		//.sf_criterion_area{
-		//	transition: opacity 0.3s linear;
-		//}
 	}
 	&.closed{
 		margin-top: -0.25em; /* To remove top padding from the parent .display_block */
@@ -838,9 +840,7 @@ input.dp-applied {
 		width: 150px;
 		overflow: hidden;
 		border-radius: 0 0 4px 4px;
-		//opacity: 0.7;
+
-		//transition: opacity 0.3s linear;
-		//transition: border 0.3s linear;
 		.sf_criterion_area{
 			height: 0;
 			opacity: 0;
@@ -850,20 +850,20 @@ input.dp-applied {
 			padding: 6px 8px;
 			text-align: center;
 			font-size: 12px;
-		//	transition:  background-color 0.3s, color 0.3s linear;
+
-		//	background-color: #ffffff;
-		//	color: #3F7294;
 			.sft_long{
 				display: none;
 			}
-			.sft_refresh{
+			.sft_hint{
 				display: none;
-				line-height: 10pt;
 			}
 		}
 	}
 
 	&:not(.no_auto_submit){
+		.sft_hint{
+			display: none;
+		}
 		.sfc_fg_apply{
 			display: none;
 		}
@@ -879,30 +879,20 @@ input.dp-applied {
 		padding: 8px 10px;
 		margin: 0;
 		color: #ffffff;
-		background-color: #3F7294;
+		background-color: $complement-color;
 		cursor: pointer;
-
+		.sft_hint{
-		/* Pictogram */
+			font-size: 8pt;
-		.sft_picto{
+			font-style: italic;
-			display: none; /* TODO: Remove this class and the correspondig DOM element if this option is kept. */
-			margin-right: 10px;
 		}
-
-		.sft_refresh,
 		.sft_toggler{
+			margin-left: 0.7em;
 			transition: color 0.2s ease-in-out, transform 0.4s ease-in-out;
 
 			&:hover{
 				color: $gray-extra-light;
 			}
 		}
-		.sft_refresh{
-			font-size: 10pt;
-			line-height: 13pt;
-		}
-		.sft_toggler{
-			margin-left: 0.7em;
-		}
 	}
 	.sf_message{
 		display: none;
@@ -914,11 +904,44 @@ input.dp-applied {
 		padding: 8px 8px 3px 8px; /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
 		background-color: $white;
 
+		.sf_criterion_row{
+			position: relative;;
+
+			&:not(:first-child){
+				margin-top: 20px;
+
+				&::before{
+					content: "";
+					position: absolute;
+					top: -12px;
+					left: 0px;
+					width: 100%;
+					border-top: 1px solid $search-criteria-box-border-color;
+				}
+				&::after{
+					content: "or"; /* TODO: Make this into a dict entry */
+					position: absolute;
+					top: -20px;
+					left: 8px;
+					padding-left: 5px;
+					padding-right: 5px;
+					color: $gray-light;
+					background-color: $white; /* Must match .sf_criterion_area:background-color */
+				}
+			}
+
+			.sf_criterion_group{
+				display: inline;
+			}
+		}
+
 		/* Common style between criterion and more criterion */
 		.search_form_criteria,
-		.sf_more_criterion {
+		.sf_more_criterion,
+		.sf_button{
 			position: relative;
 			display: inline-block;
+			margin-right: 10px;
 			margin-bottom: 5px;
 			vertical-align: top;
 
@@ -952,8 +975,6 @@ input.dp-applied {
 
 		/* Criteria tags */
 		.search_form_criteria{
-			margin-right: 30px;
-
 			/* Non editable criteria */
 			&.locked{
 				background-color: $gray-extra-light;
@@ -992,16 +1013,21 @@ input.dp-applied {
 				}
 			}
 
-			&:not(:last-of-type)::after{
+			/* Add "and" on criterion but the one and submit button */
-				/* TODO: Find an elegant way to do this, without hardcoding the content (could be a <style> in the markup) and margin. Note, only a few languages (hawaiian and stuff like this have more than 4 letters in for "and" word. */
+			&:not(:last-of-type){
-				content: "and";
+				margin-right: 30px;
-				position: absolute;
+
-				top: 8px;
+				&::after{
-				left: calc(100% + 0px);
+					/* TODO: Find an elegant way to do this, without hardcoding the content (could be a <style> in the markup) and margin. Note, only a few languages (hawaiian and stuff like this have more than 4 letters in for "and" word. */
-				margin-right: 5px;
+					content: "and";
-				margin-left: 5px;
+					position: absolute;
-				text-align: center;
+					top: 8px;
-				color: $gray-light;
+					left: calc(100% + 0px);
+					margin-right: 5px;
+					margin-left: 5px;
+					text-align: center;
+					color: $gray-light;
+				}
 			}
 
 			> *{
@@ -1039,7 +1065,7 @@ input.dp-applied {
 				text-overflow: ellipsis;
 				cursor: pointer;
 
-				.values {
+				.sfc_values {
 					font-weight: bold;
 				}
 
@@ -1093,7 +1119,7 @@ input.dp-applied {
 
 							}
 							.sfc_opc_mc_items_wrapper{
-								max-height: 445px; /* Must be less than .sfc_form_group:max-height - .sfc_opc_mc_toggler:height - .sfc_opc_mc_filter:height */
+								max-height: 415px; /* Must be less than .sfc_form_group:max-height - .sfc_opc_mc_toggler:height - .sfc_opc_mc_filter:height */
 								overflow-y: auto;
 								margin: 0px -8px; /* Compensate .sfc_opc_multichoices side padding so the hover style can take the full with */
 
@@ -1296,8 +1322,6 @@ input.dp-applied {
 
 		/* More criterion */
 		.sf_more_criterion{
-			margin-right: 10px;
-
 			&.opened{
 				z-index: 2; /* To be over criterion */
 
@@ -1359,6 +1383,16 @@ input.dp-applied {
 				}
 			}
 		}
+
+		/* Misc. buttons */
+		.sf_button{
+			cursor: pointer;
+
+			> *{
+				background-color: $search-button-box-bg-color;
+				color: $search-button-box-color;
+			}
+		}
 	}
 
 	/* List helpers */
@@ -2756,13 +2790,6 @@ h2.printable-tab-title {
 select.multiselect {
 	max-width: 150px;
 }
-//span.refresh-button {
-//	display: inline-block;
-//	width: 21px;
-//	height: 18px;
-//	cursor: pointer;
-//	background: transparent url(../images/refresh-fff.png?v=#{$version}) left center no-repeat;
-//}
 span.search-button, span.refresh-button {
 	display: inline-block;
 	width: 21px;

dictionaries/en.dictionary.itop.ui.php

@@ -1407,6 +1407,7 @@ When associated with a trigger, each action is given an "order" number, specifyi
 	// TODO: Reorganize those entries with other search entries and make entries for other languages.
 	// Search form
 	'UI:Search:Toggle' => 'Minimize / Expand',
+	'UI:Search:AutoSubmit:DisabledHint' => 'Auto submit has been disabled for this class',
 	'UI:Search:Criterion:MoreMenu:AddCriteria' => 'Add new criteria',
 	// - Add new criteria button
 	'UI:Search:AddCriteria:List:RecentlyUsed:Title' => 'Recently used',

js/extkeywidget.js

@@ -94,7 +94,6 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 				me.UpdateSizes();
 				me.UpdateButtons();
 				me.ajax_request = null;
-				FixSearchFormsDisposition();
 				me.DoSearchObjects();
 			},
 			'html'

js/linksdirectwidget.js

@@ -275,7 +275,6 @@ $(function()
 					var c = this.value;
 					me._onUpdateDlgButtons(c);
 				});
-				FixSearchFormsDisposition();
 				$('#SearchResultsToAdd_'+me.id).unblock();
 				me._onSearchDlgUpdateSize();
 			});

js/linkswidget.js

@@ -148,7 +148,6 @@ function LinksWidget(id, sClass, sAttCode, iInputId, sSuffix, bDuplicates, oWizH
 			var c = this.value;
 			me.UpdateButtons(c);
 		});
-		FixSearchFormsDisposition();
 		me.UpdateSizes(null, null);
 
 		$("#fs_SearchFormToAdd_"+me.id).trigger('itop.search.form.submit');
@@ -197,7 +196,6 @@ function LinksWidget(id, sClass, sAttCode, iInputId, sSuffix, bDuplicates, oWizH
 					var c = this.value;
 					me.UpdateButtons(c);
 				});
-				FixSearchFormsDisposition();
 				me.UpdateSizes(null, null);
 				$(sSearchAreaId).unblock();		
 			},

js/search/search_form_criteria.js

@@ -175,6 +175,7 @@ $(function()
 
 			// Close criteria
 			this.element.on('itop.search.criteria.close', function(){
+				me._apply();
 				return me._close();
 			});
 
@@ -537,7 +538,7 @@ $(function()
 				sDictEntry = 'UI:Search:Criteria:Title:Default:' + this._toCamelCase(sOperator);
 			}
 
-			sTitle = Dict.Format(sDictEntry, this.options.field.label, '<span class="values">'+sValueAsText+'</span>');
+			sTitle = Dict.Format(sDictEntry, this.options.field.label, '<span class="sfc_values">'+sValueAsText+'</span>');
 
 			// Last chande fallback
 			if(sTitle === sDictEntry)
@@ -552,10 +553,10 @@ $(function()
 		{
 			sTitle = this._computeTitle(sTitle);
 
-			var titleElemnt = this.element.find('.sfc_title');
+			var titleElem = this.element.find('.sfc_title');
 
-			titleElemnt.html(sTitle);
+			titleElem.html(sTitle);
-			titleElemnt.attr('title', titleElemnt.text());
+			titleElem.attr('title', titleElem.text());
 		},
 
 		// Operators helpers

js/search/search_form_criteria_date_abstract.js

@@ -369,7 +369,7 @@ $(function()
 					sDictEntry = 'UI:Search:Criteria:Title:Default:' + this._toCamelCase(me.options.operator) + sDictEntrySuffix;
 				}
 
-				sTitle = Dict.Format(sDictEntry, this.options.field.label, '<span class="values">'+this._getValuesAsText()+'</span>');
+				sTitle = Dict.Format(sDictEntry, this.options.field.label, '<span class="sfc_values">'+this._getValuesAsText()+'</span>');
 				return sTitle;
 
 			}

js/search/search_form_criteria_enum.js

@@ -441,8 +441,8 @@ $(function()
 
 				sTitle = Dict.Format(
 					'UI:Search:Criteria:Title:Enum:In:Many',
-					'<span class="values">'+this.options.field.label, aFirstValues.join(', ')+'</span>',
+					'<span class="sfc_values">'+this.options.field.label, aFirstValues.join(', ')+'</span>',
-					'<span class="values">'+(iValCount - iValLimit+1)+'</span>'
+					'<span class="sfc_values">'+(iValCount - iValLimit+1)+'</span>'
 				);
 			}
 

js/search/search_form_criteria_numeric.js

@@ -235,7 +235,7 @@ $(function()
 						sDictEntry = 'UI:Search:Criteria:Title:Default:' + this._toCamelCase(me.options.operator) + sDictEntrySuffix;
 					}
 
-					sTitle = Dict.Format(sDictEntry, this.options.field.label, '<span class="values">'+this._getValuesAsText()+'</span>');
+					sTitle = Dict.Format(sDictEntry, this.options.field.label, '<span class="sfc_values">'+this._getValuesAsText()+'</span>');
 					return sTitle;
 				}
 

js/search/search_form_handler.js

@@ -12,7 +12,6 @@ $(function()
 			'criterion_outer_selector': null,
 			'result_list_outer_selector': null,
 			'data_config_list_selector': null,
-			'submit_button_selector': null,
 			'endpoint': null,
 			'init_opened': false,
 			'auto_submit': true,
@@ -95,6 +94,7 @@ $(function()
 				message_area: null,
 				criterion_area: null,
 				more_criterion: null,
+				submit_button: null,
 				results_area: null,
 			};
 			this.submit = {
@@ -109,12 +109,6 @@ $(function()
 			this._prepareCriterionArea();
 			this._prepareResultsArea();
 
-			// Binding buttons
-			if(this.options.submit_button_selector !== null)
-			{
-				$(this.options.submit_button_selector).off('click').on('click', function(oEvent){ me._onSubmitClick(oEvent); });
-			}
-
 			// Binding events (eg. from search_form_criteria widgets)
 			this._bindEvents();
 		},
@@ -158,6 +152,13 @@ $(function()
 			this.element.on('itop.search.form.submit', function(oEvent, oData){
 				me._onSubmit();
 			});
+			// - Search form has been reloaded by the page
+			this.element.on('itop.search.form.reloaded', function(){
+				if(me.options.auto_submit === true)
+				{
+					me._submit();
+				}
+			});
 
 			// Criteria events
 			this.element.on('itop.search.criteria.value_changed', function(oEvent, oData){
@@ -170,7 +171,7 @@ $(function()
 				me._onCriteriaErrorOccured(oData);
 			});
 
-			$('body').on('update_history.itop', function(event, eventData) {
+			$('body').on('update_history.itop', function(oEvent, oData) {
 
 				if (! me.element.is(':visible'))
 				{
@@ -179,77 +180,58 @@ $(function()
 
 				if ($(':itop-search_form_handler:visible').length != 1)
 				{
-					me._trace('history not updated because several search widget are visible');
+					me._trace('History not updated because several search widget are visible');
 					return;
 				}
 
-				me._trace('history update', eventData);
+				me._trace('history update', oData);
 
-				var newUrl = GetAbsoluteUrlAppRoot()+'pages/UI.php?operation=search';
+				var sNewUrl = GetAbsoluteUrlAppRoot()+'pages/UI.php?operation=search';
-				newUrl = newUrl + '&filter='+eventData['filter'];
+				sNewUrl = sNewUrl + '&filter='+oData['filter'];
-				newUrl = newUrl + '&c[menu]='+me._extractURLParameter(window.location.href, "c[menu]");
+				sNewUrl = sNewUrl + '&c[menu]='+me._extractURLParameter(window.location.href, "c[menu]");
 				if ('' != me._extractURLParameter(window.location.href, "debug"))
 				{
-					newUrl = newUrl + '&debug='+me._extractURLParameter(window.location.href, "debug");
+					sNewUrl = sNewUrl + '&debug='+me._extractURLParameter(window.location.href, "debug");
 				}
 
-				history.replaceState(null, null, newUrl);
+				history.replaceState(null, null, sNewUrl);
 
 				$('#itop-breadcrumb')
 					.breadcrumb('destroy')
 					.breadcrumb({
-					itop_instance_id: eventData['breadcrumb_instance_id'],
+					itop_instance_id: oData['breadcrumb_instance_id'],
-					max_count: eventData['breadcrumb_max_count'],
+					max_count: oData['breadcrumb_max_count'],
 					new_entry: {
-						"id": eventData['breadcrumb_id'],
+						"id": oData['breadcrumb_id'],
-						"label": eventData['breadcrumb_label'],
+						"label": oData['breadcrumb_label'],
-						"url": newUrl,
+						"url": sNewUrl,
-						'icon': eventData['breadcrumb_icon'],
+						'icon': oData['breadcrumb_icon'],
 						'description': ''
 					}
 				});
 			});
 
 		},
-		_extractURLParameter: function(url, parameter) {
-			//prefer to use l.search if you have a location/link object
-			var urlparts= url.split('?');
-			if (urlparts.length>=2) {
-
-				var prefix = [
-					parameter+'=',
-					encodeURIComponent(parameter)+'='
-				];
-				var pars = urlparts[1].split(/[&;]/g);
-
-				for (var i = 0; i < pars.length; i++) {
-					for (var j = 0; j < prefix.length; j++) {
-						var pos = pars[i].lastIndexOf(prefix[j], 0);
-						if (pos !== -1) {
-							return pars[i].substring(pos + prefix[j].length);
-						}
-					}
-				}
-			}
-			return '';
-		},
 		// - Update search option of the widget
 		_updateSearch: function()
 		{
 			var me = this;
 
 			// Criterion
-			// - Note: As of today, only a "or" level with a "and" is supported, so the following part
-			//         will need some refactoring when introducing new stuff.
 			var oCriterion = {
 				'or': [{
 					'and': []
 				}]
 			};
 			// - Retrieve criterion
-			this.elements.criterion_area.find('.search_form_criteria').each(function(){
+			this.elements.criterion_area.find('.sf_criterion_row').each(function(iIdx){
-				var oCriteriaData = $(this).triggerHandler('itop.search.criteria.get_data');
+				var oCriterionRowElem = $(this);
-				oCriterion['or'][0]['and'].push(oCriteriaData);
+
+				oCriterion['or'][iIdx] = {'and': []};
+				oCriterionRowElem.find('.search_form_criteria').each(function(){
+					var oCriteriaData = $(this).triggerHandler('itop.search.criteria.get_data');
+					oCriterion['or'][iIdx]['and'].push(oCriteriaData);
+				});
 			});
 			// - Update search
 			this.options.search.criterion = oCriterion;
@@ -296,7 +278,7 @@ $(function()
 		// - Close all criterion
 		_closeAllCriterion: function()
 		{
-			this.elements.criterion_area.find('.search_form_criteria').each(function(){
+			this.elements.criterion_area.find('.search_form_criteria.opened').each(function(){
 				$(this).triggerHandler('itop.search.criteria.close');
 			});
 		},
@@ -356,38 +338,26 @@ $(function()
 			oCriterionAreaElem.addClass('sf_criterion_area');
 			this.elements.criterion_area = oCriterionAreaElem;
 
-				// Clean area
+			// Clean area
 			oCriterionAreaElem
 				.html('')
-				.append('<div class="sf_more_criterion"></div>');
+				.append('<div class="sf_criterion_row"></div>');
-			this.elements.more_criterion = oCriterionAreaElem.find('.sf_more_criterion');
 
 			// Prepare content
-			this._prepareExistingCriterion();
 			this._prepareMoreCriterionMenu();
-		},
+			this._prepareExistingCriterion();
-		// - Prepare existing criterion
+			this._prepareSubmitButton();
-		_prepareExistingCriterion: function()
-		{
-			// - OR conditions
-			var aORs = (this.options.search.criterion['or'] !== undefined) ? this.options.search.criterion['or'] : [];
-			for(var iORIdx in aORs)
-			{
-				// Note: We might want to create a OR container here when handling several OR conditions.
-
-				var aANDs = (aORs[iORIdx]['and'] !== undefined) ? aORs[iORIdx]['and'] : [];
-				for(var iANDIdx in aANDs)
-				{
-					var oCriteriaData = aANDs[iANDIdx];
-					this._addCriteria(oCriteriaData);
-				}
-			}
 		},
 		// - Prepare "more" button
 		_prepareMoreCriterionMenu: function()
 		{
 			var me = this;
 
+			// DOM
+			this.elements.more_criterion = $('<div></div>')
+				.addClass('sf_more_criterion')
+				.appendTo(this.elements.criterion_area.find('.sf_criterion_row:first'));
+
 			// Header part
 			var oHeaderElem = $('<div class="sfm_header"></div>')
 				.append('<a class="sfm_toggler" href="#"><span class="sfm_tg_title">' + Dict.S('UI:Search:Criterion:MoreMenu:AddCriteria') + '</span><span class="sfm_tg_icon fa fa-plus"></span></a>')
@@ -654,6 +624,71 @@ $(function()
 				oButtonsElem.hide();
 			});
 		},
+		// - Prepare "submit" button
+		_prepareSubmitButton: function()
+		{
+			var me = this;
+
+			// DOM
+			this.elements.submit_button = $('<div></div>')
+				.addClass('sf_button')
+				.addClass('sf_submit')
+				.appendTo(this.elements.criterion_area.find('.sf_criterion_row:first'));
+
+			var sButtonText = (this.options.auto_submit === true) ? Dict.S('UI:Button:Refresh') : Dict.S('UI:Button:Search');
+			var oButtonElem = $('<div class="sfb_header"></div>')
+				.append('<a class="fa fa-fw fa-search" title="' + sButtonText + '" href="#"></a>')
+				.appendTo(this.elements.submit_button);
+
+			// Bind events
+			// - Add one criteria
+			this.elements.submit_button.on('click', function(oEvent){
+				// Prevent anchor
+				oEvent.preventDefault();
+
+				me._onSubmitClick();
+			});
+		},
+		// - Prepare existing criterion
+		_prepareExistingCriterion: function()
+		{
+			// - OR conditions
+			var iORCount = 0;
+			var aORs = (this.options.search.criterion['or'] !== undefined) ? this.options.search.criterion['or'] : [];
+			for(var iORIdx in aORs)
+			{
+				if(this.elements.criterion_area.find('.sf_criterion_row:nth-of-type(' + (iORCount+1) + ')').length > 0)
+				{
+					var oCriterionRowElem = this.elements.criterion_area.find('.sf_criterion_row:nth-of-type(' + (iORCount+1) + ')');
+				}
+				else
+				{
+					var oCriterionRowElem = $('<div></div>')
+						.addClass('sf_criterion_row')
+						.appendTo(this.elements.criterion_area);
+				}
+
+				if(oCriterionRowElem.find('.sf_criterion_group').length > 0)
+				{
+					var oCriterionGroupElem = oCriterionRowElem.find('.sf_criterion_group');
+				}
+				else
+				{
+					var oCriterionGroupElem = $('<div></div>')
+						.addClass('sf_criterion_group')
+						.appendTo(oCriterionRowElem);
+				}
+
+				var aANDs = (aORs[iORIdx]['and'] !== undefined) ? aORs[iORIdx]['and'] : [];
+				for(var iANDIdx in aANDs)
+				{
+					var oCriteriaData = aANDs[iANDIdx];
+					this._addCriteria(oCriteriaData, oCriterionGroupElem);
+				}
+
+				iORCount++;
+			}
+		},
 		// - Prepare results area
 		_prepareResultsArea: function()
 		{
@@ -741,7 +776,7 @@ $(function()
 
 		// Criteria helpers
 		// - Add a criteria to the form
-		_addCriteria: function(oData)
+		_addCriteria: function(oData, oCriterionGroupElem)
 		{
 			var sRef = oData.ref;
 			var sType = sType = (oData.widget !== undefined) ? oData.widget : this._getCriteriaTypeFromFieldRef(sRef);
@@ -752,6 +787,12 @@ $(function()
 				sType = 'raw';
 			}
 
+			// Add to first OR condition if not specified
+			if(oCriterionGroupElem === undefined)
+			{
+				oCriterionGroupElem = this.elements.criterion_area.find('.sf_criterion_row:first .sf_criterion_group');
+			}
+
 			// Protection against bad initialization data
 			if(sType === null)
 			{
@@ -793,8 +834,7 @@ $(function()
 			// Create DOM element
 			var oCriteriaElem = $('<div></div>')
 				.addClass('sf_criteria')
-				//.insertBefore(this.elements.more_criterion);
+				.appendTo(oCriterionGroupElem);
-				.appendTo(this.elements.criterion_area);
 
 			// Instanciate widget
 			$.itop[sWidgetName](oData, oCriteriaElem);
@@ -1018,6 +1058,29 @@ $(function()
 
 			return aParts.join('');
 		},
+		// - Extract sParameter from sUrl
+		_extractURLParameter: function(sUrl, sParameter) {
+			//prefer to use l.search if you have a location/link object
+			var urlparts= sUrl.split('?');
+			if (urlparts.length>=2) {
+
+				var prefix = [
+					sParameter+'=',
+					encodeURIComponent(sParameter)+'='
+				];
+				var pars = urlparts[1].split(/[&;]/g);
+
+				for (var i = 0; i < pars.length; i++) {
+					for (var j = 0; j < prefix.length; j++) {
+						var pos = pars[i].lastIndexOf(prefix[j], 0);
+						if (pos !== -1) {
+							return pars[i].substring(pos + prefix[j].length);
+						}
+					}
+				}
+			}
+			return '';
+		},
 
 
 		// Debug helpers

js/searchformforeignkeys.js

@@ -112,7 +112,6 @@ function SearchFormForeignKeys(id, sTargetClass, sAttCode, oSearchWidgetElmt, sF
 				me.UpdateSizes();
 				me.UpdateButtons();
 				me.ajax_request = null;
-				FixSearchFormsDisposition();
 				me.ListResultsSearchForeignKeys();
 			},
 			'html'

js/utils.js

@@ -283,49 +283,13 @@ function ReloadSearchForm(divId, sClassName, sBaseClass, sContext, sTableId) {
 		function (data) {
 			oDiv.empty();
 			oDiv.append(data);
-			if (aSubmit.length > 0) {
-				var oForm = $('#ds_'+divId+' form'); // Form was reloaded, recompute it
-				for (var index = 0; index < aSubmit.length; index++) {
-					// Restore the previously bound submit handlers
-					var sEventName = 'submit';
-					if ((aSubmit[index].namespace != undefined) && (aSubmit[index].namespace != '')) {
-						sEventName += '.'+aSubmit[index].namespace;
-					}
-					if (aSubmit[index].data != undefined) {
-						oForm.bind(sEventName, aSubmit[index].data, aSubmit[index].handler)
-					}
-					else {
-						oForm.bind(sEventName, aSubmit[index].handler)
-					}
-				}
-			}
-			FixSearchFormsDisposition();
 			oDiv.unblock();
 			oDiv.parent().resize(); // Inform the parent that the form has just been (potentially) resized
+			oDiv.find('form').triggerHandler('itop.search.form.reloaded');
 		}
 	);
 }
 
-function FixSearchFormsDisposition() {
-	// Fix search forms
-	$('.search_box').each(function () {
-		var colWidth = 0;
-		var labelWidth = 0;
-		$('label:visible', $(this)).each(function () {
-			var l = $(this).parent().width()-$(this).width();
-			colWidth = Math.max(l, colWidth);
-			labelWidth = Math.max($(this).width(), labelWidth);
-		});
-		$('label:visible', $(this)).each(function () {
-			if ($(this).data('resized') != true) {
-				$(this).parent().width(colWidth+labelWidth);
-				$(this).width(labelWidth).css({display: 'inline-block'}).data('resized', true);
-			}
-		});
-	});
-
-}
-
 /**
  * Stores - in a persistent way - user specific preferences
  * depends on a global variable oUserPreferences created/filled by the iTopWebPage

sources/application/search/searchform.class.inc.php

@@ -176,7 +176,7 @@ class SearchForm
 		$sHtml .= "<form id=\"fs_{$sSearchFormId}\" action=\"{$sAction}\" class=\"{$sStyle}\">\n"; // Don't use $_SERVER['SCRIPT_NAME'] since the form may be called asynchronously (from ajax.php)
 		$sHtml .= "<h2 class=\"sf_title\"><span class=\"sft_long\">" . Dict::Format('UI:SearchFor_Class_Objects', $sClassesCombo) . "</span><span class=\"sft_short\">" . Dict::S('UI:SearchToggle') . "</span>";
 		$sHtml .= "<a class=\"sft_toggler fa fa-caret-down pull-right\" href=\"#\" title=\"" . Dict::S('UI:Search:Toggle') . "\"></a>";
-		$sHtml .= "<a class=\"sft_refresh fa fa-search pull-right\" href=\"#\" title=\"" . Dict::S('UI:Button:Refresh') . "\"></a>";
+		$sHtml .= "<span class=\"sft_hint pull-right\">" . Dict::S('UI:Search:AutoSubmit:DisabledHint') . "</span>";
 		$sHtml .= "</h2>\n";
 		$sHtml .= "<div id=\"fs_{$sSearchFormId}_message\" class=\"sf_message header_message\"></div>\n";
 		$sHtml .= "<div id=\"fs_{$sSearchFormId}_criterion_outer\">\n</div>\n";