mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-23 18:48:51 +02:00
Advanced search: WIP POC, UI/UX.
SVN:b1162[5461]
This commit is contained in:
Guillaume Lajarige
@@ -34,4 +34,4 @@ $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";
|
||||
$version: "v2.4.0";
|
||||
|
||||
@@ -675,35 +675,6 @@ input.dp-applied {
|
||||
float: left;
|
||||
}
|
||||
/* For search forms */
|
||||
/* TODO: Remove when cleaning up old search */
|
||||
/*.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;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.mini_tabs a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
@@ -744,6 +715,7 @@ input.dp-applied {
|
||||
border: 1px solid #3f7294;
|
||||
/* Sizing reset */
|
||||
/* Hyperlink reset */
|
||||
/* Input reset */
|
||||
}
|
||||
.search_form_handler * {
|
||||
box-sizing: border-box;
|
||||
@@ -752,6 +724,9 @@ input.dp-applied {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.search_form_handler input[type="text"] {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
.search_form_handler.opened .sf_title .sft_toggler {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
@@ -781,6 +756,11 @@ input.dp-applied {
|
||||
.search_form_handler .sf_title .sft_toggler {
|
||||
margin-left: 0.7em;
|
||||
}
|
||||
.search_form_handler .sf_message {
|
||||
display: none;
|
||||
margin: 8px 8px 0px 8px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area {
|
||||
/*display: none;*/
|
||||
padding: 8px 8px 3px 8px;
|
||||
@@ -872,6 +852,12 @@ input.dp-applied {
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title {
|
||||
padding-right: 35px;
|
||||
cursor: pointer;
|
||||
/* Uncomment to try fixed width criteria tabs */
|
||||
/*max-width: 240px;
|
||||
padding-right: 25px;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;*/
|
||||
}
|
||||
.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 */
|
||||
@@ -898,6 +884,30 @@ input.dp-applied {
|
||||
margin: 0px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices label > input {
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_filter {
|
||||
position: relative;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_filter input {
|
||||
width: 100%;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator .sfc_opc_multichoices .sfc_opc_mc_filter .sfc_opc_mcf_picto {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
opacity: 0.6;
|
||||
user-select: none;
|
||||
}
|
||||
.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 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.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 {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_equals .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_contains .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_starts_with .sfc_op_name, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_name {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
@@ -756,36 +756,6 @@ input.dp-applied {
|
||||
}
|
||||
|
||||
/* For search forms */
|
||||
/* TODO: Remove when cleaning up old search */
|
||||
/*.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;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.mini_tabs a {
|
||||
text-decoration: none;
|
||||
font-weight:bold;
|
||||
@@ -835,6 +805,10 @@ input.dp-applied {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Input reset */
|
||||
input[type="text"]{
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
&.opened{
|
||||
.sf_title{
|
||||
@@ -874,6 +848,11 @@ input.dp-applied {
|
||||
margin-left: 0.7em;
|
||||
}
|
||||
}
|
||||
.sf_message{
|
||||
display: none;
|
||||
margin: 8px 8px 0px 8px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
.sf_criterion_area{
|
||||
/*display: none;*/
|
||||
padding: 8px 8px 3px 8px; /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
|
||||
@@ -926,7 +905,8 @@ input.dp-applied {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
|
||||
/* Non editable criteria */
|
||||
|
||||
/* Non editable criteria */
|
||||
&.locked{
|
||||
background-color: $gray-extra-light;
|
||||
}
|
||||
@@ -978,6 +958,12 @@ input.dp-applied {
|
||||
.sfc_title{
|
||||
padding-right: 35px;
|
||||
cursor: pointer;
|
||||
/* Uncomment to try fixed width criteria tabs */
|
||||
/*max-width: 240px;
|
||||
padding-right: 25px;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;*/
|
||||
}
|
||||
.sfc_form_group{
|
||||
/* Form group (operators) is displayed only when the criteria is toggled to opened state */
|
||||
@@ -1003,6 +989,40 @@ input.dp-applied {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.sfc_opc_multichoices{
|
||||
label > input{
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.sfc_opc_mc_toggler{
|
||||
|
||||
}
|
||||
.sfc_opc_mc_filter{
|
||||
position: relative;
|
||||
|
||||
input{
|
||||
width: 100%;
|
||||
}
|
||||
.sfc_opc_mcf_picto{
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
opacity: 0.6;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
.sfc_opc_mc_items{
|
||||
.sfc_opc_mc_item{
|
||||
margin-top: 5px;
|
||||
|
||||
label{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Common operators for most criteria types processing*/
|
||||
&.sfc_fg_operator_equals,
|
||||
&.sfc_fg_operator_contains,
|
||||
|
||||
Reference in New Issue
Block a user