diff --git a/application/itopwebpage.class.inc.php b/application/itopwebpage.class.inc.php index 9cc27ac98..6b56f0b9c 100644 --- a/application/itopwebpage.class.inc.php +++ b/application/itopwebpage.class.inc.php @@ -795,8 +795,6 @@ EOF $('table.listResults').each( function() { FixTableSorter($(this)); } ); $('.multiselect').multiselect($sJSMultiselectOptions); - - FixSearchFormsDisposition(); EOF ); diff --git a/css/css-variables.scss b/css/css-variables.scss index 568e18b60..150081b15 100644 --- a/css/css-variables.scss +++ b/css/css-variables.scss @@ -44,6 +44,10 @@ $search-criteria-box-radius: 1px; $search-add-criteria-box-color: $search-criteria-box-color; $search-add-criteria-box-bg-color: $white; $search-add-criteria-box-hover-color: $gray-extra-light; +// +$search-button-box-color: $combodo-orange; +$search-button-box-bg-color: $white; +$search-button-box-bg-hover-color: $gray-extra-light; // Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0 $version: "v2.5.0"; diff --git a/css/light-grey.css b/css/light-grey.css index 078248742..6e1a13288 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -721,7 +721,7 @@ input.dp-applied { font-size: 12px; text-align: initial; /* To compensate .search_box:text-align */ - border: 1px solid #3f7294; + border: 1px solid #1c94c4; /* Sizing reset */ /* Hyperlink reset */ /* Input reset */ @@ -740,6 +740,9 @@ input.dp-applied { .search_form_handler:not(.closed) .sf_title .sft_short { display: none; } +.search_form_handler:not(.closed) .sf_title .sft_hint, .search_form_handler:not(.closed) .sf_title .sft_toggler { + margin-top: 4px; +} .search_form_handler:not(.closed) .sf_title .sft_toggler { transform: rotateX(180deg); transition: transform 0.5s linear; @@ -765,9 +768,11 @@ input.dp-applied { .search_form_handler.closed .sf_title .sft_long { display: none; } -.search_form_handler.closed .sf_title .sft_refresh { +.search_form_handler.closed .sf_title .sft_hint { + display: none; +} +.search_form_handler:not(.no_auto_submit) .sft_hint { display: none; - line-height: 10pt; } .search_form_handler:not(.no_auto_submit) .sfc_fg_apply { display: none; @@ -780,27 +785,19 @@ input.dp-applied { padding: 8px 10px; margin: 0; color: #fff; - background-color: #3f7294; + background-color: #1c94c4; cursor: pointer; - /* Pictogram */ } -.search_form_handler .sf_title .sft_picto { - display: none; - /* TODO: Remove this class and the correspondig DOM element if this option is kept. */ - margin-right: 10px; -} -.search_form_handler .sf_title .sft_refresh, .search_form_handler .sf_title .sft_toggler { - transition: color 0.2s ease-in-out, transform 0.4s ease-in-out; -} -.search_form_handler .sf_title .sft_refresh:hover, .search_form_handler .sf_title .sft_toggler:hover { - color: #f1f1f1; -} -.search_form_handler .sf_title .sft_refresh { - font-size: 10pt; - line-height: 13pt; +.search_form_handler .sf_title .sft_hint { + font-size: 8pt; + font-style: italic; } .search_form_handler .sf_title .sft_toggler { margin-left: 0.7em; + transition: color 0.2s ease-in-out, transform 0.4s ease-in-out; +} +.search_form_handler .sf_title .sft_toggler:hover { + color: #f1f1f1; } .search_form_handler .sf_message { display: none; @@ -815,31 +812,62 @@ input.dp-applied { /* Common style between criterion and more criterion */ /* Criteria tags */ /* More criterion */ + /* Misc. buttons */ } -.search_form_handler .sf_criterion_area .search_form_criteria, .search_form_handler .sf_criterion_area .sf_more_criterion { +.search_form_handler .sf_criterion_area .sf_criterion_row { + position: relative; +} +.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child) { + margin-top: 20px; +} +.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child)::before { + content: ""; + position: absolute; + top: -12px; + left: 0px; + width: 100%; + border-top: 1px solid #ccc; +} +.search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child)::after { + content: "or"; + /* TODO: Make this into a dict entry */ + position: absolute; + top: -20px; + left: 8px; + padding-left: 5px; + padding-right: 5px; + color: #808080; + background-color: #fff; + /* Must match .sf_criterion_area:background-color */ +} +.search_form_handler .sf_criterion_area .sf_criterion_row .sf_criterion_group { + display: inline; +} +.search_form_handler .sf_criterion_area .search_form_criteria, .search_form_handler .sf_criterion_area .sf_more_criterion, .search_form_handler .sf_criterion_area .sf_button { position: relative; display: inline-block; + margin-right: 10px; margin-bottom: 5px; vertical-align: top; } -.search_form_handler .sf_criterion_area .search_form_criteria.opened, .search_form_handler .sf_criterion_area .sf_more_criterion.opened { +.search_form_handler .sf_criterion_area .search_form_criteria.opened, .search_form_handler .sf_criterion_area .sf_more_criterion.opened, .search_form_handler .sf_criterion_area .sf_button.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 { +.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 .sf_button.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, .search_form_handler .sf_criterion_area .sf_button.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 > * { +.search_form_handler .sf_criterion_area .search_form_criteria > *, .search_form_handler .sf_criterion_area .sf_more_criterion > *, .search_form_handler .sf_criterion_area .sf_button > * { padding: 7px 8px; vertical-align: top; border: 1px solid #ccc; 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 { +.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 .sf_button .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, .search_form_handler .sf_criterion_area .sf_button .sfm_content { position: absolute; z-index: -1; min-width: 100%; @@ -847,10 +875,10 @@ input.dp-applied { margin-top: -1px; } .search_form_handler .sf_criterion_area .search_form_criteria { - margin-right: 30px; /* Non editable criteria */ /* Draft criteria (modifications not applied) */ /* Opened criteria (form group displayed) */ + /* Add "and" on criterion but the one and submit button */ /* Top left corner icons */ /* Special criterion processing */ } @@ -881,6 +909,9 @@ input.dp-applied { left: auto; right: 0px; } +.search_form_handler .sf_criterion_area .search_form_criteria:not(:last-of-type) { + margin-right: 30px; +} .search_form_handler .sf_criterion_area .search_form_criteria:not(:last-of-type)::after { /* TODO: Find an elegant way to do this, without hardcoding the content (could be a