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

Advanced search: UI/UX WIP.

Browse Source 
SVN:b1162[5524]
This commit is contained in:
Guillaume Lajarige
2018-03-25 12:21:26 +00:00
parent 440dd90316
commit 8b0d9670f9
5 changed files with 160 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
css/css-variables.scss
View File

@@ -27,11 +27,17 @@ $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: #f0f3f5;
$box-blue-border-color: #3f7294;
$box-blue-border: 1px solid $box-blue-border-color;
$box-blue-radius: 1px;
//$search-criteria-box-color: #2D2D2D;
//$search-criteria-box-bg-color: #f0f3f5;
//$search-criteria-box-border-color: #3f7294;
//$search-criteria-box-border: 1px solid $search-criteria-box-border-color;
//$search-criteria-box-radius: 1px;
$search-criteria-box-color: #2D2D2D;
$search-criteria-box-picto-color: #E87C1E;
$search-criteria-box-bg-color: #EEEEEE;
$search-criteria-box-border-color: #CCCCCC;
$search-criteria-box-border: 1px solid $search-criteria-box-border-color;
$search-criteria-box-radius: 1px;
// Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0
$version: "v2.4.0";

40
css/light-grey.css
View File

@@ -741,6 +741,7 @@ input.dp-applied {
margin: 0;
color: #fff;
background-color: #3f7294;
cursor: pointer;
/* Pictogram */
}
.search_form_handler .sf_title .sft_picto {
@@ -792,9 +793,9 @@ input.dp-applied {
.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: #f0f3f5;
background-color: #eee;
color: #2d2d2d;
border: 1px solid #3f7294;
border: 1px solid #ccc;
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
@@ -839,7 +840,7 @@ input.dp-applied {
.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: #3f7294;
color: #e87c1e;
}
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_close {
right: 7px;
@@ -913,7 +914,7 @@ input.dp-applied {
.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:hover {
background-color: #fff;
/* TODO: Try with this */
/*background-color: $box-blue-border-color;
/*background-color: $search-criteria-box-border-color;
color: $white;*/
}
.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 {
@@ -979,6 +980,9 @@ input.dp-applied {
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group:not(.advanced) .hide_on_less {
display: none;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw > * {
border-color: transparent;
}
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_raw .sfc_title {
cursor: initial;
}
@@ -1019,18 +1023,24 @@ input.dp-applied {
margin-right: 7px;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_icon {
color: #3f7294;
color: #e87c1e;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
display: none;
min-width: 200px;
/* To avoid element going to thin on filter, not very slick */
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_list {
max-height: 420px;
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_lists {
margin: 0px -8px;
padding: 0px 8px;
max-height: 460px;
overflow-x: hidden;
overflow-y: auto;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_list .sfm_field {
cursor: pointer;
white-space: nowrap;
.search_form_handler .sf_list:not(:first-of-type) .sfl_title {
border-top: 1px solid #ddd;
padding-top: 8px;
margin-top: 5px;
}
.search_form_handler .sf_list .sfl_title {
font-weight: bold;
@@ -1047,6 +1057,10 @@ input.dp-applied {
.search_form_handler .sf_list .sfl_items > li:hover {
background-color: #fff;
}
.search_form_handler .sf_list .sfl_items > li.sfl_i_placeholder {
font-style: italic;
opacity: 0.8;
}
.search_form_handler .sf_list .sfl_items > li > label {
display: inline-block;
width: 100%;
@@ -1083,6 +1097,12 @@ input.dp-applied {
.sf_results_area .sf_results_placeholder button > span {
margin-left: 0.5em;
}
.hidden {
display: none !important;
}
.visible {
display: initial !important;
}
.mandatory {
border: 1px solid #f00;
}

56
css/light-grey.scss
View File

@@ -795,7 +795,7 @@ input.dp-applied {
position: relative;
z-index: 10;
font-size: 12px;
border: 1px solid $box-blue-border-color;
border: 1px solid #3F7294;
/* Sizing reset */
*{
@@ -827,7 +827,8 @@ input.dp-applied {
padding: 8px 10px;
margin: 0;
color: #ffffff;
background-color: $box-blue-border-color;
background-color: #3F7294;
cursor: pointer;
/* Pictogram */
.sft_picto{
@@ -882,10 +883,10 @@ input.dp-applied {
> *{
padding: 7px 8px;
vertical-align: top;
background-color: $box-blue-bg-color;
color: $box-blue-color;
border: $box-blue-border;
border-radius: $box-blue-radius;
background-color: $search-criteria-box-bg-color;
color: $search-criteria-box-color;
border: $search-criteria-box-border;
border-radius: $search-criteria-box-radius;
box-shadow: $box-shadow-regular;
}
.sfc_form_group,
@@ -941,7 +942,7 @@ input.dp-applied {
.sfc_toggle{
position: absolute;
top: 7px;
color: $box-blue-border-color;
color: $search-criteria-box-picto-color;
}
.sfc_close{
right: 7px;
@@ -1017,7 +1018,7 @@ input.dp-applied {
&:hover{
background-color: $white;
/* TODO: Try with this */
/*background-color: $box-blue-border-color;
/*background-color: $search-criteria-box-border-color;
color: $white;*/
}
@@ -1063,7 +1064,7 @@ input.dp-applied {
bottom: 4px;
right: 0px;
cursor: pointer;
color: $box-blue-border-color;
color: #3F7294;
font-size: 10px;
font-weight: bold;
border: none;
@@ -1122,6 +1123,9 @@ input.dp-applied {
/* Special criterion processing */
&.search_form_criteria_raw{
> *{
border-color: transparent;
}
.sfc_title{
cursor: initial;
}
@@ -1185,21 +1189,20 @@ input.dp-applied {
margin-right: 7px;
}
.sfm_tg_icon{
color: $box-blue-border-color;
color: $search-criteria-box-picto-color;
}
}
.sfm_content{
display: none;
min-width: 200px; /* To avoid element going to thin on filter, not very slick */
.sfm_list{
max-height: 420px;
.sfm_lists{
margin: 0px -8px;
padding: 0px 8px;
max-height: 460px;
overflow-x: hidden;
overflow-y: auto;
.sfm_field{
cursor: pointer;
white-space: nowrap;
}
}
}
}
@@ -1207,9 +1210,16 @@ input.dp-applied {
/* List helpers */
.sf_list{
&:not(:first-of-type){
.sfl_title{
border-top: 1px solid $gray-lighter;
padding-top: 8px;
margin-top: 5px;
}
}
.sfl_title{
font-weight: bold;
}
.sfl_items{
margin: 5px -8px 0px -8px;
@@ -1223,6 +1233,10 @@ input.dp-applied {
&:hover{
background-color: $white;
}
&.sfl_i_placeholder{
font-style: italic;
opacity: 0.8;
}
> label{
display: inline-block;
@@ -1270,6 +1284,12 @@ input.dp-applied {
}
}
.hidden{
display: none !important;
}
.visible{
display: initial !important;
}
.mandatory {
border: 1px solid #f00;
}