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: WIP POC, UI/UX.

Browse Source 
SVN:b1162[5491]
This commit is contained in:
Guillaume Lajarige
2018-03-22 08:07:50 +00:00
parent 60d6bb79b3
commit 2d9041c045
6 changed files with 68 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/light-grey.css
View File

@@ -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;
}

19
css/light-grey.scss
View File

@@ -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;

43
js/search/search_form_criteria.js
View File

@@ -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);

2
js/search/search_form_criteria_enum.js
View File

@@ -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();

29
js/search/search_form_criteria_numeric.js
View File

@@ -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'))
;

28
js/search/search_form_handler.js
View File

@@ -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 = $('<div></div>').appendTo(this.element);
}
oCriterionAreaElem.addClass('sf_criterion_area');
this.elements.criterion_area = oCriterionAreaElem;
// Clean area
// Clean area
oCriterionAreaElem
.html('')
.append('<div class="sf_active_criterion"></div>')
.append('<div class="sf_more_criterion"></div>');
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 = $('<div></div>').insertAfter(this.element.closest('.display_block'));
oResultAreaElem = $('<div class="display_block"></div>').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('<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(){
me._onSubmitClick();
});
}
this.elements.results_area = oResultAreaElem;
},
@@ -440,7 +452,7 @@ $(function()
// Create DOM element
var oCriteriaElem = $('<div></div>')
.addClass('sf_criteria')
.appendTo(this.elements.active_criterion);
.insertBefore(this.elements.more_criterion);
// Instanciate widget
$.itop[sWidgetName](oData, oCriteriaElem);