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

search widget : widget datetime and numeric => fine tuning the UI

Browse Source 
SVN:b1162[5546]
This commit is contained in:
Bruno Da Silva
2018-03-27 13:19:30 +00:00
parent 9550ec6efd
commit 9e66ef5460
5 changed files with 157 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/light-grey.css
View File

@@ -1017,8 +1017,36 @@ input.dp-applied {
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_dropdown_group select {
width: 88px;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_form_group.advanced .sfc_fg_operator_between {
margin-bottom: 5px;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_between label.sfc_op_content_from_label, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_between label.sfc_op_content_until_label {
width: 90px;
display: inline-block;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_between input {
width: 88px;
width: 130px;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_equals .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_greater_than .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_greater_than_or_equals .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_less_than .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_less_than_or_equals .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_different .sfc_op_name {
width: 90px;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_equals .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_greater_than .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_greater_than_or_equals .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_less_than .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_less_than_or_equals .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_different .sfc_op_content input {
width: 130px;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time .sfc_form_group.advanced .sfc_fg_operator_between, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date .sfc_form_group.advanced .sfc_fg_operator_between {
margin-bottom: 5px;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time .sfc_fg_operator_between_days input, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date .sfc_fg_operator_between_days input {
width: 135px;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time button.ui-datepicker-trigger, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date button.ui-datepicker-trigger {
background: none;
border: none;
height: 100%;
padding: 2px;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date_time button.ui-datepicker-trigger img, .search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_date button.ui-datepicker-trigger img {
vertical-align: middle;
}
.search_form_handler .sf_criterion_area .sf_more_criterion {
margin-right: 10px;

64
css/light-grey.scss
View File

@@ -1046,7 +1046,7 @@ input.dp-applied {
&.sfc_fg_operator_equals,
&.sfc_fg_operator_contains,
&.sfc_fg_operator_starts_with,
&.sfc_fg_operator_ends_with{
&.sfc_fg_operator_ends_with {
.sfc_op_name{
width: 90px;
}
@@ -1123,8 +1123,11 @@ input.dp-applied {
.hide_on_advanced {
display: none;
}
}
&:not(.advanced) {
.hide_on_less {
display: none;
@@ -1168,9 +1171,66 @@ input.dp-applied {
width: 88px;
}
}
.sfc_form_group.advanced {
.sfc_fg_operator_between {
margin-bottom: 5px;
}
}
.sfc_fg_operator_between {
label {
&.sfc_op_content_from_label, &.sfc_op_content_until_label {
width: 90px;
display: inline-block;
}
}
input {
width: 88px;
width: 130px;
}
}
.sfc_fg_operator_equals,
.sfc_fg_operator_greater_than,
.sfc_fg_operator_greater_than_or_equals,
.sfc_fg_operator_less_than,
.sfc_fg_operator_less_than_or_equals,
.sfc_fg_operator_different {
.sfc_op_name{
width: 90px;
}
.sfc_op_content{
input{
width: 130px;
}
}
}
}
&.search_form_criteria_date_time, &.search_form_criteria_date {
.sfc_form_group.advanced {
.sfc_fg_operator_between {
margin-bottom: 5px;
}
}
.sfc_fg_operator_between_days {
//label {
// &.sfc_op_content_from_time_label,
// &.sfc_op_content_until_time_label,
// &.sfc_op_content_from_label,
// &.sfc_op_content_until_label {
// width: 90px;
// display: inline-block;
// }
//}
input {
width: 135px;
}
}
button.ui-datepicker-trigger {
background: none;
border: none;
height: 100%;
padding: 2px;
img {
vertical-align: middle;
}
}
}

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

@@ -1403,12 +1403,12 @@ When associated with a trigger, each action is given an "order" number, specifyi
'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' => '>=',
'UI:Search:Criteria:Operator:Numeric:LessThan' => '<',
'UI:Search:Criteria:Operator:Numeric:LessThanOrEquals' => '<=',
'UI:Search:Criteria:Operator:Numeric:Different' => '≠',
'UI:Search:Criteria:Operator:Numeric:Equals' => 'Equals', // => '=',
'UI:Search:Criteria:Operator:Numeric:GreaterThan' => 'Greater', // => '>',
'UI:Search:Criteria:Operator:Numeric:GreaterThanOrEquals' => 'Greater / equals', // > '>=',
'UI:Search:Criteria:Operator:Numeric:LessThan' => 'Less', // => '<',
'UI:Search:Criteria:Operator:Numeric:LessThanOrEquals' => 'Less / equals', // > '<=',
'UI:Search:Criteria:Operator:Numeric:Different' => 'Different', // => '≠',

142
js/search/search_form_criteria_date_abstract.js
View File

@@ -69,7 +69,7 @@ $(function()
for (var i = 0; i < aInputsParamLength; i++) {
var oInputParam = aInputsParam[i];
var oOpContentElem = $('<span class="sfc_op_content_'+oInputParam.code+'_outer '+(oInputParam.show_on_advanced ? 'hide_on_less' : 'hide_on_advanced')+'"><label class="sfc_op_content_'+oInputParam.code+'_label" for=""> '+Dict.S('UI:Search:Criteria:DateTime:'+oInputParam.code_uc_first)+'</label><input type="text" name="'+oInputParam.code+'" placeholder="'+Dict.S('UI:Search:Criteria:DateTime:Placeholder'+oInputParam.code_uc_first)+'"/></span>');
var oOpContentElem = $('<span class="sfc_op_content_'+oInputParam.code+'_outer '+(oInputParam.show_on_advanced ? 'hide_on_less' : 'hide_on_advanced')+'"><label class="sfc_op_content_'+oInputParam.code+'_label" for=""> '+Dict.S('UI:Search:Criteria:DateTime:'+oInputParam.code_uc_first)+' </label><input type="text" name="'+oInputParam.code+'" placeholder="'+Dict.S('UI:Search:Criteria:DateTime:Placeholder'+oInputParam.code_uc_first)+'"/></span>');
var oInputElem = oOpContentElem
.find('input')
.uniqueId()
@@ -119,11 +119,55 @@ $(function()
// once the inputs are appended into the DOM we can safely use jQuery UI
var fHandleSynchCallback = function(select, bSetDate) {
var selectElem = $(select);
var sSyncedWith = selectElem.data('synced_with');
var oInputParam = selectElem.data('oInputParam');
if (bSetDate)
{
var sDate = selectElem.val().trim();
if ('' == sDate)
{
selectElem[oInputParam.x_picker]('setDate', null);
} else
{
selectElem[oInputParam.x_picker]('setDate', sDate);
}
}
if (sSyncedWith != undefined)
{
var sCode = selectElem.data('code');
var oInputParam = aInputsParam[oInputsParamIndexByCode[sCode]];
var oSyncedInputParam = aInputsParam[oInputsParamIndexByCode[sSyncedWith]];
var oSyncedInputElem = oOpElem.find('input[name="'+sSyncedWith+'"]');
var dSyncedDate = selectElem[oInputParam.x_picker]('getDate');
if (null == dSyncedDate)
{
// oSyncedInputElem.val('');
oSyncedInputElem[oSyncedInputParam.x_picker]('setDate', null);
}
else
{
if (typeof oSyncedInputParam.default_time_add != 'undefined' && oSyncedInputParam.default_time_add)
{
dSyncedDate.setSeconds(dSyncedDate.getSeconds() + oSyncedInputParam.default_time_add);
}
oSyncedInputElem[oSyncedInputParam.x_picker]('setDate', dSyncedDate);
}
}
};
var odatetimepickerOptionsDefault = {
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:mm:ss',
buttonImage: GetAbsoluteUrlAppRoot()+"/images/calendar.png",
buttonImageOnly: true,
// buttonImageOnly: true,
buttonText: "",
showOn:'button',
changeMonth:true,
@@ -132,107 +176,13 @@ $(function()
for (var i = 0; i < aInputsParamLength; i++) {
var oInputParam = aInputsParam[i];
var fHandleSynchCallback = function(select, bSetDate) {
var selectElem = $(select);
var sSyncedWith = selectElem.data('synced_with');
var oInputParam = selectElem.data('oInputParam');
if (bSetDate)
{
var sDate = selectElem.val().trim();
if ('' == sDate)
{
selectElem[oInputParam.x_picker]('setDate', null);
} else
{
selectElem[oInputParam.x_picker]('setDate', sDate);
}
}
if (sSyncedWith != undefined)
{
var sCode = selectElem.data('code');
var oInputParam = aInputsParam[oInputsParamIndexByCode[sCode]];
var oSyncedInputParam = aInputsParam[oInputsParamIndexByCode[sSyncedWith]];
var oSyncedInputElem = oOpElem.find('input[name="'+sSyncedWith+'"]');
var dSyncedDate = selectElem[oInputParam.x_picker]('getDate');
if (null == dSyncedDate)
{
// oSyncedInputElem.val('');
oSyncedInputElem[oSyncedInputParam.x_picker]('setDate', null);
}
else
{
if (typeof oSyncedInputParam.default_time_add != 'undefined' && oSyncedInputParam.default_time_add)
{
dSyncedDate.setSeconds(dSyncedDate.getSeconds() + oSyncedInputParam.default_time_add);
}
oSyncedInputElem[oSyncedInputParam.x_picker]('setDate', dSyncedDate);
}
}
//me._apply();
selectElem[oInputParam.x_picker]('hide');
};
var odatetimepickerOptions = $.extend({}, odatetimepickerOptionsDefault, {
onSelect: function() {
fHandleSynchCallback(this, false);
$(this).focus();
}
// onClose: function(dateText, inst) {
// var selectElem = $(this);
// var sOnCLoseShow = selectElem.data('onclose_show');
//
// // if (typeof oInputParam.onclose_show != 'undefined')
// // {
// // oOpElem.find('input[name="'+oInputParam.onclose_show+'"]')
// // [oInputParam.x_picker]('show')
// // ;
// // }
//
// // if (sOnCLoseShow != undefined && selectElem.is(':visible'))
// // {
// // var oOnCLoseShowInputElem = oOpElem.find('input[name="'+sOnCLoseShow+'"]');
// // oOnCLoseShowInputElem[oInputParam.x_picker]('show');
// // }
//
// },
// onSelect: function(sDateText, oXPicker) {
// var selectElem = $(this);
// var sSyncedWith = selectElem.data('synced_with');
//
//
// if (sSyncedWith != undefined)
// {
// var sCode = selectElem.data('code');
// var oInputParam = aInputsParam[oInputsParamIndexByCode[sCode]];
// var oSyncedInputParam = aInputsParam[oInputsParamIndexByCode[sSyncedWith]];
// var oSyncedInputElem = oOpElem.find('input[name="'+sSyncedWith+'"]');
//
// var dSyncedDate = selectElem[oInputParam.x_picker]('getDate');
//
// if (null == dSyncedDate)
// {
// oSyncedInputElem.val('');
// }
// else
// {
// if (typeof oSyncedInputParam.default_time_add != 'undefined' && oSyncedInputParam.default_time_add)
// {
// dSyncedDate.setSeconds(dSyncedDate.getSeconds() + oSyncedInputParam.default_time_add);
// }
// oSyncedInputElem[oSyncedInputParam.x_picker]('setDate', dSyncedDate);
// }
//
// }
//
// //me._apply();
// selectElem[oInputParam.x_picker]('hide');
// }
});

27
js/search/search_form_criteria_numeric.js
View File

@@ -10,9 +10,14 @@ $(function()
options:
{
// Overload default operator
'operator': '=',
'operator': 'between',
// Available operators
'available_operators': {
'between': {
'label': Dict.S('UI:Search:Criteria:Operator:Numeric:Between'),
'code': 'between',
'rank': 0,
},
'=': {
'label': Dict.S('UI:Search:Criteria:Operator:Numeric:Equals'),//pre-existing, label changed
// 'dropdown_group':1,
@@ -47,11 +52,7 @@ $(function()
'rank': 500,
// 'dropdown_group':1,
},
'between': {
'label': Dict.S('UI:Search:Criteria:Operator:Numeric:Between'),
'code': 'between',
'rank': 600,
},
'empty': {
'rank': 700,//pre-existing, reordered
},
@@ -103,14 +104,14 @@ $(function()
aValues = me._getValues();//TODO : tenir compte du refactoring de la structure
// DOM elements
var oOpContentOuterElemFrom = $('<span class="sfc_op_content_from_outer"><label class="sfc_op_content_from_label" for=""> '+Dict.S('UI:Search:Criteria:Numeric:From')+'</label><input type="number" step="any" name="from" placeholder="'+Dict.S('UI:Search:Criteria:Numeric:PlaceholderFrom')+'"/></span>');
var oOpContentOuterElemFrom = $('<div class="sfc_op_content_from_outer"><label class="sfc_op_content_from_label" for=""> '+Dict.S('UI:Search:Criteria:Numeric:From')+' </label><input type="text" name="from" placeholder="'+Dict.S('UI:Search:Criteria:Numeric:PlaceholderFrom')+'"/></div>');
var oOpContentElemFrom = oOpContentOuterElemFrom.find('input').uniqueId();
oOpContentOuterElemFrom.find('label').attr('for', oOpContentElemFrom.attr('id'));
if (typeof aValues[0] != 'undefined' && typeof aValues[0].value != 'undefined')
{
oOpContentElemFrom.val(aValues[0].value);
}
var oOpContentOuterElemUntil = $('<span class="sfc_op_content_until_outer"><label class="sfc_op_content_until_label" for=""> '+Dict.S('UI:Search:Criteria:Numeric:Until')+'</label><input type="number" step="any" name="until" placeholder="'+Dict.S('UI:Search:Criteria:Numeric:PlaceholderUntil')+'"/></span>');
var oOpContentOuterElemUntil = $('<div class="sfc_op_content_until_outer"><label class="sfc_op_content_until_label" for=""> '+Dict.S('UI:Search:Criteria:Numeric:Until')+' </label><input type="text" name="until" placeholder="'+Dict.S('UI:Search:Criteria:Numeric:PlaceholderUntil')+'"/></div>');
var oOpContentElemUntil = oOpContentOuterElemUntil.find('input').uniqueId();
oOpContentOuterElemUntil.find('label').attr('for', oOpContentElemUntil.attr('id'));
if (typeof aValues[1] != 'undefined' && typeof aValues[1].value != 'undefined')
@@ -212,13 +213,13 @@ $(function()
case (typeof aValues[1].label == 'undefined' ):
var sDictEntrySuffix = ':From';
break;
case (aValues[0].label == '' && aValues[1].label == ''):
case ((typeof aValues[0].label == 'string' && aValues[0].label.trim() == '') && (typeof aValues[1].label == 'string' && aValues[1].label.trim() == '')):
var sDictEntrySuffix = ':All';
break;
case (aValues[0].label == '' ):
case (typeof aValues[0].label == 'string' && aValues[0].label.trim() == ''):
var sDictEntrySuffix = ':Until';
break;
case (aValues[1].label == ''):
case (typeof aValues[1].label == 'string' && aValues[1].label.trim() == ''):
var sDictEntrySuffix = ':From';
break;
default:
@@ -256,11 +257,11 @@ $(function()
if (me.options.operator == 'between')
{
aRawValues = aRawValues.slice(); //clone
if (typeof aRawValues[1] == 'undefined' || typeof aRawValues[1].label == 'undefined' || aRawValues[1].label == '')
if (typeof aRawValues[1] == 'undefined' || typeof aRawValues[1].label == 'undefined' || (typeof aRawValues[1].label == 'string' && aRawValues[1].label.trim() == ''))
{
aRawValues.splice(1, 1);
}
if (typeof aRawValues[0] == 'undefined' || typeof aRawValues[0].label == 'undefined' || aRawValues[0].label == '')
if (typeof aRawValues[0] == 'undefined' || typeof aRawValues[0].label == 'undefined' || (typeof aRawValues[0].label == 'string' && aRawValues[0].label.trim() == ''))
{
aRawValues.splice(0, 1);
}