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

Advanced search: UI/UX, moving "Add criteria" to the left and separating criterion with "and"s for a better understanding.

Browse Source 
SVN:b1162[5532]
This commit is contained in:
Guillaume Lajarige
2018-03-26 15:23:34 +00:00
parent e01f48303b
commit cfe892d35e
4 changed files with 68 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/css-variables.scss
View File

@@ -32,12 +32,18 @@ $box-shadow-regular: 0 1px 1px rgba(0, 0, 0, 0.15);
//$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-hover-color: $white;
$search-criteria-box-border-color: #CCCCCC;
$search-criteria-box-border: 1px solid $search-criteria-box-border-color;
$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;
// Beware the version number MUST be enclosed with quotes otherwise v2.3.0 becomes v2 0.3 .0
$version: "v2.4.0";

32
css/light-grey.css
View File

@@ -795,8 +795,6 @@ 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: #eee;
color: #2d2d2d;
border: 1px solid #ccc;
border-radius: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
@@ -809,7 +807,7 @@ input.dp-applied {
margin-top: -1px;
}
.search_form_handler .sf_criterion_area .search_form_criteria {
margin-right: 5px;
margin-right: 30px;
/* Non editable criteria */
/* Draft criteria (modifications not applied) */
/* Opened criteria (form group displayed) */
@@ -839,6 +837,21 @@ input.dp-applied {
left: auto;
right: 0px;
}
.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 <style> in the markup) and margin. Note, only a few languages (hawaiian and stuff like this have more than 4 letters in for "and" word. */
content: "and";
position: absolute;
top: 8px;
left: calc(100% + 0px);
margin-right: 5px;
margin-left: 5px;
text-align: center;
color: #808080;
}
.search_form_handler .sf_criterion_area .search_form_criteria > * {
background-color: #eee;
color: #2d2d2d;
}
.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;
@@ -915,9 +928,6 @@ 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: $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 {
display: inline-block;
@@ -1010,6 +1020,9 @@ input.dp-applied {
.search_form_handler .sf_criterion_area .search_form_criteria.search_form_criteria_numeric .sfc_fg_operator_between input {
width: 88px;
}
.search_form_handler .sf_criterion_area .sf_more_criterion {
margin-right: 5px;
}
.search_form_handler .sf_criterion_area .sf_more_criterion.opened {
z-index: 2;
/* To be over criterion */
@@ -1021,6 +1034,10 @@ input.dp-applied {
left: auto;
right: 0px;
}
.search_form_handler .sf_criterion_area .sf_more_criterion > * {
background-color: #fff;
color: #2d2d2d;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_title {
margin-right: 7px;
}
@@ -1039,6 +1056,9 @@ input.dp-applied {
overflow-x: hidden;
overflow-y: auto;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_lists .sfl_items > li:hover {
background-color: #f1f1f1;
}
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content .sfm_buttons {
display: none;
}

46
css/light-grey.scss
View File

@@ -884,8 +884,6 @@ input.dp-applied {
> *{
padding: 7px 8px;
vertical-align: top;
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;
@@ -902,8 +900,7 @@ input.dp-applied {
/* Criteria tags */
.search_form_criteria{
margin-right: 5px;
margin-right: 30px;
/* Non editable criteria */
&.locked{
@@ -938,6 +935,23 @@ input.dp-applied {
}
}
&:not(:last-of-type)::after{
/* TODO: Find an elegant way to do this, without hardcoding the content (could be a <style> in the markup) and margin. Note, only a few languages (hawaiian and stuff like this have more than 4 letters in for "and" word. */
content: "and";
position: absolute;
top: 8px;
left: calc(100% + 0px);
margin-right: 5px;
margin-left: 5px;
text-align: center;
color: $gray-light;
}
> *{
background-color: $search-criteria-box-bg-color;
color: $search-criteria-box-color;
}
/* Top left corner icons */
.sfc_close,
.sfc_toggle{
@@ -1017,11 +1031,7 @@ input.dp-applied {
padding: 4px 8px; /* Putting back the padding remove by .sfc_opc_mc_items */
&:hover{
background-color: $white;
/* TODO: Try with this */
/*background-color: $search-criteria-box-border-color;
color: $white;*/
background-color: $search-criteria-box-hover-color;
}
label{
@@ -1164,13 +1174,12 @@ input.dp-applied {
}
}
}
}
/* More criterion */
.sf_more_criterion{
margin-right: 5px;
&.opened{
z-index: 2; /* To be over criterion */
@@ -1185,6 +1194,10 @@ input.dp-applied {
}
}
> *{
background-color: $search-add-criteria-box-bg-color;
color: $search-add-criteria-box-color;
}
.sfm_toggler{
.sfm_tg_title{
margin-right: 7px;
@@ -1193,7 +1206,6 @@ input.dp-applied {
color: $search-criteria-box-picto-color;
}
}
.sfm_content{
display: none;
min-width: 200px; /* To avoid element going to thin on filter, not very slick */
@@ -1204,6 +1216,14 @@ input.dp-applied {
max-height: 400px;
overflow-x: hidden;
overflow-y: auto;
.sfl_items{
> li{
&:hover{
background-color: $search-add-criteria-box-hover-color;
}
}
}
}
.sfm_buttons{
display: none;

4
js/search/search_form_handler.js
View File

@@ -540,6 +540,7 @@ $(function()
};
me._addCriteria(oData);
});
me._closeMoreCriterion();
}
// Clear all
@@ -626,7 +627,8 @@ $(function()
// Create DOM element
var oCriteriaElem = $('<div></div>')
.addClass('sf_criteria')
.insertBefore(this.elements.more_criterion);
//.insertBefore(this.elements.more_criterion);
.appendTo(this.elements.criterion_area);
// Instanciate widget
$.itop[sWidgetName](oData, oCriteriaElem);