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

Browse Source 
SVN:b1162[5524]
This commit is contained in:
Guillaume Lajarige
2018-03-25 12:21:26 +00:00
parent 440dd90316
commit 8b0d9670f9
5 changed files with 160 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
css/css-variables.scss
View File

@@ -27,11 +27,17 @@ $text-color: #000;
$box-radius: 0px;
$box-shadow-regular: 0 1px 1px rgba(0, 0, 0, 0.15);
// - Boxes
$box-blue-color: #2D2D2D;
$box-blue-bg-color: #f0f3f5;
$box-blue-border-color: #3f7294;
$box-blue-border: 1px solid $box-blue-border-color;
$box-blue-radius: 1px;
//$search-criteria-box-color: #2D2D2D;
//$search-criteria-box-bg-color: #f0f3f5;
//$search-criteria-box-border-color: #3f7294;
//$search-criteria-box-border: 1px solid $search-criteria-box-border-color;
//$search-criteria-box-radius: 1px;
$search-criteria-box-color: #2D2D2D;
$search-criteria-box-picto-color: #E87C1E;
$search-criteria-box-bg-color: #EEEEEE;
$search-criteria-box-border-color: #CCCCCC;
$search-criteria-box-border: 1px solid $search-criteria-box-border-color;
$search-criteria-box-radius: 1px;
// Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0
$version: "v2.4.0";

40
css/light-grey.css
View File

