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[5439]
This commit is contained in:
Guillaume Lajarige
2018-03-16 08:08:24 +00:00
parent 156cb03069
commit a1c6e32e28
11 changed files with 172 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
application/displayblock.class.inc.php
View File

@@ -933,21 +933,10 @@ class DisplayBlock
case 'search':
if (!$oPage->IsPrintableVersion())
{
$sStyle = (isset($aExtraParams['open']) && ($aExtraParams['open'] == 'true')) ? 'SearchDrawer' : 'SearchDrawer DrawerClosed';
$sHtml .= "<div id=\"ds_$sId\" class=\"$sStyle\">\n";
$oPage->add_ready_script(
<<<EOF
$("#dh_$sId").click( function() {
$("#ds_$sId").slideToggle('normal', function() { $("#ds_$sId").parent().resize(); FixSearchFormsDisposition(); $("#dh_$sId").trigger('toggle_complete'); } );
$("#dh_$sId").toggleClass('open');
});
EOF
);
$sHtml .= "<div id=\"ds_$sId\" class=\"search_box\">\n";
$aExtraParams['currentId'] = $sId;
$sHtml .= cmdbAbstractObject::GetSearchForm($oPage, $this->m_oSet, $aExtraParams);
$sHtml .= "</div>\n";
$sHtml .= "<div class=\"HRDrawer\"></div>\n";
$sHtml .= "<div id=\"dh_$sId\" class=\"DrawerHandle\">".Dict::S('UI:SearchToggle')."</div>\n";
}
break;

2
core/displayablegraph.class.inc.php
View File

