composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 02:28:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Advanced search: WIP POC, UI/UX.

Browse Source 
SVN:b1162[5471]
This commit is contained in:
Guillaume Lajarige
2018-03-20 14:17:08 +00:00
parent 1301aa5c35
commit 27b9748f86
6 changed files with 15 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/light-grey.css
View File

@@ -854,14 +854,12 @@ input.dp-applied {
transition: all 0.3s ease-in-out;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title {
padding-right: 35px;
cursor: pointer;
/* TODO: Uncomment to try fixed width criteria tabs */
max-width: 240px;
padding-right: 25px;
padding-right: 30px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group {
/* Form group (operators) is displayed only when the criteria is toggled to opened state */

6
css/light-grey.scss
View File

@@ -960,14 +960,12 @@ input.dp-applied {
}
.sfc_title{
padding-right: 35px;
cursor: pointer;
/* TODO: Uncomment to try fixed width criteria tabs */
max-width: 240px;
padding-right: 25px;
padding-right: 30px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.sfc_form_group{
/* Form group (operators) is displayed only when the criteria is toggled to opened state */

5
dictionaries/en.dictionary.itop.ui.php
View File

@@ -1387,12 +1387,15 @@ When associated with a trigger, each action is given an "order" number, specifyi
'UI:Search:Toggle' => 'Minimize / Expand',
'UI:Search:Criterion:MoreMenu:AddCriteria' => 'Add new criteria',
// - Criteria operators
// - Default widget
'UI:Search:Criteria:Operator:Default:Empty' => 'Is empty',
'UI:Search:Criteria:Operator:Default:NotEmpty' => 'Is not empty',
'UI:Search:Criteria:Operator:Default:Equals' => 'Equals:',
// - String widget
'UI:Search:Criteria:Operator:String:Contains' => 'Contains:',
'UI:Search:Criteria:Operator:String:StartsWith' => 'Starts with:',
'UI:Search:Criteria:Operator:String:EndsWith' => 'Ends with:',
// - Numeric widget
'UI:Search:Criteria:Operator:Numeric:Equals' => '=',
'UI:Search:Criteria:Operator:Numeric:GreaterThan' => '>',
'UI:Search:Criteria:Operator:Numeric:GreaterThanOrEquals' => '>=',
@@ -1414,6 +1417,8 @@ When associated with a trigger, each action is given an "order" number, specifyi
'UI:Search:Criteria:Title:ExternalKey:Empty' => '%1$s is defined',
'UI:Search:Criteria:Title:ExternalKey:NotEmpty' => '%1$s is not defined',
'UI:Search:Criteria:Title:ExternalKey:Equals' => '%1$s %2$s',
'UI:Search:Criteria:Title:ExternalKey:In' => '%1$s: %2$s',
'UI:Search:Criteria:Title:ExternalKey:In:Many' => '%1$s: %2$s and %3$s others',
// - Enum widget
'UI:Search:Criteria:Title:Enum:In' => '%1$s: %2$s',
'UI:Search:Criteria:Title:Enum:In:Many' => '%1$s: %2$s and %3$s others',

2
js/search/search_form_criteria.js
View File

@@ -399,7 +399,7 @@ $(function()
// DOM elements
this.element.find('.sfc_fg_buttons')
.append('<button type="button" name="apply" class="sfc_fg_button sfc_fg_apply">' + Dict.S('UI:Button:Apply') + '</button>')
.append('<button type="button" name="cancel" class="sfc_fg_button sfc_fg_cancel">' + Dict.S('UI:Button:Cancel') + '</button>')
.append('<button type="button" name="cancel" class="sfc_fg_button sfc_fg_cancel">' + Dict.S('UI:Button:Close') + '</button>')
.append('<button type="button" name="more" class="sfc_fg_button sfc_fg_more">' + Dict.S('UI:Button:More') + '<span class="fa fa-angle-double-down"></span></button>')
.append('<button type="button" name="less" class="sfc_fg_button sfc_fg_less">' + Dict.S('UI:Button:Less') + '<span class="fa fa-angle-double-up"></span></button>');

99
js/search/search_form_criteria_external_key.js
View File

@@ -4,13 +4,13 @@ $(function()
{
// the widget definition, where 'itop' is the namespace,
// 'search_form_criteria_external_key' the widget name
$.widget( 'itop.search_form_criteria_external_key', $.itop.search_form_criteria,
$.widget( 'itop.search_form_criteria_external_key', $.itop.search_form_criteria_enum,
{
// default options
options:
{
// Overload default operator
'operator': '=',
'operator': 'IN',
// Available operators
'available_operators': {
},
@@ -53,100 +53,5 @@ $(function()
// Inherited methods
//------------------
// Protected methods
// - Cinematic
// - Open / close criteria
_open: function()
{
this._super();
// Focus on right input
var oOpElemToFocus;
if(this.element.find('.sfc_form_group').hasClass('advanced'))
{
oOpElemToFocus = this.element.find('.sfc_fg_operator .sfc_op_radio:checked').closest('.sfc_fg_operator');
}
else
{
oOpElemToFocus = this.element.find('.sfc_fg_operator:first');
}
oOpElemToFocus.find('.sfc_op_content :input:first').trigger('click').trigger('focus');
},
// DOM element helpers
// TODO: Remove this function after UX tests
_prepareOperators: function()
{
var me = this;
this._super();
if(this.options.field.allowed_values.values !== undefined)
{
var sSelect = '<select>';
sSelect += '<option value="">' + Dict.S('UI:Combo:SelectValue') + '</option>';
for(var sValCode in this.options.field.allowed_values.values)
{
var sValLabel = this.options.field.allowed_values.values[sValCode];
sSelect += '<option value="' + sValCode + '">' + sValLabel + '</option>';
}
sSelect += '</select>';
this.element.find('.sfc_fg_operator[data-operator-code="equals"] .sfc_op_content').html(sSelect);
}
else
{
this.element.find('.sfc_fg_operator[data-operator-code="equals"] .sfc_op_content').html('Not implemented yet.');
}
this.element.find('.sfc_fg_operator[data-operator-code="equals"] .sfc_op_content select').on('change', function(){
me._apply();
});
},
// Operators helpers
// Reset operator's state
// TODO: Reset operator's state
// _resetEqualsOperator: function(oOpElem)
// {
// // Uncheck toggler
// oOpElem.find('sfc_opc_mc_toggler input').prop('checked', false);
//
// // Clear filter
// oOpElem.find('sfc_opc_mc_filter input').val('');
// },
// Get operator's values
_getEqualsOperatorValues: function(oOpElem)
{
var aValues = [];
var sValue = oOpElem.find('.sfc_op_content select > option:selected').val();
var sLabel = oOpElem.find('.sfc_op_content select > option:selected').text();
if(sValue !== "")
{
aValues.push({value: sValue, label: sLabel});
}
return aValues;
},
// Set operator's values
// TODO: Set operator's values
// _setInOperatorValues: function(oOpElem, aValues)
// {
// if(aValues.length === 0)
// {
// return false;
// }
//
// // Uncheck all allowed values
// oOpElem.find('.sfc_opc_mc_item input').prop('checked', false);
//
// // Re-check allowed values from param
// for(var iIdx in aValues)
// {
// oOpElem.find('.sfc_opc_mc_item[data-value-code="' + aValues[iIdx].value + '"] input').prop('checked', true);
// }
//
// return true;
// },
});
});

3
js/search/search_form_criteria_string.js
View File

@@ -79,15 +79,18 @@ $(function()
{
// Remove starts/ends_with
this.element.find('.sfc_fg_operator[data-operator-code*="with"]').remove();
// Modify contains with a dropdown
this.element.find('.sfc_fg_operator[data-operator-code="contains"] .sfc_op_name')
.html('<select style=" padding: 1px 0px;"><option>Contains</option><option>Starts with</option><option>Ends with</option></select>')
.css('margin-right', '5px');
// Remove click event on dropdown
this.element.find('.sfc_fg_operator[data-operator-code="contains"] .sfc_op_name').on('click', function(oEvent){
oEvent.preventDefault();
oEvent.stopPropagation();
});
this.element.find('.sfc_fg_operator[data-operator-code="contains"] .sfc_op_name select').on('change', function(){
$(this).closest('.sfc_fg_operator').find('.sfc_op_content input:first').trigger('focus');
});