@@ -741,6 +741,7 @@ input.dp-applied {
margin: 0;
color: #fff;
background-color: #3f7294;
cursor: pointer;
/* Pictogram */
}
.search_form_handler .sf_title .sft_picto {
@@ -792,9 +793,9 @@ input.dp-applied {
.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: #f0f3f5;
background-color: #eee;
color: #2d2d2d;
border: 1px solid #3f7294;
border: 1px solid #ccc;
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
@@ -839,7 +840,7 @@ input.dp-applied {
.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;
color: #3f7294;
color: #e87c1e;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_close {
right: 7px;
@@ -913,7 +914,7 @@ input.dp-applied {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_item:hover {
background-color: #fff;
/* TODO: Try with this */
/*background-color: $box-blue-border-color;
/*background-color: $search-criteria-box-border-color;
color: $white;*/
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_items .sfc_opc_mc_item label {
@@ -979,6 +980,9 @@ input.dp-applied {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group:not(.advanced) .hide_on_less {
display: none;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw > * {
border-color: transparent;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw .sfc_title {
cursor: initial;
}
@@ -1019,18 +1023,24 @@ input.dp-applied {
margin-right: 7px;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_icon {
color: #3f7294;
color: #e87c1e;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
display: none;
min-width: 200px;
/* To avoid element going to thin on filter, not very slick */
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_list {
max-height: 420px;
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_lists {
margin: 0px -8px;
padding: 0px 8px;
max-height: 460px;
overflow-x: hidden;
overflow-y: auto;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_list .sfm_field {
cursor: pointer;
white-space: nowrap;
.search_form_handler .sf_list:not(:first-of-type) .sfl_title {
border-top: 1px solid #ddd;
padding-top: 8px;
margin-top: 5px;
}
.search_form_handler .sf_list .sfl_title {
font-weight: bold;
@@ -1047,6 +1057,10 @@ input.dp-applied {
.search_form_handler .sf_list .sfl_items > li:hover {
background-color: #fff;
}
.search_form_handler .sf_list .sfl_items > li.sfl_i_placeholder {
font-style: italic;
opacity: 0.8;
}
.search_form_handler .sf_list .sfl_items > li > label {
display: inline-block;
width: 100%;
@@ -1083,6 +1097,12 @@ input.dp-applied {
.sf_results_area .sf_results_placeholder button > span {
margin-left: 0.5em;
}
.hidden {
display: none !important;
}
.visible {
display: initial !important;
}
.mandatory {
border: 1px solid #f00;
}

56
css/light-grey.scss
View File

@@ -795,7 +795,7 @@ input.dp-applied {
position: relative;
z-index: 10;
font-size: 12px;
border: 1px solid $box-blue-border-color;
border: 1px solid #3F7294;
/* Sizing reset */
*{
@@ -827,7 +827,8 @@ input.dp-applied {
padding: 8px 10px;
margin: 0;
color: #ffffff;
background-color: $box-blue-border-color;
background-color: #3F7294;
cursor: pointer;
/* Pictogram */
.sft_picto{
@@ -882,10 +883,10 @@ input.dp-applied {
> *{
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;
background-color: $search-criteria-box-bg-color;
color: $search-criteria-box-color;
border: $search-criteria-box-border;
border-radius: $search-criteria-box-radius;
box-shadow: $box-shadow-regular;
}
.sfc_form_group,
@@ -941,7 +942,7 @@ input.dp-applied {
.sfc_toggle{
position: absolute;
top: 7px;
color: $box-blue-border-color;
color: $search-criteria-box-picto-color;
}
.sfc_close{
right: 7px;
@@ -1017,7 +1018,7 @@ input.dp-applied {
&:hover{
background-color: $white;
/* TODO: Try with this */
/*background-color: $box-blue-border-color;
/*background-color: $search-criteria-box-border-color;
color: $white;*/
}
@@ -1063,7 +1064,7 @@ input.dp-applied {
bottom: 4px;
right: 0px;
cursor: pointer;
color: $box-blue-border-color;
color: #3F7294;
font-size: 10px;
font-weight: bold;
border: none;
@@ -1122,6 +1123,9 @@ input.dp-applied {
/* Special criterion processing */
&.search_form_criteria_raw{
> *{
border-color: transparent;
}
.sfc_title{
cursor: initial;
}
@@ -1185,21 +1189,20 @@ input.dp-applied {
margin-right: 7px;
}
.sfm_tg_icon{
color: $box-blue-border-color;
color: $search-criteria-box-picto-color;
}
}
.sfm_content{
display: none;
min-width: 200px; /* To avoid element going to thin on filter, not very slick */
.sfm_list{
max-height: 420px;
.sfm_lists{
margin: 0px -8px;
padding: 0px 8px;
max-height: 460px;
overflow-x: hidden;
overflow-y: auto;
.sfm_field{
cursor: pointer;
white-space: nowrap;
}
}
}
}
@@ -1207,9 +1210,16 @@ input.dp-applied {
/* List helpers */
.sf_list{
&:not(:first-of-type){
.sfl_title{
border-top: 1px solid $gray-lighter;
padding-top: 8px;
margin-top: 5px;
}
}
.sfl_title{
font-weight: bold;
}
.sfl_items{
margin: 5px -8px 0px -8px;
@@ -1223,6 +1233,10 @@ input.dp-applied {
&:hover{
background-color: $white;
}
&.sfl_i_placeholder{
font-style: italic;
opacity: 0.8;
}
> label{
display: inline-block;
@@ -1270,6 +1284,12 @@ input.dp-applied {
}
}
.hidden{
display: none !important;
}
.visible{
display: initial !important;
}
.mandatory {
border: 1px solid #f00;
}

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

@@ -1390,6 +1390,7 @@ When associated with a trigger, each action is given an "order" number, specifyi
'UI:Search:AddCriteria:List:RecentlyUsed:Title' => 'Recently used',
'UI:Search:AddCriteria:List:MostPopular:Title' => 'Most popular',
'UI:Search:AddCriteria:List:Others:Title' => 'Others',
'UI:Search:AddCriteria:List:RecentlyUsed:Placeholder' => 'None yet.',
// - Criteria operators
// - Default widget

93
js/search/search_form_handler.js
View File

@@ -15,6 +15,7 @@ $(function()
'submit_button_selector': null,
'hide_initial_criterion': false, // TODO: What is that?
'endpoint': null,
'init_opened': false,
'search': {
'base_oql': '',
'criterion': [
@@ -175,6 +176,8 @@ $(function()
// Open more criterion menu
// - Open it first
this.elements.more_criterion.addClass('opened');
// - Focus filter
this.elements.more_criterion.find('.sf_filter:first input[type="text"]').focus();
// - Then only check if more menu is to close to the right side (otherwise we might not have the right element's position)
var iFormWidth = this.element.outerWidth();
var iFormLeftPos = this.element.offset().left;
@@ -202,6 +205,18 @@ $(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()
{
@@ -226,18 +241,24 @@ $(function()
this.element.find('.sft_refresh').on('click', function(oEvent){
// Prevent anchor
oEvent.preventDefault();
// Prevent form toggling
oEvent.stopPropagation();
me._submit();
});
// - Toggle icon
// TODO: UX Improvment
// Note: Would be better to toggle by clicking on the whole title, but we have an issue with <select> on abstract classes.
this.element.find('.sft_toggler').on('click', function(oEvent){
// Prevent anchor
this.element.find('.sf_title').on('click', function(oEvent){
// Prevent anchors
oEvent.preventDefault();
me.element.find('.sf_criterion_area').slideToggle('fast');
me.element.toggleClass('opened');
// Prevent toggle on <select>
if(oEvent.target.nodeName.toLowerCase() !== 'select')
{
me.element.find('.sf_criterion_area').slideToggle('fast');
me.element.toggleClass('opened');
}
});
},
// - Prepare criterion area
@@ -303,11 +324,31 @@ $(function()
.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);
// - Add fields from zlist list
// - Lists
var oListsElem = $('<div></div>')
.addClass('sfm_lists')
.appendTo(oContentElem);
// - Add recent fields list
var oRecentsElem = $('<div></div>')
.addClass('sf_list')
.addClass('sf_list_recents')
.appendTo(oListsElem);
$('<div class="sfl_title"></div>')
.text(Dict.S('UI:Search:AddCriteria:List:RecentlyUsed:Title'))
.appendTo(oRecentsElem);
// TODO: Add elements and remove hidden class if there is some.
var oRecentsItemsElem = $('<ul class="sfl_items"></ul>')
.append('<li class="sfl_i_placeholder">' + Dict.S('UI:Search:AddCriteria:List:RecentlyUsed:Placeholder') + '</li>')
.appendTo(oRecentsElem);
// - Add fields from zlist list
var oZlistElem = $('<div></div>')
.addClass('sf_list')
.addClass('sf_list_zlist')
.appendTo(oContentElem);
.appendTo(oListsElem);
$('<div class="sfl_title"></div>')
.text(Dict.S('UI:Search:AddCriteria:List:MostPopular:Title'))
@@ -319,20 +360,21 @@ $(function()
for(var sFieldRef in this.options.search.fields.zlist)
{
var oField = this.options.search.fields.zlist[sFieldRef];
var sFieldTitleAttr = (oField.description !== undefined) ? 'title="' + oField.description + '"' : '';
var oFieldElem = $('<li></li>')
.addClass('sfm_field')
.attr('data-field-ref', sFieldRef)
.append('<label><input type="checkbox" value="' + sFieldRef + '" />' + oField.label + '</label>')
.append('<label ' + sFieldTitleAttr + '><input type="checkbox" value="' + sFieldRef + '" />' + oField.label + '</label>')
.appendTo(oZListItemsElem);
}
// - Add fields remaining
// - Add fields remaining
if(this.options.search.fields.others !== undefined)
{
var oOthersElem = $('<div></div>')
.addClass('sf_list')
.addClass('sf_list_others')
.appendTo(oContentElem);
.appendTo(oListsElem);
$('<div class="sfl_title"></div>')
.text(Dict.S('UI:Search:AddCriteria:List:Others:Title'))
@@ -344,14 +386,22 @@ $(function()
for(var sFieldRef in this.options.search.fields.others)
{
var oField = this.options.search.fields.others[sFieldRef];
var sFieldTitleAttr = (oField.description !== undefined) ? 'title="' + oField.description + '"' : '';
var oFieldElem = $('<li></li>')
.addClass('sfm_field')
.attr('data-field-ref', sFieldRef)
.append('<label><input type="checkbox" value="' + sFieldRef + '" />' + oField.label + '</label>')
.append('<label ' + sFieldTitleAttr + '><input type="checkbox" value="' + sFieldRef + '" />' + oField.label + '</label>')
.appendTo(oOthersItemsElem);
}
}
// - Buttons
var oButtons = $('<div></div>')
.addClass('sfm_buttons')
.append('<button type="button">TOTR: Add</button>')
.append('<button type="button">TOTR: Cancel</button>')
.appendTo(oContentElem);
// Bind events
// - Close menu on click anywhere else
// - Intercept click to avoid propagation (mostly used for closing it when clicking outside of it)
@@ -403,18 +453,20 @@ $(function()
// 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){
// TODO: Move on values with up and down arrow keys; select with space or enter.
// TODO: Hide list if no result on filter.
var sFilter = $(this).val();
// Show / hide items
if(sFilter === '')
{
oContentElem.find('.sfl_items > li').show();
oListsElem.find('.sfl_items > li').show();
oFilterElem.find('.sff_filter').show();
oFilterElem.find('.sff_reset').hide();
}
else
{
oContentElem.find('.sfl_items > li').each(function(){
oListsElem.find('.sfl_items > li:not(.sfl_i_placeholder)').each(function(){
var oRegExp = new RegExp(sFilter, 'ig');
var sValue = $(this).find('input').val();
var sLabel = $(this).text();
@@ -431,6 +483,15 @@ $(function()
oFilterElem.find('.sff_filter').hide();
oFilterElem.find('.sff_reset').show();
}
// Show / hide lists with no visible items
oListsElem.find('.sf_list').each(function(){
$(this).show();
if($(this).find('.sfl_items > li:visible').length === 0)
{
$(this).hide();
}
});
});
oFilterElem.find('.sff_filter').on('click', function(){
oFilterElem.find('input').trigger('focus');
@@ -450,12 +511,18 @@ $(function()
// Prepare new criterion data (as already opened to increase UX)
var oData = {
'ref': $(this).attr('data-field-ref'),
'init_opened': true,
'init_opened': (oEvent.ctrlKey) ? false : true,
};
// Add criteria but don't submit form as the user has not specified the value yet.
me._addCriteria(oData);
});
this.elements.more_criterion.find('.sfm_field input[type="checkbox"]').on('click', function(oEvent){
oEvent.stopPropagation();
// TODO: Show add button
console.log($(this).val(), $(this).prop('checked'));
});
},
// - Prepare results area
_prepareResultsArea: function()