composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-24 02:58:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Advanced search: WIP POC, UI/UX.

Browse Source 
SVN:b1162[5421]
This commit is contained in:
Guillaume Lajarige
2018-03-14 08:33:17 +00:00
parent 6f79e07e90
commit 5632f9786c
7 changed files with 138 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
css/light-grey.css
View File

@@ -728,7 +728,7 @@ div.HRDrawer {
width: 100%;
margin: 0;
background-color: #1c94c4;
margin: 0;
margin-top: 10px;
padding: 0;
border: 0;
display: block;
@@ -784,6 +784,7 @@ div.HRDrawer {
.search_form_handler .sf_criterion_area .sf_more_criterion, .search_form_handler .sf_criterion_area .search_form_criteria {
position: relative;
padding: 7px 8px;
vertical-align: top;
background-color: #d6e8ef;
color: #2d2d2d;
border: 1px solid #1c94c4;
@@ -793,7 +794,7 @@ div.HRDrawer {
.search_form_handler .sf_criterion_area .search_form_criteria {
display: inline-block;
margin-right: 5px;
padding-right: 35px;
margin-bottom: 5px;
/* Top left corner icons */
/* Special criterion processing */
}
@@ -811,12 +812,13 @@ div.HRDrawer {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
display: inline-block;
right: 20px;
transition: all 0.2s ease-in-out;
transition: all 0.4s ease-in-out;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle.opened {
transform: rotateZ(180deg);
transform: rotateZ(-180deg);
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title {
padding-right: 35px;
cursor: pointer;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group {
@@ -827,6 +829,31 @@ div.HRDrawer {
display: block;
margin-top: 5px;
/* Show only first operator in simple mode */
/* Show all operators in advanced mode */
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators {
font-size: 12px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator {
/* Common operators for most criteria types processing*/
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator > label {
line-height: 20px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator > label > * {
display: inline-block;
vertical-align: middle;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator .sfc_op_radio {
width: 12px;
margin: 0px;
margin-right: 7px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .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.opened .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.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_name {
width: 90px;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_contains .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_starts_with .sfc_op_content input, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group.opened .sfc_fg_operators .sfc_fg_operator.sfc_fg_operator_ends_with .sfc_op_content input {
width: 130px;
}
.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;
@@ -839,7 +866,7 @@ div.HRDrawer {
}
.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;
bottom: 4px;
right: 0px;
cursor: pointer;
color: #1c94c4;
@@ -860,9 +887,6 @@ div.HRDrawer {
.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;
}

49
css/light-grey.scss
View File

@@ -811,7 +811,7 @@ div.HRDrawer {
width: 100%;
margin: 0;
background-color: $complement-color;
margin: 0;
margin-top: 10px;
padding: 0;
border: 0;
display: block;
@@ -867,6 +867,7 @@ div.HRDrawer {
.search_form_criteria{
position: relative;
padding: 7px 8px;
vertical-align: top;
background-color: $box-blue-bg-color;
color: $box-blue-color;
border: $box-blue-border;
@@ -878,7 +879,7 @@ div.HRDrawer {
.search_form_criteria{
display: inline-block;
margin-right: 5px;
padding-right: 35px;
margin-bottom: 5px;
&.locked{
background-color: $gray-extra-light;
@@ -897,14 +898,15 @@ div.HRDrawer {
.sfc_toggle{
display: inline-block;
right: 20px;
transition: all 0.2s ease-in-out;
transition: all 0.4s ease-in-out;
&.opened{
transform: rotateZ(180deg);
transform: rotateZ(-180deg);
}
}
.sfc_title{
padding-right: 35px;
cursor: pointer;
}
.sfc_form_group{
@@ -915,6 +917,41 @@ div.HRDrawer {
display: block;
margin-top: 5px;
.sfc_fg_operators{
font-size: 12px;
.sfc_fg_operator{
> label{
line-height: 20px;
> *{
display: inline-block;
vertical-align: middle;
}
}
.sfc_op_radio{
width: 12px;
margin: 0px;
margin-right: 7px;
}
/* Common operators for most criteria types processing*/
&.sfc_fg_operator_contains,
&.sfc_fg_operator_starts_with,
&.sfc_fg_operator_ends_with{
.sfc_op_name{
width: 90px;
}
.sfc_op_content{
input{
width: 130px;
}
}
}
}
}
.sfc_fg_apply,
.sfc_fg_cancel{
margin-top: 8px;
@@ -928,7 +965,7 @@ div.HRDrawer {
.sfc_fg_more,
.sfc_fg_less{
position: absolute;
bottom: 3px;
bottom: 4px;
right: 0px;
cursor: pointer;
color: $box-blue-border-color;
@@ -954,6 +991,7 @@ div.HRDrawer {
display: inline-block;
}
/* Show all operators in advanced mode */
&.advanced{
.sfc_fg_operator{
@@ -964,7 +1002,6 @@ div.HRDrawer {
}
}
/* Show all operators in simple mode */
.sfc_fg_operator:not(:first-of-type),
.sfc_fg_operator:first-of-type .sfc_op_radio{
display: inherit;