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

Advanced search: UI/UX WIP.

Browse Source 
SVN:b1162[5525]
This commit is contained in:
Guillaume Lajarige
2018-03-26 06:52:43 +00:00
parent 8b0d9670f9
commit 6ea0ba52d1
4 changed files with 86 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
css/light-grey.css
View File

@@ -745,6 +745,8 @@ input.dp-applied {
/* Pictogram */
}
.search_form_handler .sf_title .sft_picto {
display: none;
/* TODO: Remove this class and the correspondig DOM element if this option is kept. */
margin-right: 10px;
}
.search_form_handler .sf_title .sft_refresh, .search_form_handler .sf_title .sft_toggler {
@@ -1033,10 +1035,22 @@ input.dp-applied {
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_lists {
margin: 0px -8px;
padding: 0px 8px;
max-height: 460px;
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_buttons {
display: none;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_buttons button {
margin-top: 8px;
margin-right: 5px;
padding: 3px 6px;
font-size: 11px;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_buttons button:last-of-type {
margin-right: 0px;
}
.search_form_handler .sf_list:not(:first-of-type) .sfl_title {
border-top: 1px solid #ddd;
padding-top: 8px;

17
css/light-grey.scss
View File

@@ -832,6 +832,7 @@ input.dp-applied {
/* Pictogram */
.sft_picto{
display: none; /* TODO: Remove this class and the correspondig DOM element if this option is kept. */
margin-right: 10px;
}
@@ -1200,10 +1201,24 @@ input.dp-applied {
.sfm_lists{
margin: 0px -8px;
padding: 0px 8px;
max-height: 460px;
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
}
.sfm_buttons{
display: none;
button{
margin-top: 8px;
margin-right: 5px;
padding: 3px 6px;
font-size: 11px;
&:last-of-type{
margin-right: 0px;
}
}
}
}
}
}

77
js/search/search_form_handler.js
View File

@@ -205,18 +205,6 @@ $(function()
this._openMoreCriterion();
}
},
// - Show / hide "add criterions" buttons from more criterion menu
_updateMoreCriterionButtons: function()
{
if(this.elements.more_criterion.find('.sf_list .sfm_field input[type="checkbox"]:checked').length > 0)
{
}
else
{
}
},
// - Close all criterion
_closeAllCriterion: function()
{
@@ -320,16 +308,18 @@ $(function()
.appendTo(this.elements.more_criterion);
// - Filter
var oFilterElem = $('<div class="sf_filter"></div>')
var oFilterElem = $('<div></div>')
.addClass('sf_filter')
.addClass('sfm_filter')
.append('<input type="text" placeholder="' + Dict.S('UI:Search:Value:Filter:Placeholder') + '" /><span class="sff_picto sff_filter fa fa-filter"></span><span class="sff_picto sff_reset fa fa-times"></span>')
.appendTo(oContentElem);
// - Lists
// - Lists container
var oListsElem = $('<div></div>')
.addClass('sfm_lists')
.appendTo(oContentElem);
// - Add recent fields list
// - Recently used list
var oRecentsElem = $('<div></div>')
.addClass('sf_list')
.addClass('sf_list_recents')
@@ -344,7 +334,7 @@ $(function()
.append('<li class="sfl_i_placeholder">' + Dict.S('UI:Search:AddCriteria:List:RecentlyUsed:Placeholder') + '</li>')
.appendTo(oRecentsElem);
// - Add fields from zlist list
// - Search zlist list
var oZlistElem = $('<div></div>')
.addClass('sf_list')
.addClass('sf_list_zlist')
@@ -368,7 +358,7 @@ $(function()
.appendTo(oZListItemsElem);
}
// - Add fields remaining
// - Remaining fields list
if(this.options.search.fields.others !== undefined)
{
var oOthersElem = $('<div></div>')
@@ -396,10 +386,10 @@ $(function()
}
// - Buttons
var oButtons = $('<div></div>')
var oButtonsElem = $('<div></div>')
.addClass('sfm_buttons')
.append('<button type="button">TOTR: Add</button>')
.append('<button type="button">TOTR: Cancel</button>')
.append('<button type="button" name="apply">' + Dict.S('UI:Button:Apply') + '</button>')
.append('<button type="button" name="cancel">' + Dict.S('UI:Button:Cancel') + '</button>')
.appendTo(oContentElem);
// Bind events
@@ -443,12 +433,15 @@ $(function()
}
}
});
// - More criteria toggling
this.elements.more_criterion.find('.sfm_header').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
me._toggleMoreCriterion();
});
// - Filter
// Note: "keyup" event is use instead of "keydown", otherwise, the inpu value would not be set yet.
oFilterElem.find('input').on('keyup focus', function(oEvent){
@@ -501,7 +494,8 @@ $(function()
.val('')
.trigger('focus');
});
// - Add criteria
// - Add one criteria
this.elements.more_criterion.find('.sfm_field').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
@@ -517,11 +511,47 @@ $(function()
// Add criteria but don't submit form as the user has not specified the value yet.
me._addCriteria(oData);
});
// - Add several criterion
this.elements.more_criterion.find('.sfm_field input[type="checkbox"]').on('click', function(oEvent){
// Prevent propagation to field and instant add of the criteria
oEvent.stopPropagation();
// TODO: Show add button
console.log($(this).val(), $(this).prop('checked'));
if(me.elements.more_criterion.find('.sfm_field input[type="checkbox"]:checked').length === 0)
{
oButtonsElem.hide();
}
else
{
oButtonsElem.show();
}
// Put focus back to filter to improve UX.
oFilterElem.find('input').trigger('focus');
});
oButtonsElem.find('button').on('click', function(){
// Add criterion on apply
if($(this).attr('name') === 'apply')
{
me.elements.more_criterion.find('.sfm_field input[type="checkbox"]:checked').each(function(iIdx, oElem){
var oData = {
'ref': $(oElem).closest('.sfm_field').attr('data-field-ref'),
'init_opened': false,
};
me._addCriteria(oData);
});
}
// Clear all
// - Checkboxes
me.elements.more_criterion.find('.sfm_field input[type="checkbox"]:checked').prop('checked', false);
// - Filter
oFilterElem.find('input')
.val('')
.trigger('focus');
// Hide buttons
oButtonsElem.hide();
});
},
// - Prepare results area
@@ -557,6 +587,7 @@ $(function()
// TODO: Translate sentence.
oResultAreaElem.html('<div class="sf_results_placeholder"><p>Add some criterion on the search box or click the search button to view the objects.</p><p><button type="button">Search<span class="fa fa-search"></span></button></p></div>');
oResultAreaElem.find('button').on('click', function(){
// TODO: Bug: Open "Search for CI", change child classe in the dropdown, click the search button. It submit the search for the original child classe, not the current one; whereas a click on the upper right pictogram does. This might be due to the form reloading.
me._onSubmitClick();
});
}

2
sources/application/search/searchform.class.inc.php
View File

@@ -117,7 +117,7 @@ class SearchForm
$sAction = (isset($aExtraParams['action'])) ? $aExtraParams['action'] : utils::GetAbsoluteUrlAppRoot().'pages/UI.php';
$sStyle = (isset($aExtraParams['open']) && ($aExtraParams['open'] == 'true')) ? 'opened' : '';
$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_picto fa fa-search\"></span>" . Dict::Format('UI:SearchFor_Class_Objects', $sClassesCombo) . "<a class=\"sft_toggler fa fa-caret-down pull-right\" href=\"#\" title=\"" . Dict::S('UI:Search:Toggle') . "\"></a><a class=\"sft_refresh fa fa-refresh pull-right\" href=\"#\" title=\"" . Dict::S('UI:Button:Refresh') . "\"></a></h2>\n";
$sHtml .= "<h2 class=\"sf_title\"><span class=\"sft_picto fa fa-search\"></span>" . Dict::Format('UI:SearchFor_Class_Objects', $sClassesCombo) . "<a class=\"sft_toggler fa fa-caret-down pull-right\" href=\"#\" title=\"" . Dict::S('UI:Search:Toggle') . "\"></a><a class=\"sft_refresh fa fa-search pull-right\" href=\"#\" title=\"" . Dict::S('UI:Button:Refresh') . "\"></a></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";
$sHtml .= "</form>\n";