composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-20 07:42:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

Advanced search: WIP POC, UI/UX.

Browse Source 
SVN:b1162[5452]
This commit is contained in:
Guillaume Lajarige
2018-03-16 15:12:25 +00:00
parent 187f7e591e
commit 52f56e1bb0
4 changed files with 68 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
css/light-grey.css
View File

@@ -765,16 +765,21 @@ input.dp-applied {
background-color: #3f7294;
/* Pictogram */
}
.search_form_handler .sf_title > span {
.search_form_handler .sf_title .sft_picto {
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: all 0.4s ease-in-out;
}
.search_form_handler .sf_criterion_area {
/*display: none;*/

11
css/light-grey.scss
View File

@@ -854,17 +854,24 @@ input.dp-applied {
background-color: $box-blue-border-color;
/* Pictogram */
> span{
.sft_picto{
margin-right: 10px;
}
.sft_refresh,
.sft_toggler{
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;
transition: all 0.4s ease-in-out;
}
}
.sf_criterion_area{

7
js/search/search_form_criteria.js
View File

@@ -304,9 +304,12 @@ $(function()
.append('<div class="sfc_form_group"><div class="sfc_fg_operators"></div><div class="sfc_fg_buttons"></div></div>');
// Bind events
// Note: No event to handle criteria closing when clicking outside of it as it is already handle by the form handler.
// - Toggler
this.element.find('.sfc_toggle, .sfc_title').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
// First memorize if current criteria is close
var bOpen = !me.element.hasClass('opened');
// Then close every criterion
@@ -323,7 +326,9 @@ $(function()
{
this.element.find('.sfc_header').append('<span class="sfc_close"><a class="fa fa-times" href="#"></a></span>');
this.element.find('.sfc_close').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
me._remove();
});
}
@@ -345,8 +350,6 @@ $(function()
{
this._closeAll();
this._open();
// 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

61
js/search/search_form_handler.js
View File

@@ -139,9 +139,6 @@ $(function()
});
// Criteria events
this.element.on('itop.search.criteria.opening', function(oEvent, oData){
me._onCriteriaOpening(oData);
});
this.element.on('itop.search.criteria.value_changed', function(oEvent, oData){
me._onCriteriaValueChanged(oData);
});
@@ -175,11 +172,6 @@ $(function()
// - Open / Close more criterion menu
_openMoreCriterion: function()
{
// Close all criterion
this.elements.active_criterion.find('.search_form_criteria').each(function(){
$(this).triggerHandler('itop.search.criteria.close');
});
// Open more criterion menu
// - Open it first
this.elements.more_criterion.addClass('opened');
@@ -210,6 +202,13 @@ $(function()
this._openMoreCriterion();
}
},
// - Close all criterion
_closeAllCriterion: function()
{
this.elements.active_criterion.find('.search_form_criteria').each(function(){
$(this).triggerHandler('itop.search.criteria.close');
});
},
// DOM helpers
// - Prepare form area
@@ -217,14 +216,21 @@ $(function()
{
var me = this;
// Events
// - Refresh icon
this.element.find('.sft_refresh').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
me._submit();
});
// - Toggle icon
// TODO: UX Improvment
// Note: Would be better to toggle by clicking on the whole title, but we have an issue with <select> on abstract classes.
this.element.find('.sft_toggler').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
me.element.find('.sf_criterion_area').slideToggle('fast');
me.element.toggleClass('opened');
});
@@ -320,14 +326,46 @@ $(function()
}
// Bind events
// - Open / close menu
// - Close menu on click anywhere else
// - Intercept click to avoid propagation (mostly used for closing it when clicking outside of it)
$('body').on('click', function(oEvent){
// Prevent propagation to parents and therefore multiple attempts to close it
oEvent.stopPropagation();
// If not more menu, close all criterion
if($(oEvent.target).closest('.sf_more_criterion').length > 0)
{
me._closeAllCriterion();
}
else
{
// If criteria, close more menu & all criterion but me
if($(oEvent.target).closest('.search_form_criteria').length > 0)
{
me._closeMoreCriterion();
// All criterion but me is already handle by the criterion, no callback needed.
}
// If not criteria, close more menu & all criterion
else
{
me._closeMoreCriterion();
me._closeAllCriterion();
}
}
});
this.elements.more_criterion.find('.sfm_header').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
me._toggleMoreCriterion();
});
// - Add criteria
this.elements.more_criterion.find('.sfm_field').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
// Prevent propagation to not close the opening criteria
oEvent.stopPropagation();
// Prepare new criterion data (as already opened to increase UX)
var oData = {
'ref': $(this).attr('data-field-ref'),
@@ -336,7 +374,6 @@ $(function()
// Add criteria but don't submit form as the user has not specified the value yet.
me._addCriteria(oData);
me._closeMoreCriterion();
});
},
// - Prepare results area
@@ -440,10 +477,6 @@ $(function()
return 'search_form_criteria' + '_' + (($.itop['search_form_criteria_'+sType] !== undefined) ? sType : 'raw');
},
// Criteria handlers
_onCriteriaOpening: function(oData)
{
this._closeMoreCriterion();
},
_onCriteriaValueChanged: function(oData)
{
this._updateSearch();