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

N°3208 - Quick create: Fix several items:

Browse Source 
- Tab navigation no longer passing over history items
- Autocomplete results selection can now be done via up/down arrows
This commit is contained in:
Molkobain
2021-01-19 16:00:30 +01:00
parent cb28ca7941
commit aa2651ca71
2 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
css/backoffice/components/_quick-create.scss
View File

@@ -41,20 +41,25 @@ $ibo-quick-create--drawer--top: -1 * ($ibo-quick-create--drawer--max-height) !de
$ibo-quick-create--drawer--top--is-opened: 100% !default;
$ibo-quick-create--drawer--background-color: $ibo-color-white-100 !default;
$ibo-quick-create--compartment-title--margin-bottom: 8px !default;
$ibo-quick-create--compartment-title--margin-top: 8px !default;
$ibo-quick-create--compartment-title--margin-bottom: $ibo-quick-create--compartment-title--margin-top !default;
$ibo-quick-create--compartment-title--padding-left: 32px !default;
$ibo-quick-create--compartment-title--text-color: $ibo-color-grey-600 !default;
$ibo-quick-create--compartment-title--line-spacing: 8px !default;
$ibo-quick-create--compartment-content--text-color: $ibo-color-grey-900 !default;
$ibo-quick-create--compartment-element--margin-bottom: 8px !default;
$ibo-quick-create--compartment-results--element--option: $ibo-quick-create--compartment-element--margin-bottom !default;
$ibo-quick-create--compartment-element--padding-x: 8px !default;
$ibo-quick-create--compartment-element--padding-y: 4px !default;
$ibo-quick-create--compartment-element--margin-x: -1 * $ibo-quick-create--compartment-element--padding-x !default;
$ibo-quick-create--compartment-element--background-color--is-active: $ibo-color-grey-200 !default;
$ibo-quick-create--compartment-element--border-radius--is-active: $ibo-border-radius-300 !default;
$ibo-quick-create--compartment-element-image--margin-right: 8px !default;
$ibo-quick-create--compartment-element-image--width: 20px !default;
$ibo-quick-create--compartment-results--container--width: 100% !important !default;
$ibo-quick-create--compartment--placeholder-image--margin-top: 24px !default;
$ibo-quick-create--compartment--placeholder-image--margin-bottom: 16px !default;
$ibo-quick-create--compartment--placeholder-image--margin-x: auto !default;
@@ -168,6 +173,7 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70
@extend %ibo-font-ral-nor-100;
}
.ibo-quick-create--compartment-title{
margin-top: $ibo-quick-create--compartment-title--margin-top;
margin-bottom: $ibo-quick-create--compartment-title--margin-bottom;
padding-left: $ibo-quick-create--compartment-title--padding-left;
overflow-x: hidden;
@@ -202,27 +208,41 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70
.ibo-quick-create--compartment-element{
display: flex;
align-items: center;
padding: $ibo-quick-create--compartment-element--padding-y $ibo-quick-create--compartment-element--padding-x;
margin-left: $ibo-quick-create--compartment-element--margin-x;
margin-right: $ibo-quick-create--compartment-element--margin-x;
color: inherit;
@extend %ibo-text-truncated-with-ellipsis;
&:not(:last-child){
margin-bottom: $ibo-quick-create--compartment-element--margin-bottom;
}
}
.ibo-quick-create--compartment-element-image{
margin-right: $ibo-quick-create--compartment-element-image--margin-right;
width: $ibo-quick-create--compartment-element-image--width;
}
.ibo-quick-create--compartment-results--container{
width: $ibo-quick-create--compartment-results--container--width;
}
.ibo-quick-create--compartment-results--element > .option{
margin-bottom: $ibo-quick-create--compartment-element--margin-bottom;
padding: $ibo-quick-create--compartment-element--padding-y $ibo-quick-create--compartment-element--padding-x;
margin-left: $ibo-quick-create--compartment-element--margin-x;
margin-right: $ibo-quick-create--compartment-element--margin-x;
color: inherit;
@extend %ibo-text-truncated-with-ellipsis;
&.active{
background-color: $ibo-quick-create--compartment-element--background-color--is-active;
border-radius: $ibo-quick-create--compartment-element--border-radius--is-active;
}
&:hover{
cursor: pointer;
@extend a:hover;
}
.highlight{
font-weight: bold;
}
}
.ibo-quick-create--compartment--placeholder{

4
js/components/quick-create.js
View File

@@ -31,6 +31,7 @@ $(function()
css_classes:
{
opened: 'ibo-is-opened',
hidden: 'ibo-is-hidden',
},
js_selectors:
{
@@ -157,11 +158,14 @@ $(function()
},
_openDrawer: function()
{
this.element.find(this.js_selectors.compartment_element).removeClass(this.css_classes.hidden);
this.element.addClass(this.css_classes.opened);
},
_closeDrawer: function()
{
this.element.removeClass(this.css_classes.opened);
//Note: Elements are hidden to avoid having the keyboard navigation "TAB" passing throught them when they are not displayed
this.element.find(this.js_selectors.compartment_element).addClass(this.css_classes.hidden)
},
_setFocusOnInput: function()
{