@@ -1439,7 +1439,7 @@ class DisplayableGraph extends SimpleGraph
$aExcludedByClass[get_class($oObj)][] = $oObj->GetKey();
}
$oP->add("<div class=\"not-printable\">\n");
$oP->add("<div id=\"ds_flash\" class=\"SearchDrawer\" style=\"display:none;\">\n");
$oP->add("<div id=\"ds_flash\" class=\"search_box\" style=\"display:none;\">\n");
if (!$oP->IsPrintableVersion())
{
$oP->add_ready_script(

4
css/css-variables.scss
View File

@@ -28,8 +28,8 @@ $box-radius: 0px;
$box-shadow-regular: 0 1px 1px rgba(0, 0, 0, 0.15);
// - Boxes
$box-blue-color: #2D2D2D;
$box-blue-bg-color: #d6e8ef;
$box-blue-border-color: #1c94c4;
$box-blue-bg-color: #f0f3f5;
$box-blue-border-color: #3f7294;
$box-blue-border: 1px solid $box-blue-border-color;
$box-blue-radius: 1px;

94
css/light-grey.css
View File

@@ -704,35 +704,6 @@ input.dp-applied {
}
}
}*/
.DrawerClosed {
display: none;
}
.DrawerHandle {
margin: 0;
padding: 5px;
background: url(../images/drawer-handle.gif) bottom no-repeat transparent;
color: #fff;
cursor: pointer;
text-align: center;
/* center the block */
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
display: block;
font-size: 12px;
}
div.HRDrawer {
height: 5px;
width: 100%;
margin: 0;
background-color: #1c94c4;
margin-top: 10px;
padding: 0;
border: 0;
display: block;
}
.mini_tabs a {
text-decoration: none;
font-weight: bold;
@@ -759,10 +730,18 @@ div.HRDrawer {
}
/* Search forms v2 */
/* TODO: Remove comment before final commit */
.search_box {
box-sizing: border-box;
/* Sizing reset */
}
.search_box * {
box-sizing: border-box;
}
.search_form_handler {
position: relative;
z-index: 10;
font-size: 12px;
border: 1px solid #3f7294;
/* Sizing reset */
/* Hyperlink reset */
}
@@ -773,7 +752,30 @@ div.HRDrawer {
color: inherit;
text-decoration: none;
}
.search_form_handler.opened .sf_title .sft_toggler {
transform: rotateX(180deg);
}
.search_form_handler.opened .sf_criterion_area {
/*display: inherit;*/
}
.search_form_handler .sf_title {
padding: 8px 10px;
margin: 0;
color: #fff;
background-color: #3f7294;
/* Pictogram */
}
.search_form_handler .sf_title > span {
margin-right: 10px;
}
.search_form_handler .sf_title .sft_toggler {
transition: all 0.4s ease-in-out;
}
.search_form_handler .sf_criterion_area {
/*display: none;*/
padding: 8px 8px 3px 8px;
/* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
background-color: #fff;
/* Common style between criterion and more criterion */
/* Criteria tags */
/* More criterion */
@@ -782,6 +784,13 @@ div.HRDrawer {
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;
}
.search_form_handler .sf_criterion_area .search_form_criteria.opened, .search_form_handler .sf_criterion_area .sf_more_criterion.opened {
margin-bottom: 0px;
/* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
}
.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;
@@ -791,9 +800,9 @@ div.HRDrawer {
.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;
background-color: #f0f3f5;
color: #2d2d2d;
border: 1px solid #1c94c4;
border: 1px solid #3f7294;
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
@@ -808,7 +817,6 @@ div.HRDrawer {
position: relative;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
/* Non editable criteria */
/* Draft criteria (modifications not applied) */
/* Opened criteria (form group displayed) */
@@ -828,13 +836,20 @@ div.HRDrawer {
z-index: 1;
/* To be over other criterion */
}
.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_toggle {
transform: rotateX(-180deg);
}
.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_form_group {
display: block;
}
.search_form_handler .sf_criterion_area .search_form_criteria.opened_left .sfc_form_group {
left: auto;
right: 0px;
}
.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: #1c94c4;
color: #3f7294;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_close {
right: 7px;
@@ -842,10 +857,7 @@ div.HRDrawer {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
display: inline-block;
right: 23px;
transition: all 0.4s ease-in-out;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle.opened {
transform: rotateZ(-180deg);
transition: all 0.3s ease-in-out;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title {
padding-right: 35px;
@@ -896,7 +908,7 @@ div.HRDrawer {
bottom: 4px;
right: 0px;
cursor: pointer;
color: #1c94c4;
color: #3f7294;
font-size: 10px;
font-weight: bold;
border: none;
@@ -942,11 +954,15 @@ div.HRDrawer {
.search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_content {
display: inherit;
}
.search_form_handler .sf_criterion_area .sf_more_criterion.opened_left .sfm_content {
left: auto;
right: 0px;
}
.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;
color: #3f7294;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
display: none;

95
css/light-grey.scss
View File

@@ -786,36 +786,6 @@ input.dp-applied {
}
}
}*/
.DrawerClosed {
display: none;
}
.DrawerHandle {
margin: 0;
padding: 5px;
background: url(../images/drawer-handle.gif) bottom no-repeat transparent;
color: #fff;
cursor: pointer;
text-align: center;
/* center the block */
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
display: block;
font-size: 12px;
}
div.HRDrawer {
height: 5px;
width: 100%;
margin: 0;
background-color: $complement-color;
margin-top: 10px;
padding: 0;
border: 0;
display: block;
}
.mini_tabs a {
text-decoration: none;
font-weight:bold;
@@ -842,10 +812,19 @@ div.HRDrawer {
}
/* Search forms v2 */
/* TODO: Remove comment before final commit */
.search_box{
box-sizing: border-box;
/* Sizing reset */
*{
box-sizing: border-box;
}
}
.search_form_handler{
position: relative;
z-index: 10;
font-size: 12px;
border: 1px solid $box-blue-border-color;
/* Sizing reset */
*{
@@ -857,7 +836,37 @@ div.HRDrawer {
text-decoration: none;
}
&.opened{
.sf_title{
.sft_toggler{
transform: rotateX(180deg);
}
}
.sf_criterion_area{
/*display: inherit;*/
}
}
.sf_title{
padding: 8px 10px;
margin: 0;
color: #ffffff;
background-color: $box-blue-border-color;
/* Pictogram */
> span{
margin-right: 10px;
}
.sft_toggler{
transition: all 0.4s ease-in-out;
}
}
.sf_criterion_area{
/*display: none;*/
padding: 8px 8px 3px 8px; /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
background-color: $white;
/* Common style between criterion and more criterion */
.sf_active_criterion,
.sf_more_criterion {
@@ -867,7 +876,11 @@ div.HRDrawer {
.search_form_criteria,
.sf_more_criterion {
margin-bottom: 5px;
&.opened{
margin-bottom: 0px; /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
.sfc_header,
.sfm_header{
border-bottom: none !important;
@@ -900,7 +913,6 @@ div.HRDrawer {
position: relative;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
/* Non editable criteria */
&.locked{
@@ -921,10 +933,19 @@ div.HRDrawer {
&.opened{
z-index: 1; /* To be over other criterion */
.sfc_toggle{
transform: rotateX(-180deg);
}
.sfc_form_group{
display: block;
}
}
&.opened_left{
.sfc_form_group{
left: auto;
right: 0px;
}
}
/* Top left corner icons */
.sfc_close,
@@ -939,11 +960,7 @@ div.HRDrawer {
.sfc_toggle{
display: inline-block;
right: 23px;
transition: all 0.4s ease-in-out;
&.opened{
transform: rotateZ(-180deg);
}
transition: all 0.3s ease-in-out;
}
.sfc_title{
@@ -1074,6 +1091,12 @@ div.HRDrawer {
display: inherit;
}
}
&.opened_left{
.sfm_content{
left: auto;
right: 0px;
}
}
.sfm_toggler{
.sfm_tg_title{

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:Toggle' => 'Minimize / Expand',
'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',

16
js/search/search_form_criteria.js
View File

@@ -169,7 +169,16 @@ $(function()
// Open criteria
this._resetOperators();
// - Open it first
this.element.addClass('opened');
// - Then only check if more menu is to close to the right side (otherwise we might not have the right element's position)
var iPageWidth = $(document).width();
var iFormWidth = this.element.find('.sfc_form_group').outerWidth();
var iFormLeftPos = this.element.find('.sfc_form_group').offset().left;
if( (iFormWidth + iFormLeftPos) > (iPageWidth - 10 /* Security margin */) )
{
this.element.addClass('opened_left');
}
// Focus on right input
var oOpElemToFocus;
@@ -185,6 +194,7 @@ $(function()
},
_close: function()
{
this.element.removeClass('opened_left');
this.element.removeClass('opened');
this._unmarkAsDraft();
},
@@ -294,7 +304,8 @@ $(function()
// Bind events
// - Toggler
this.element.find('.sfc_toggle, .sfc_title').on('click', function(){
this.element.find('.sfc_toggle, .sfc_title').on('click', function(oEvent){
oEvent.preventDefault();
// First memorize if current criteria is close
var bOpen = !me.element.hasClass('opened');
// Then close every criterion
@@ -310,7 +321,8 @@ $(function()
if(this.options.is_removable === true)
{
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(){
this.element.find('.sfc_close').on('click', function(oEvent){
oEvent.preventDefault();
me._remove();
});
}

4
js/search/search_form_criteria_string.js
View File

@@ -80,7 +80,9 @@ $(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: 2px 0px;"><option>Contains</option><option>Starts with</option><option>Ends with</option></select>');
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();

35
js/search/search_form_handler.js
View File

@@ -84,6 +84,7 @@ $(function()
this.element.addClass('search_form_handler');
// Prepare DOM elements
this._prepareFormArea();
this._prepareCriterionArea();
this._prepareResultsArea();
@@ -170,13 +171,26 @@ $(function()
// - Open / Close more criterion menu
_openMoreCriterion: function()
{
this.elements.more_criterion.addClass('opened');
// Close all criterion
this.elements.active_criterion.find('.search_form_criteria').each(function(){
$(this).triggerHandler('itop.search.criteria.close');
});
// Open more criterion menu
// - Open it first
this.elements.more_criterion.addClass('opened');
// - Then only check if more menu is to close to the right side (otherwise we might not have the right element's position)
var iPageWidth = $(document).width();
var iMenuWidth = this.elements.more_criterion.find('.sfm_content').outerWidth();
var iMenuLeftPos = this.elements.more_criterion.find('.sfm_content').offset().left;
if( (iMenuWidth + iMenuLeftPos) > (iPageWidth - 10 /* Security margin */) )
{
this.elements.more_criterion.addClass('opened_left');
}
},
_closeMoreCriterion: function()
{
this.elements.more_criterion.removeClass('opened_left');
this.elements.more_criterion.removeClass('opened');
},
_toggleMoreCriterion: function()
@@ -193,6 +207,19 @@ $(function()
},
// DOM helpers
// - Prepare form area
_prepareFormArea: function()
{
var me = this;
// 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){
oEvent.preventDefault();
me.element.find('.sf_criterion_area').slideToggle('fast');
me.element.toggleClass('opened');
});
},
// - Prepare criterion area
_prepareCriterionArea: function()
{
@@ -285,11 +312,13 @@ $(function()
// Bind events
// - Open / close menu
this.elements.more_criterion.find('.sfm_header').on('click', function(){
this.elements.more_criterion.find('.sfm_header').on('click', function(oEvent){
oEvent.preventDefault();
me._toggleMoreCriterion();
});
// - Add criteria
this.elements.more_criterion.find('.sfm_field').on('click', function(){
this.elements.more_criterion.find('.sfm_field').on('click', function(oEvent){
oEvent.preventDefault();
// Prepare new criterion data (as already opened to increase UX)
var oData = {
'ref': $(this).attr('data-field-ref'),

2
js/utils.js
View File

@@ -252,7 +252,7 @@ function ReloadSearchForm(divId, sClassName, sBaseClass, sContext)
function FixSearchFormsDisposition()
{
// Fix search forms
$('.SearchDrawer').each(function() {
$('.search_box').each(function() {
var colWidth = 0;
var labelWidth = 0;
$('label:visible', $(this)).each( function() {

5
sources/application/search/searchform.class.inc.php
View File

@@ -115,8 +115,9 @@ class SearchForm
$sClassesCombo = MetaModel::GetName($sClassName);
}
$sAction = (isset($aExtraParams['action'])) ? $aExtraParams['action'] : utils::GetAbsoluteUrlAppRoot().'pages/UI.php';
$sHtml .= "<form id=\"fs_{$sSearchFormId}\" action=\"{$sAction}\">\n"; // Don't use $_SERVER['SCRIPT_NAME'] since the form may be called asynchronously (from ajax.php)
$sHtml .= "<h2>".Dict::Format('UI:SearchFor_Class_Objects', $sClassesCombo)."</h2>\n";
$sStyle = (isset($aExtraParams['open']) && ($aExtraParams['open'] == 'true')) ? 'opened' : '';
$sHtml .= "<form id=\"fs_{$sSearchFormId}\" action=\"{$sAction}\" class=\"{$sStyle}\">\n"; // Don't use $_SERVER['SCRIPT_NAME'] since the form may be called asynchronously (from ajax.php)
$sHtml .= "<h2 class=\"sf_title\"><span class=\"sft_picto fa fa-search\"></span>" . Dict::Format('UI:SearchFor_Class_Objects', $sClassesCombo) . "<a class=\"sft_toggler fa fa-caret-down pull-right\" href=\"#\" title=\"" . Dict::S('UI:Search:Toggle') . "\"></a></h2>\n";
$sHtml .= "<div id=\"fs_{$sSearchFormId}_criterion_outer\">\n";
$sHtml .= "</div>\n";