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

Advanced search: WIP POC, UI/UX.

Browse Source 
SVN:b1162[5434]
This commit is contained in:
Guillaume Lajarige
2018-03-15 13:58:42 +00:00
parent a03a4af1e6
commit 87ed90a825
7 changed files with 282 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
application/nicewebpage.class.inc.php
View File

@@ -55,6 +55,7 @@ class NiceWebPage extends WebPage
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/search/search_form_criteria_raw.js');
$this->add_linked_script(utils::GetAbsoluteUrlAppRoot().'js/search/search_form_criteria_string.js');
// TODO: Remove
$this->add_dict_entry('UI:Search:Criterion:MoreMenu:AddCriteria');
$this->add_dict_entry('UI:Search:Criteria:Operator:Default:Empty');
$this->add_dict_entry('UI:Search:Criteria:Operator:Default:NotEmpty');
$this->add_dict_entry('UI:Search:Criteria:Operator:Default:Equals');

101
css/light-grey.css
View File

@@ -779,10 +779,16 @@ div.HRDrawer {
/* More criterion */
}
.search_form_handler .sf_criterion_area .sf_active_criterion, .search_form_handler .sf_criterion_area .sf_more_criterion {
position: relative;
display: inline-block;
}
.search_form_handler .sf_criterion_area .sf_more_criterion, .search_form_handler .sf_criterion_area .search_form_criteria {
position: relative;
.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfc_header, .search_form_handler .sf_criterion_area .search_form_criteria.opened .sfm_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_header {
border-bottom: none !important;
box-shadow: none !important;
padding-bottom: 13px;
/* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */
}
.search_form_handler .sf_criterion_area .search_form_criteria > *, .search_form_handler .sf_criterion_area .sf_more_criterion > * {
padding: 7px 8px;
vertical-align: top;
background-color: #d6e8ef;
@@ -791,24 +797,40 @@ div.HRDrawer {
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group, .search_form_handler .sf_criterion_area .sf_more_criterion .sfc_form_group, .search_form_handler .sf_criterion_area .search_form_criteria .sfm_content, .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
position: absolute;
z-index: -1;
min-width: 100%;
left: 0px;
margin-top: -1px;
}
.search_form_handler .sf_criterion_area .search_form_criteria {
position: relative;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
/* Non editable criteria */
/* Draft criteria (modifications not applied) */
/* Opened criteria (form group displayed) */
/* Top left corner icons */
/* Special criterion processing */
}
.search_form_handler .sf_criterion_area .search_form_criteria.locked {
background-color: #f1f1f1;
}
.search_form_handler .sf_criterion_area .search_form_criteria.draft {
.search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_header, .search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_form_group {
border-style: dashed;
}
.search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_title {
font-style: italic;
}
.search_form_handler .sf_criterion_area .search_form_criteria.opened {
z-index: 1;
/* To be over other criterion */
}
.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_form_group {
display: block;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_close, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
position: absolute;
top: 7px;
@@ -832,47 +854,44 @@ div.HRDrawer {
.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 */
display: none;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened {
display: block;
margin-top: 5px;
/* Show only first operator in simple mode */
/* Show all operators in advanced mode */
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators {
font-size: 12px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator {
/* Common operators for most criteria types processing*/
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator > label {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator > label {
line-height: 20px;
white-space: nowrap;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator > label > * {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator > label > * {
display: inline-block;
vertical-align: middle;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator .sfc_op_radio {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_op_radio {
width: 12px;
margin: 0px;
margin-right: 7px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_equals .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_contains .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_starts_with .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_name {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_equals .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_contains .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_starts_with .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_name {
width: 90px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_equals .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_contains .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_starts_with .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_content input {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_equals .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_contains .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_starts_with .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_content input {
width: 130px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_apply, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_cancel {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_apply, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_cancel {
margin-top: 8px;
padding: 3px 6px;
font-size: 11px;
/* Not bold, so it looks like 10px/bold of more/less buttons */
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_apply {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_apply {
margin-right: 5px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_more, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_less {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_more, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_less {
position: absolute;
bottom: 4px;
right: 0px;
@@ -883,31 +902,31 @@ div.HRDrawer {
border: none;
background-color: transparent;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_more > span, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_less > span {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_more > span, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_less > span {
margin-left: 3px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operator:not(:first-of-type), .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operator:first-of-type .sfc_op_radio {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operator:not(:first-of-type), .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operator:first-of-type .sfc_op_radio {
display: none;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_less {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_less {
display: none;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_more {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_more {
display: inline-block;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_operator {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_operator {
margin-bottom: 3px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_operator:last-of-type {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_operator:last-of-type {
margin-bottom: 0px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_operator:not(:first-of-type), .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_operator:first-of-type .sfc_op_radio {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_operator:not(:first-of-type), .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_operator:first-of-type .sfc_op_radio {
display: inherit;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_less {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_less {
display: inline-block;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_more {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.advanced .sfc_fg_more {
display: none;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw .sfc_title {
@@ -916,17 +935,27 @@ div.HRDrawer {
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw .sfc_form_group {
display: none;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sf_mc_list {
position: absolute;
max-height: 420px;
margin: 0px;
top: 100%;
left: 0px;
overflow-y: auto;
background-color: #d6e8ef;
border: 1px solid #1c94c4;
.search_form_handler .sf_criterion_area .sf_more_criterion.opened {
z-index: 2;
/* To be over criterion */
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sf_mc_list .sf_mc_field {
.search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_content {
display: inherit;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_title {
margin-right: 7px;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_icon {
color: #1c94c4;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
display: none;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_list {
max-height: 420px;
overflow-y: auto;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_list .sfm_field {
cursor: pointer;
white-space: nowrap;
}

247
css/light-grey.scss
View File

@@ -860,23 +860,44 @@ div.HRDrawer {
.sf_criterion_area{
/* Common style between criterion and more criterion */
.sf_active_criterion,
.sf_more_criterion{
.sf_more_criterion {
position: relative;
display: inline-block;
}
.sf_more_criterion,
.search_form_criteria{
position: relative;
padding: 7px 8px;
vertical-align: top;
background-color: $box-blue-bg-color;
color: $box-blue-color;
border: $box-blue-border;
border-radius: $box-blue-radius;
box-shadow: $box-shadow-regular;
.search_form_criteria,
.sf_more_criterion {
&.opened{
.sfc_header,
.sfm_header{
border-bottom: none !important;
box-shadow: none !important;
padding-bottom: 13px; /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */
}
}
> *{
padding: 7px 8px;
vertical-align: top;
background-color: $box-blue-bg-color;
color: $box-blue-color;
border: $box-blue-border;
border-radius: $box-blue-radius;
box-shadow: $box-shadow-regular;
}
.sfc_form_group,
.sfm_content{
position: absolute;
z-index: -1;
min-width: 100%;
left: 0px;
margin-top: -1px;
}
}
/* Criteria tags */
.search_form_criteria{
position: relative;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
@@ -887,12 +908,23 @@ div.HRDrawer {
}
/* Draft criteria (modifications not applied) */
&.draft{
border-style: dashed;
.sfc_header,
.sfc_form_group{
border-style: dashed;
}
.sfc_title{
font-style: italic;
}
}
/* Opened criteria (form group displayed) */
&.opened{
z-index: 1; /* To be over other criterion */
.sfc_form_group{
display: block;
}
}
/* Top left corner icons */
.sfc_close,
@@ -922,106 +954,102 @@ div.HRDrawer {
/* Form group (operators) is displayed only when the criteria is toggled to opened state */
display: none;
&.opened{
display: block;
margin-top: 5px;
.sfc_fg_operators{
font-size: 12px;
.sfc_fg_operators{
font-size: 12px;
.sfc_fg_operator{
> label{
line-height: 20px;
white-space: nowrap;
.sfc_fg_operator{
> label{
line-height: 20px;
> *{
display: inline-block;
vertical-align: middle;
}
> *{
display: inline-block;
vertical-align: middle;
}
}
.sfc_op_radio{
width: 12px;
margin: 0px;
margin-right: 7px;
.sfc_op_radio{
width: 12px;
margin: 0px;
margin-right: 7px;
}
/* Common operators for most criteria types processing*/
&.sfc_fg_operator_equals,
&.sfc_fg_operator_contains,
&.sfc_fg_operator_starts_with,
&.sfc_fg_operator_ends_with{
.sfc_op_name{
width: 90px;
}
/* Common operators for most criteria types processing*/
&.sfc_fg_operator_equals,
&.sfc_fg_operator_contains,
&.sfc_fg_operator_starts_with,
&.sfc_fg_operator_ends_with{
.sfc_op_name{
width: 90px;
}
.sfc_op_content{
input{
width: 130px;
}
.sfc_op_content{
input{
width: 130px;
}
}
}
}
}
.sfc_fg_apply,
.sfc_fg_cancel{
margin-top: 8px;
padding: 3px 6px;
font-size: 11px; /* Not bold, so it looks like 10px/bold of more/less buttons */
}
.sfc_fg_apply{
margin-right: 5px;
.sfc_fg_apply,
.sfc_fg_cancel{
margin-top: 8px;
padding: 3px 6px;
font-size: 11px; /* Not bold, so it looks like 10px/bold of more/less buttons */
}
.sfc_fg_apply{
margin-right: 5px;
}
.sfc_fg_more,
.sfc_fg_less{
position: absolute;
bottom: 4px;
right: 0px;
cursor: pointer;
color: $box-blue-border-color;
font-size: 10px;
font-weight: bold;
border: none;
background-color: transparent;
> span{
margin-left: 3px;
}
}
.sfc_fg_more,
.sfc_fg_less{
position: absolute;
bottom: 4px;
right: 0px;
cursor: pointer;
color: $box-blue-border-color;
font-size: 10px;
font-weight: bold;
border: none;
background-color: transparent;
/* Show only first operator in simple mode */
.sfc_fg_operator:not(:first-of-type),
.sfc_fg_operator:first-of-type .sfc_op_radio{
display: none;
}
.sfc_fg_less{
display: none;
}
.sfc_fg_more{
display: inline-block;
}
> span{
margin-left: 3px;
/* Show all operators in advanced mode */
&.advanced{
.sfc_fg_operator{
margin-bottom: 3px;
&:last-of-type{
margin-bottom: 0px;
}
}
/* Show only first operator in simple mode */
.sfc_fg_operator:not(:first-of-type),
.sfc_fg_operator:first-of-type .sfc_op_radio{
display: none;
display: inherit;
}
.sfc_fg_less{
display: none;
}
.sfc_fg_more{
display: inline-block;
}
/* Show all operators in advanced mode */
&.advanced{
.sfc_fg_operator{
margin-bottom: 3px;
&:last-of-type{
margin-bottom: 0px;
}
}
.sfc_fg_operator:not(:first-of-type),
.sfc_fg_operator:first-of-type .sfc_op_radio{
display: inherit;
}
.sfc_fg_less{
display: inline-block;
}
.sfc_fg_more{
display: none;
}
.sfc_fg_more{
display: none;
}
}
}
@@ -1039,19 +1067,34 @@ div.HRDrawer {
/* More criterion */
.sf_more_criterion{
.sf_mc_list{
position: absolute;
max-height: 420px;
margin: 0px;
top: 100%;
left: 0px;
overflow-y: auto;
background-color: $box-blue-bg-color;
border: $box-blue-border;
&.opened{
z-index: 2; /* To be over criterion */
.sf_mc_field{
cursor: pointer;
white-space: nowrap;
.sfm_content{
display: inherit;
}
}
.sfm_toggler{
.sfm_tg_title{
margin-right: 7px;
}
.sfm_tg_icon{
color: $box-blue-border-color;
}
}
.sfm_content{
display: none;
.sfm_list{
max-height: 420px;
overflow-y: auto;
.sfm_field{
cursor: pointer;
white-space: nowrap;
}
}
}
}

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

@@ -1372,6 +1372,7 @@ When associated with a trigger, each action is given an "order" number, specifyi
'UI:UploadNotSupportedInThisMode' => 'The modification of images or files is not supported in this mode.',
// TODO: Reorganize those entries with other search entries and make entries for other languages.
'UI:Search:Criterion:MoreMenu:AddCriteria' => 'Add new criteria',
'UI:Search:Criteria:Operator:Default:Empty' => 'Is empty',
'UI:Search:Criteria:Operator:Default:NotEmpty' => 'Is not empty',
'UI:Search:Criteria:Operator:Default:Equals' => 'Equals:',

33
js/search/search_form_criteria.js
View File

@@ -165,11 +165,23 @@ $(function()
_open: function()
{
this._resetOperators();
this.element.find('.sfc_form_group, .sfc_toggle').addClass('opened');
this.element.addClass('opened');
// 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');
},
_close: function()
{
this.element.find('.sfc_form_group, .sfc_toggle').removeClass('opened');
this.element.removeClass('opened');
this._unmarkAsDraft();
},
_closeAll: function()
@@ -273,15 +285,14 @@ $(function()
// Prepare base DOM structure
this.element
.append('<div class="sfc_title"></div>')
.append('<div class="sfc_form_group"><div class="sfc_fg_operators"></div><div class="sfc_fg_buttons"></div></div>')
.append('<span class="sfc_toggle"><a class="fa fa-caret-down" href="#"></a></span>');
.append('<div class="sfc_header"><div class="sfc_title"></div><span class="sfc_toggle"><a class="fa fa-caret-down" href="#"></a></span></div>')
.append('<div class="sfc_form_group"><div class="sfc_fg_operators"></div><div class="sfc_fg_buttons"></div></div>');
// Bind events
// - Toggler
this.element.find('.sfc_toggle, .sfc_title').on('click', function(){
// First memorize if current criteria is close
var bOpen = !me.element.find('.sfc_toggle').hasClass('opened');
var bOpen = !me.element.hasClass('opened');
// Then close every criterion
me._closeAll();
// Finally open current criteria if necessary
@@ -294,14 +305,14 @@ $(function()
// Removable / locked decoration
if(this.options.is_removable === true)
{
this.element.append('<span class="sfc_close"><a class="fa fa-times" href="#"></a></span>');
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(){
me._remove();
});
}
else
{
this.element.append('<div class="sfc_locked"><span class="fa fa-lock"></span></div>');
this.element.find('.sfc_header').append('<span class="sfc_locked"><span class="fa fa-lock"></span></span>');
}
// Form group
@@ -315,8 +326,10 @@ $(function()
// Init opened to improve UX (toggle & focus in main operator's input)
if(this.options.init_opened === true)
{
this.element.find('.sfc_toggle').trigger('click');
this.element.find('.sfc_fg_operator:first .sfc_op_content input:first').trigger('click').trigger('focus');
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

2
js/search/search_form_criteria_raw.js
View File

@@ -56,6 +56,8 @@ $(function()
this.element.find('.sfc_toggle').remove();
this.element.find('.sfc_toggle, .sfc_title').off('click');
// Force close as it has no sense either
this._close();
},
_prepareOperators: function()
{

56
js/search/search_form_handler.js
View File

@@ -164,6 +164,19 @@ $(function()
// No need to update base OQL and fields
},
// - Open / Close more criterion menu
_openMoreCriterion: function()
{
this.elements.more_criterion.addClass('opened');
},
_closeMoreCriterion: function()
{
this.elements.more_criterion.removeClass('opened');
},
_toggleMoreCriterion: function()
{
this.elements.more_criterion.toggleClass('opened');
},
// DOM helpers
// - Prepare criterion area
@@ -186,7 +199,7 @@ $(function()
oCriterionAreaElem
.html('')
.append('<div class="sf_active_criterion"></div>')
.append('<div class="sf_more_criterion"><span class="sf_mc_toggler fa fa-plus"></span><ul class="sf_mc_list"></ul></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');
@@ -216,37 +229,53 @@ $(function()
{
var me = this;
// Add fields
// Header part
var oHeaderElem = $('<div class="sfm_header"></div>')
.append('<a class="sfm_toggler" href="#"><span class="sfm_tg_title">' + Dict.S('UI:Search:Criterion:MoreMenu:AddCriteria') + '</span><span class="sfm_tg_icon fa fa-plus"></span></a>')
.appendTo(this.elements.more_criterion);
// Content part
var oContentElem = $('<div class="sfm_content"></div>')
.appendTo(this.elements.more_criterion);
// - Add list
var oListElem = $('<ul class="sfm_list"></ul>')
.appendTo(oContentElem);
// - Add fields
// TODO: Find a widget to handle dropdown menu
// - From "search" zlist
for(var sFieldRef in this.options.search.fields.zlist)
{
var oField = this.options.search.fields.zlist[sFieldRef];
var oFieldElem = $('<li></li>')
.addClass('sf_mc_field')
.addClass('sfm_field')
.attr('data-field-ref', sFieldRef)
.text(oField.label);
this.elements.more_criterion.find('> .sf_mc_list').append(oFieldElem);
oListElem.append(oFieldElem);
}
// - Others
if(this.options.search.fields.others !== undefined)
{
this.elements.more_criterion.find('> .sf_mc_list').append('<li>==================</li>');
this.elements.more_criterion.find('> .sf_mc_list').append('<li>|| TODO: Better separation ||</li>');
this.elements.more_criterion.find('> .sf_mc_list').append('<li>==================</li>');
oListElem.append('<li>==================</li>');
oListElem.append('<li>|| TODO: Better separation ||</li>');
oListElem.append('<li>==================</li>');
for(var sFieldRef in this.options.search.fields.others)
{
var oField = this.options.search.fields.others[sFieldRef];
var oFieldElem = $('<li></li>')
.addClass('sf_mc_field')
.addClass('sfm_field')
.attr('data-field-ref', sFieldRef)
.text(oField.label);
this.elements.more_criterion.find('> .sf_mc_list').append(oFieldElem);
oListElem.append(oFieldElem);
}
}
// Bind events
this.elements.more_criterion.find('.sf_mc_field').on('click', function(){
// - Open / close menu
this.elements.more_criterion.find('.sfm_header').on('click', function(){
me._toggleMoreCriterion();
});
// - Add criteria
this.elements.more_criterion.find('.sfm_field').on('click', function(){
// Prepare new criterion data (as already opened to increase UX)
var oData = {
'ref': $(this).attr('data-field-ref'),
@@ -255,6 +284,7 @@ $(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
@@ -419,7 +449,11 @@ $(function()
var oListParams = {};
if(this.options.data_config_list_selector !== null)
{
// TODO: What ?
var sExtraParams = $(this.options.data_config_list_selector).data('sExtraParams');
if(sExtraParams !== undefined)
{
oListParams = JSON.parse(sExtraParams);
}
}
$.extend(oListParams, this.options.list_params);
oData.list_params = JSON.stringify(oListParams);