Advanced search: WIP POC, UI/UX.

SVN:b1162[5421]

css/light-grey.css

@@ -728,7 +728,7 @@ div.HRDrawer {
   width: 100%;
   margin: 0;
   background-color: #1c94c4;
-  margin: 0;
+  margin-top: 10px;
   padding: 0;
   border: 0;
   display: block;
@@ -784,6 +784,7 @@ div.HRDrawer {
 .search_form_handler .sf_criterion_area .sf_more_criterion, .search_form_handler .sf_criterion_area .search_form_criteria {
   position: relative;
   padding: 7px 8px;
+  vertical-align: top;
   background-color: #d6e8ef;
   color: #2d2d2d;
   border: 1px solid #1c94c4;
@@ -793,7 +794,7 @@ div.HRDrawer {
 .search_form_handler .sf_criterion_area .search_form_criteria {
   display: inline-block;
   margin-right: 5px;
-  padding-right: 35px;
+  margin-bottom: 5px;
   /* Top left corner icons */
   /* Special criterion processing */
 }
@@ -811,12 +812,13 @@ div.HRDrawer {
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
   display: inline-block;
   right: 20px;
-  transition: all 0.2s ease-in-out;
+  transition: all 0.4s ease-in-out;
 }
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle.opened {
-  transform: rotateZ(180deg);
+  transform: rotateZ(-180deg);
 }
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_title {
+  padding-right: 35px;
   cursor: pointer;
 }
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group {
@@ -827,6 +829,31 @@ div.HRDrawer {
   display: block;
   margin-top: 5px;
   /* Show only first operator in simple mode */
+  /* Show all operators in advanced mode */
+}
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators {
+  font-size: 12px;
+}
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator {
+  /* Common operators for most criteria types processing*/
+}
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator > label {
+  line-height: 20px;
+}
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator > label > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator .sfc_op_radio {
+  width: 12px;
+  margin: 0px;
+  margin-right: 7px;
+}
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_contains .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_starts_with .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_name {
+  width: 90px;
+}
+.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_contains .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_starts_with .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_content input {
+  width: 130px;
 }
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_apply, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_cancel {
   margin-top: 8px;
@@ -839,7 +866,7 @@ div.HRDrawer {
 }
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_more, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_less {
   position: absolute;
-  bottom: 3px;
+  bottom: 4px;
   right: 0px;
   cursor: pointer;
   color: #1c94c4;
@@ -860,9 +887,6 @@ div.HRDrawer {
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_more {
   display: inline-block;
 }
-.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced {
-  /* Show all operators in simple mode */
-}
 .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_operator {
   margin-bottom: 3px;
 }

css/light-grey.scss

@@ -811,7 +811,7 @@ div.HRDrawer {
 	width: 100%;
 	margin: 0;
 	background-color:  $complement-color;
-	margin: 0;
+	margin-top: 10px;
 	padding: 0;
 	border: 0;
 	display: block;
@@ -867,6 +867,7 @@ div.HRDrawer {
 		.search_form_criteria{
 			position: relative;
 			padding: 7px 8px;
+			vertical-align: top;
 			background-color: $box-blue-bg-color;
 			color: $box-blue-color;
 			border: $box-blue-border;
@@ -878,7 +879,7 @@ div.HRDrawer {
 		.search_form_criteria{
 			display: inline-block;
 			margin-right: 5px;
-			padding-right: 35px;
+			margin-bottom: 5px;
 
 			&.locked{
 				background-color: $gray-extra-light;
@@ -897,14 +898,15 @@ div.HRDrawer {
 			.sfc_toggle{
 				display: inline-block;
 				right: 20px;
-				transition: all 0.2s ease-in-out;
+				transition: all 0.4s ease-in-out;
 
 				&.opened{
-					transform: rotateZ(180deg);
+					transform: rotateZ(-180deg);
 				}
 			}
 
 			.sfc_title{
+				padding-right: 35px;
 				cursor: pointer;
 			}
 			.sfc_form_group{
@@ -915,6 +917,41 @@ div.HRDrawer {
 					display: block;
 					margin-top: 5px;
 
+					.sfc_fg_operators{
+						font-size: 12px;
+
+						.sfc_fg_operator{
+							> label{
+								line-height: 20px;
+
+								> *{
+									display: inline-block;
+									vertical-align: middle;
+								}
+							}
+
+							.sfc_op_radio{
+								width: 12px;
+								margin: 0px;
+								margin-right: 7px;
+							}
+
+							/* Common operators for most criteria types processing*/
+							&.sfc_fg_operator_contains,
+							&.sfc_fg_operator_starts_with,
+							&.sfc_fg_operator_ends_with{
+								.sfc_op_name{
+									width: 90px;
+								}
+								.sfc_op_content{
+									input{
+										width: 130px;
+									}
+								}
+							}
+						}
+					}
+
 					.sfc_fg_apply,
 					.sfc_fg_cancel{
 						margin-top: 8px;
@@ -928,7 +965,7 @@ div.HRDrawer {
 					.sfc_fg_more,
 					.sfc_fg_less{
 						position: absolute;
-						bottom: 3px;
+						bottom: 4px;
 						right: 0px;
 						cursor: pointer;
 						color: $box-blue-border-color;
@@ -954,6 +991,7 @@ div.HRDrawer {
 						display: inline-block;
 					}
 
+					/* Show all operators in advanced mode */
 					&.advanced{
 
 						.sfc_fg_operator{
@@ -964,7 +1002,6 @@ div.HRDrawer {
 							}
 						}
 
-						/* Show all operators in simple mode */
 						.sfc_fg_operator:not(:first-of-type),
 						.sfc_fg_operator:first-of-type .sfc_op_radio{
 							display: inherit;

dictionaries/en.dictionary.itop.ui.php

@@ -1371,8 +1371,8 @@ When associated with a trigger, each action is given an "order" number, specifyi
 	'UI:UploadNotSupportedInThisMode' => 'The modification of images or files is not supported in this mode.',
 
 	// TODO: Reorganize those entries with other search entries and make entries for other languages.
-	'UI:Search:Criteria:Operator:Default:Empty' => 'Is empty:',
-	'UI:Search:Criteria:Operator:Default:NotEmpty' => 'Is not empty:',
+	'UI:Search:Criteria:Operator:Default:Empty' => 'Is empty',
+	'UI:Search:Criteria:Operator:Default:NotEmpty' => 'Is not empty',
 	'UI:Search:Criteria:Operator:Default:Equals' => 'Equals:',
 	'UI:Search:Criteria:Operator:String:Contains' => 'Contains:',
 	'UI:Search:Criteria:Operator:String:StartsWith' => 'Starts with:',

js/search/search_form_criteria.js

@@ -39,6 +39,7 @@ $(function()
 				},
 			},
 
+			'init_opened': false,
 			'is_modified': false, // TODO: change this on value change and remove oql property value
 		},
 
@@ -189,6 +190,12 @@ $(function()
 				'values': this.options.values,
 				'is_removable': this.options.is_removable,
 				'oql': this.options.oql,
+
+				// Field data
+				'class': this.options.field.class,
+				'class_alias': this.options.field.class_alias,
+				'code': this.options.field.code,
+				'widget': this.options.field.widget,
 			};
 			return oCriteriaData;
 		},
@@ -209,7 +216,15 @@ $(function()
 			// Bind events
 			// - Toggler
 			this.element.find('.sfc_toggle, .sfc_title').on('click', function(){
-				me.element.find('.sfc_form_group, .sfc_toggle').toggleClass('opened');
+				// First memorize if current criteria is close
+				var bOpen = !me.element.find('.sfc_toggle').hasClass('opened');
+				// Then close every criterion
+				me.handler.find('.sfc_form_group, .sfc_toggle').removeClass('opened');
+				// Finally open current criteria if necessary
+				if(bOpen === true)
+				{
+					me.element.find('.sfc_form_group, .sfc_toggle').toggleClass('opened');
+				}
 			});
 
 			// Removable / locked decoration
@@ -232,6 +247,13 @@ $(function()
 			// Fill criteria
 			// - Title
 			this._setTitle();
+
+			// Init opened to improve UX (toggle & focus in main operator's input)
+			if(this.options.init_opened === true)
+			{
+				this.element.find('.sfc_toggle').trigger('click');
+				this.element.find('.sfc_fg_operator:first .sfc_op_content input:first').trigger('click').trigger('focus');
+			}
 		},
 		// - Prepare the available operators for the criteria
 		//   Meant for overloading.
@@ -246,16 +268,16 @@ $(function()
 				var oOpElem = $(this._getOperatorTemplate()).uniqueId();
 
 				// Prepare operator's base elements
-				this._prepareOperator(oOpElem, oOp);
+				this._prepareOperator(oOpElem, sOpIdx, oOp);
 
 				// Prepare operator's specific elements
 				if(this[sMethod] !== undefined)
 				{
-					this[sMethod](oOpElem, oOp);
+					this[sMethod](oOpElem, sOpIdx, oOp);
 				}
 				else
 				{
-					this._prepareDefaultOperator(oOpElem, oOp);
+					this._prepareDefaultOperator(oOpElem, sOpIdx, oOp);
 				}
 
 				// Append to form group
@@ -300,10 +322,13 @@ $(function()
 		},
 
 		// Operators helpers
-		_prepareOperator: function(oOpElem, oOp)
+		_prepareOperator: function(oOpElem, sOpIdx, oOp)
 		{
 			var sInputId = oOp.code + '_' + oOpElem.attr('id');
 
+			// Set radio
+			oOpElem.find('.sfc_op_radio').val(sOpIdx);
+
 			// Set label
 			oOpElem.find('.sfc_op_name').text(oOp.label);
 			oOpElem.find('> label').attr('for', sInputId);
@@ -312,13 +337,16 @@ $(function()
 			oOpElem.find('.sfc_op_radio').val(oOpElem.id);
 			oOpElem.find('.sfc_op_radio').attr('id', sInputId);
 
+			// Set helper classes
+			oOpElem.addClass('sfc_fg_operator_' + oOp.code);
+
 			// Bind events
 			// - Check radio button on click
 			oOpElem.on('click', function(){
 				oOpElem.find('.sfc_op_radio').prop('checked', true);
 			});
 		},
-		_prepareDefaultOperator: function(oOpElem, oOp)
+		_prepareDefaultOperator: function(oOpElem, sOpIdx, oOp)
 		{
 			var me = this;
 
@@ -326,13 +354,18 @@ $(function()
 			var oOpContentElem = $('<input type="text" />');
 			oOpContentElem.val(this._getValuesAsText());
 
-			oOpElem.append(oOpContentElem);
+			// Events
+			oOpElem.on('click', ':not(input[type="text"])', function(){
+				oOpContentElem.focus();
+			});
+
+			oOpElem.find('.sfc_op_content').append(oOpContentElem);
 		},
-		_prepareEmptyOperator: function(oOpElem, oOp)
+		_prepareEmptyOperator: function(oOpElem, sOpIdx, oOp)
 		{
 			// Do nothing as only the label is necessary
 		},
-		_prepareNotEmptyOperator: function(oOpElem, oOp)
+		_prepareNotEmptyOperator: function(oOpElem, sOpIdx, oOp)
 		{
 			// Do nothing as only the label is necessary
 		},

js/search/search_form_criteria_raw.js

@@ -54,6 +54,8 @@ $(function()
 
 			// Remove toggler as it's a non sense here
 			this.element.find('.sfc_toggle').remove();
+			this.element.find('.sfc_toggle, .sfc_title').off('click');
+
 		},
 		_prepareOperators: function()
 		{

js/search/search_form_criteria_string.js

@@ -16,7 +16,17 @@ $(function()
 				'contains': {
 					'label': Dict.S('UI:Search:Criteria:Operator:String:Contains'),
 					'code': 'contains',
-					'rank': 5,
+					'rank': 10,
+				},
+				'starts_with': {
+					'label': Dict.S('UI:Search:Criteria:Operator:String:StartsWith'),
+					'code': 'starts_with',
+					'rank': 20,
+				},
+				'ends_with': {
+					'label': Dict.S('UI:Search:Criteria:Operator:String:EndsWith'),
+					'code': 'ends_with',
+					'rank': 30,
 				},
 				'=': null,	// Remove this one from string widget.
 			},

js/search/search_form_handler.js

@@ -155,17 +155,7 @@ $(function()
 			};
 			// - Retrieve criterion
 			this.elements.active_criterion.find('.search_form_criteria').each(function(){
-				// Retrieve criteria data
 				var oCriteriaData = $(this).triggerHandler('itop.search.criteria.get_data');
-
-				// Add some of the field data to criteria data to help server rebuild query
-				// Note: This would be better to be passed in oCriteriaData.field but it's not how server is handling it.
-				var oFieldDef = me._getFieldDefinition(oCriteriaData.ref);
-				oCriteriaData.class = oFieldDef.class;
-				oCriteriaData.class_alias = oFieldDef.class_alias;
-				oCriteriaData.code = oFieldDef.code;
-				oCriteriaData.widget = oFieldDef.widget;
-
 				oCriterion['or'][0]['and'].push(oCriteriaData);
 			});
 			// - Update search
@@ -256,9 +246,10 @@ $(function()
 
 			// Bind events
 			this.elements.more_criterion.find('.sf_mc_field').on('click', function(){
-				// Prepare new criterion data
+				// Prepare new criterion data (as already opened to increase UX)
 				var oData = {
 					'ref': $(this).attr('data-field-ref'),
+					'init_opened': true,
 				};
 
 				// Add criteria but don't submit form as the user has not specified the value yet.
@@ -303,6 +294,10 @@ $(function()
 					var oFieldDef = this._getFieldDefinition(sRef);
 					oData.field = {
 						label: oFieldDef.label,
+						class: oFieldDef.class,
+						class_alias: oFieldDef.class_alias,
+						code: oFieldDef.code,
+						widget: oFieldDef.widget,
 					};
 				}