\n");
if (!$oP->IsPrintableVersion())
{
$oP->add_ready_script(
diff --git a/css/css-variables.scss b/css/css-variables.scss
index 962c33cb7..f8973d783 100644
--- a/css/css-variables.scss
+++ b/css/css-variables.scss
@@ -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;
diff --git a/css/light-grey.css b/css/light-grey.css
index b4661e15a..6acfcd7b7 100644
--- a/css/light-grey.css
+++ b/css/light-grey.css
@@ -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;
diff --git a/css/light-grey.scss b/css/light-grey.scss
index a6a745b4e..80a7f6b18 100644
--- a/css/light-grey.scss
+++ b/css/light-grey.scss
@@ -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{
diff --git a/dictionaries/en.dictionary.itop.ui.php b/dictionaries/en.dictionary.itop.ui.php
index b7a04bb17..c770374b8 100644
--- a/dictionaries/en.dictionary.itop.ui.php
+++ b/dictionaries/en.dictionary.itop.ui.php
@@ -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',
diff --git a/js/search/search_form_criteria.js b/js/search/search_form_criteria.js
index 36125ce2c..3a25a1456 100644
--- a/js/search/search_form_criteria.js
+++ b/js/search/search_form_criteria.js
@@ -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('
');
- this.element.find('.sfc_close').on('click', function(){
+ this.element.find('.sfc_close').on('click', function(oEvent){
+ oEvent.preventDefault();
me._remove();
});
}
diff --git a/js/search/search_form_criteria_string.js b/js/search/search_form_criteria_string.js
index 80fa292eb..76f55026e 100644
--- a/js/search/search_form_criteria_string.js
+++ b/js/search/search_form_criteria_string.js
@@ -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('
');
+ this.element.find('.sfc_fg_operator[data-operator-code="contains"] .sfc_op_name')
+ .html('
')
+ .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();
diff --git a/js/search/search_form_handler.js b/js/search/search_form_handler.js
index e95f52ee6..6ffbd0240 100644
--- a/js/search/search_form_handler.js
+++ b/js/search/search_form_handler.js
@@ -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