diff --git a/css/light-grey.css b/css/light-grey.css index 0b9e6643f..533163e57 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -700,7 +700,6 @@ input.dp-applied { margin-top: 0; } /* Search forms v2 */ -/* TODO: Remove comment before final commit */ .search_box { box-sizing: border-box; position: relative; @@ -773,11 +772,9 @@ input.dp-applied { /* Criteria tags */ /* More criterion */ } -.search_form_handler .sf_criterion_area .sf_active_criterion, .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 { position: relative; display: inline-block; -} -.search_form_handler .sf_criterion_area .search_form_criteria, .search_form_handler .sf_criterion_area .sf_more_criterion { margin-bottom: 5px; vertical-align: top; } @@ -808,8 +805,6 @@ input.dp-applied { margin-top: -1px; } .search_form_handler .sf_criterion_area .search_form_criteria { - position: relative; - display: inline-block; margin-right: 5px; /* Non editable criteria */ /* Draft criteria (modifications not applied) */ @@ -1034,6 +1029,13 @@ input.dp-applied { cursor: pointer; white-space: nowrap; } +.sf_results_area .sf_results_placeholder { + margin-top: 100px; + text-align: center; +} +.sf_results_area .sf_results_placeholder button > span { + margin-left: 0.5em; +} .mandatory { border: 1px solid #f00; } diff --git a/css/light-grey.scss b/css/light-grey.scss index 28a435552..d3934570e 100644 --- a/css/light-grey.scss +++ b/css/light-grey.scss @@ -781,7 +781,6 @@ input.dp-applied { margin-top: 0; } /* Search forms v2 */ -/* TODO: Remove comment before final commit */ .search_box{ box-sizing: border-box; position: relative; @@ -862,14 +861,10 @@ input.dp-applied { background-color: $white; /* Common style between criterion and more criterion */ - .sf_active_criterion, + .search_form_criteria, .sf_more_criterion { position: relative; display: inline-block; - } - - .search_form_criteria, - .sf_more_criterion { margin-bottom: 5px; vertical-align: top; @@ -905,8 +900,6 @@ input.dp-applied { /* Criteria tags */ .search_form_criteria{ - position: relative; - display: inline-block; margin-right: 5px; @@ -1207,6 +1200,16 @@ input.dp-applied { } } } +.sf_results_area{ + .sf_results_placeholder{ + margin-top: 100px; + text-align: center; + + button > span{ + margin-left: 0.5em; + } + } +} .mandatory { border: 1px solid #f00; diff --git a/js/search/search_form_criteria.js b/js/search/search_form_criteria.js index fa036bd52..7abb41dcd 100644 --- a/js/search/search_form_criteria.js +++ b/js/search/search_form_criteria.js @@ -260,10 +260,6 @@ $(function() // Trigger event to handler this.handler.triggerHandler('itop.search.criteria.value_changed'); }, - _cancel: function() - { - this._close(); - }, // Event callbacks @@ -271,10 +267,11 @@ $(function() _onButtonApply: function() { this._apply(); + this._close(); }, _onButtonCancel: function() { - this._cancel(); + this._close(); }, _onButtonMore: function() { @@ -332,6 +329,24 @@ $(function() me._open(); } }); + this.element.on('keydown', function(oEvent){ + // Apply if "enter" key + if(oEvent.key === 'Enter') + { + me._apply(); + + // Keep criteria open only on Ctrl + Enter. + if(oEvent.ctrlKey === false) + { + me._close(); + } + } + // Close if "escape" key + else if(oEvent.key === 'Escape') + { + me._close(); + } + }); // Removable / locked decoration if(this.options.is_removable === true) @@ -494,7 +509,7 @@ $(function() // Bind events // - Check radio button on click and mark criteria as draft - oOpElem.on('click', function(){ + oOpElem.on('click focusin', function(){ var bIsChecked = oOpElem.find('.sfc_op_radio').prop('checked'); if(bIsChecked === false) @@ -522,21 +537,9 @@ $(function() } oOpContentElem.focus(); }); - // - Apply on "enter" key hit - oOpContentElem.on('keyup', function(oEvent){ - // Check operator's radio if not already (typically when focusing in input via "tab" key) - if(oOpElem.find('.sfc_op_radio').prop('checked') === false) - { - oOpElem.find('.sfc_op_radio').prop('checked', true) - } - + // - Mark as draft on key typing + oOpContentElem.on('keydown', function(oEvent){ me._markAsDraft(); - - // Apply if enter key - if(oEvent.key === 'Enter') - { - me._apply(); - } }); oOpElem.find('.sfc_op_content').append(oOpContentElem); diff --git a/js/search/search_form_criteria_enum.js b/js/search/search_form_criteria_enum.js index 02e7b2610..eae65f3c1 100644 --- a/js/search/search_form_criteria_enum.js +++ b/js/search/search_form_criteria_enum.js @@ -129,7 +129,7 @@ $(function() }); // - Filter - oFilterElem.find('input').on('keyup focus', function(oEvent){ + oFilterElem.find('input').on('keydown focus', function(oEvent){ // TODO: Move on values with up and down arrow keys; select with space or enter. var sFilter = $(this).val(); diff --git a/js/search/search_form_criteria_numeric.js b/js/search/search_form_criteria_numeric.js index a03c56451..e9aa1c00f 100644 --- a/js/search/search_form_criteria_numeric.js +++ b/js/search/search_form_criteria_numeric.js @@ -127,21 +127,9 @@ $(function() oOpContentElemFrom.focus(); }); // - Apply on "enter" key hit - //todo: this could be refactored - oOpContentElem.on('keyup', function(oEvent){ - // Check operator's radio if not already (typically when focusing in input via "tab" key) - if(oOpElem.find('.sfc_op_radio').prop('checked') === false) - { - oOpElem.find('.sfc_op_radio').prop('checked', true) - } - + // TODO: this could be refactored + oOpContentElem.on('keydown', function(oEvent){ me._markAsDraft(); - - // Apply if enter key - if(oEvent.key === 'Enter') - { - me._apply(); - } }); oOpElem.find('.sfc_op_content').append(oOpContentElem); @@ -201,7 +189,7 @@ $(function() this._super(oOpElem, sOpIdx, oOp); oOpElem.addClass('force_hide') - //TODO: move this into the abstract widget + //TODO: Move this into the abstract widget // DOM element oDropdownElem = this.element.find('select.dropdown_group_'+oOp.dropdown_group); @@ -221,7 +209,7 @@ $(function() // Create DOM element from template var oOpElemDropdown = $(this._getOperatorTemplate()).uniqueId(); - //todo : if this code is keeped, the radio mustr have an id and the label need to point to it + // TODO: If this code is keeped, the radio must have an id and the label need to point to it oOpElemDropdown .addClass('sfc_fg_operator_dropdown_group') .attr('data-operator-code', 'dropdown_group') @@ -232,14 +220,7 @@ $(function() .val(sOpIdx) .end() .on('click', function(oEvent){ - var bIsChecked = oOpElemDropdown.find('.sfc_op_radio').prop('checked'); - - if(bIsChecked === false) - { - oOpElemDropdown.find('.sfc_op_radio').prop('checked', true); - me._markAsDraft(); - } - oOpElemDropdown.find('input[type="text"]:first').focus(); + //oOpElemDropdown.find('input[type="text"]:first').focus(); }) .appendTo(this.element.find('.sfc_fg_operators')) ; diff --git a/js/search/search_form_handler.js b/js/search/search_form_handler.js index 5176cf51c..48702ea26 100644 --- a/js/search/search_form_handler.js +++ b/js/search/search_form_handler.js @@ -71,7 +71,7 @@ $(function() elements: { message_area: null, - active_criterion: null, + criterion_area: null, more_criterion: null, results_area: null, }, @@ -160,7 +160,7 @@ $(function() }] }; // - Retrieve criterion - this.elements.active_criterion.find('.search_form_criteria').each(function(){ + this.elements.criterion_area.find('.search_form_criteria').each(function(){ var oCriteriaData = $(this).triggerHandler('itop.search.criteria.get_data'); oCriterion['or'][0]['and'].push(oCriteriaData); }); @@ -205,7 +205,7 @@ $(function() // - Close all criterion _closeAllCriterion: function() { - this.elements.active_criterion.find('.search_form_criteria').each(function(){ + this.elements.criterion_area.find('.search_form_criteria').each(function(){ $(this).triggerHandler('itop.search.criteria.close'); }); }, @@ -255,13 +255,12 @@ $(function() oCriterionAreaElem = $('
').appendTo(this.element); } oCriterionAreaElem.addClass('sf_criterion_area'); + this.elements.criterion_area = oCriterionAreaElem; - // Clean area + // Clean area oCriterionAreaElem .html('') - .append('
') .append('
'); - this.elements.active_criterion = oCriterionAreaElem.find('.sf_active_criterion'); this.elements.more_criterion = oCriterionAreaElem.find('.sf_more_criterion'); // Prepare content @@ -386,6 +385,8 @@ $(function() // - Prepare results area _prepareResultsArea: function() { + var me = this; + var oResultAreaElem; // Build area element @@ -402,11 +403,22 @@ $(function() } else { - oResultAreaElem = $('
').insertAfter(this.element.closest('.display_block')); + oResultAreaElem = $('
').insertAfter(this.element.closest('.display_block')); } } oResultAreaElem.addClass('sf_results_area'); + // Make placeholder if nothing yet + if(oResultAreaElem.html() === '') + { + // TODO: Make a good UI for this POC. + // TODO: Translate sentence. + oResultAreaElem.html('

Add some criterion on the search box or click the search button to view the objects.

'); + oResultAreaElem.find('button').on('click', function(){ + me._onSubmitClick(); + }); + } + this.elements.results_area = oResultAreaElem; }, @@ -440,7 +452,7 @@ $(function() // Create DOM element var oCriteriaElem = $('
') .addClass('sf_criteria') - .appendTo(this.elements.active_criterion); + .insertBefore(this.elements.more_criterion); // Instanciate widget $.itop[sWidgetName](oData, oCriteriaElem);