mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-23 18:48:51 +02:00
Advanced search: WIP POC, integration with endpoint.
SVN:b1162[5419]
This commit is contained in:
Guillaume Lajarige
@@ -24,5 +24,14 @@ $complement-color: #1c94c4;
|
||||
$complement-light: #d6e8ef;
|
||||
$frame-background-color: $gray-extra-light;
|
||||
$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: #d6e8ef;
|
||||
$box-blue-border-color: #1c94c4;
|
||||
$box-blue-border: 1px solid $box-blue-border-color;
|
||||
$box-blue-radius: 1px;
|
||||
|
||||
// Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0
|
||||
$version: "v2.4.0";
|
||||
@@ -676,31 +676,34 @@ input.dp-applied {
|
||||
}
|
||||
/* For search forms */
|
||||
/* TODO: Remove when cleaning up old search */
|
||||
.SearchDrawer {
|
||||
border-top: 5px solid #1c94c4;
|
||||
border-left: 5px solid #1c94c4;
|
||||
border-right: 5px solid #1c94c4;
|
||||
border-bottom: 0;
|
||||
background: #d6e8ef;
|
||||
color: #000;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.SearchDrawer label {
|
||||
background: #d6e8ef;
|
||||
color: #000;
|
||||
text-align: right;
|
||||
}
|
||||
.SearchDrawer h1 {
|
||||
color: #000;
|
||||
}
|
||||
.SearchDrawer .SearchAttribute > .field_input_zone {
|
||||
display: inline-block;
|
||||
}
|
||||
.SearchDrawer .SearchAttribute > .field_input_zone > .field_select_wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
/*.SearchDrawer {
|
||||
//background: $complement-color url(../images/search-top-left-corner.png?v=#{$version}) top left no-repeat;
|
||||
border-top: 5px solid $complement-color;
|
||||
border-left: 5px solid $complement-color;
|
||||
border-right: 5px solid $complement-color;
|
||||
border-bottom: 0;
|
||||
background: $complement-light;
|
||||
color: #000;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.SearchDrawer label {
|
||||
background: $complement-light;
|
||||
color: #000;
|
||||
text-align: right;
|
||||
}
|
||||
.SearchDrawer h1 {
|
||||
color: #000;
|
||||
}
|
||||
.SearchDrawer .SearchAttribute{
|
||||
> .field_input_zone{
|
||||
display: inline-block;
|
||||
> .field_select_wrapper{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.DrawerClosed {
|
||||
display: none;
|
||||
}
|
||||
@@ -757,6 +760,9 @@ div.HRDrawer {
|
||||
/* Search forms v2 */
|
||||
/* TODO: Remove comment before final commit */
|
||||
.search_form_handler {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
font-size: 12px;
|
||||
/* Sizing reset */
|
||||
/* Hyperlink reset */
|
||||
}
|
||||
@@ -777,20 +783,34 @@ div.HRDrawer {
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .sf_more_criterion, .search_form_handler .sf_criterion_area .search_form_criteria {
|
||||
position: relative;
|
||||
padding: 8px 10px;
|
||||
background-color: #ea7d1e;
|
||||
color: #fff;
|
||||
padding: 7px 8px;
|
||||
background-color: #d6e8ef;
|
||||
color: #2d2d2d;
|
||||
border: 1px solid #1c94c4;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
margin-right: 5px;
|
||||
padding-right: 35px;
|
||||
/* 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 .sfc_close, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
color: #1c94c4;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_close {
|
||||
right: 7px;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
|
||||
display: inline-block;
|
||||
right: 20px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle.opened {
|
||||
@@ -800,20 +820,76 @@ div.HRDrawer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.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 */
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
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 {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
color: #1c94c4;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
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 {
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_less {
|
||||
display: none;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_more {
|
||||
display: inline-block;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced {
|
||||
/* Show all operators in simple mode */
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.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 {
|
||||
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 {
|
||||
display: inherit;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_less {
|
||||
display: inline-block;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened.advanced .sfc_fg_more {
|
||||
display: none;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw .sfc_title {
|
||||
cursor: initial;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .sf_more_criterion .sf_mc_list {
|
||||
position: absolute;
|
||||
max-height: 420px;
|
||||
margin: 0px;
|
||||
top: 100%;
|
||||
left: 0px;
|
||||
background-color: #ea7d1e;
|
||||
overflow-y: auto;
|
||||
background-color: #d6e8ef;
|
||||
border: 1px solid #1c94c4;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .sf_more_criterion .sf_mc_list .sf_mc_field {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -757,7 +757,7 @@ input.dp-applied {
|
||||
|
||||
/* For search forms */
|
||||
/* TODO: Remove when cleaning up old search */
|
||||
.SearchDrawer {
|
||||
/*.SearchDrawer {
|
||||
//background: $complement-color url(../images/search-top-left-corner.png?v=#{$version}) top left no-repeat;
|
||||
border-top: 5px solid $complement-color;
|
||||
border-left: 5px solid $complement-color;
|
||||
@@ -785,7 +785,7 @@ input.dp-applied {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.DrawerClosed {
|
||||
display: none;
|
||||
}
|
||||
@@ -843,6 +843,10 @@ div.HRDrawer {
|
||||
/* Search forms v2 */
|
||||
/* TODO: Remove comment before final commit */
|
||||
.search_form_handler{
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
font-size: 12px;
|
||||
|
||||
/* Sizing reset */
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
@@ -862,39 +866,116 @@ div.HRDrawer {
|
||||
.sf_more_criterion,
|
||||
.search_form_criteria{
|
||||
position: relative;
|
||||
padding: 8px 10px;
|
||||
background-color: $combodo-orange;
|
||||
color: $white;
|
||||
padding: 7px 8px;
|
||||
background-color: $box-blue-bg-color;
|
||||
color: $box-blue-color;
|
||||
border: $box-blue-border;
|
||||
border-radius: $box-blue-radius;
|
||||
box-shadow: $box-shadow-regular;
|
||||
}
|
||||
|
||||
/* Criteria tags */
|
||||
.search_form_criteria{
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
margin-right: 5px;
|
||||
padding-right: 35px;
|
||||
|
||||
&.locked{
|
||||
background-color: $gray-extra-light;
|
||||
}
|
||||
|
||||
/* Top left corner icons */
|
||||
.sfc_close,
|
||||
.sfc_toggle{
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
color: $box-blue-border-color;
|
||||
}
|
||||
.sfc_close{
|
||||
|
||||
right: 7px;
|
||||
}
|
||||
.sfc_toggle{
|
||||
display: inline-block;
|
||||
right: 20px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&.opened{
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.sfc_title{
|
||||
cursor: pointer;
|
||||
}
|
||||
.sfc_form_group{
|
||||
/* Form group (operators) is displayed only when the criteria is toggled to opened state */
|
||||
display: none;
|
||||
|
||||
&.opened{
|
||||
display: block;
|
||||
margin-top: 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: 3px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
color: $box-blue-border-color;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
> span{
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
&.advanced{
|
||||
|
||||
.sfc_fg_operator{
|
||||
margin-bottom: 3px;
|
||||
|
||||
&:last-of-type{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show all operators in simple mode */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -910,10 +991,13 @@ div.HRDrawer {
|
||||
.sf_more_criterion{
|
||||
.sf_mc_list{
|
||||
position: absolute;
|
||||
max-height: 420px;
|
||||
margin: 0px;
|
||||
top: 100%;
|
||||
left: 0px;
|
||||
background-color: $combodo-orange;
|
||||
overflow-y: auto;
|
||||
background-color: $box-blue-bg-color;
|
||||
border: $box-blue-border;
|
||||
|
||||
.sf_mc_field{
|
||||
cursor: pointer;
|
||||
|
||||
Reference in New Issue
Block a user