diff --git a/css/backoffice/components/_quick-create.scss b/css/backoffice/components/_quick-create.scss index 5f0090f30..0f543d2af 100644 --- a/css/backoffice/components/_quick-create.scss +++ b/css/backoffice/components/_quick-create.scss @@ -50,6 +50,8 @@ $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-image--margin-right: 8px !default; $ibo-quick-create--compartment-element-image--width: 20px !default; @@ -138,6 +140,12 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70 color: $ibo-quick-create--input--placeholder-color; } } + > .item{ + color: $ibo-quick-create--input--text-color; + @extend %ibo-font-ral-nor-300; + + line-height: 200%; + } } .selectize-dropdown{ background-color: $ibo-quick-create--input-options--background-color; @@ -206,6 +214,17 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70 margin-right: $ibo-quick-create--compartment-element-image--margin-right; width: $ibo-quick-create--compartment-element-image--width; } + +.ibo-quick-create--compartment-results--element > .option{ + margin-bottom: $ibo-quick-create--compartment-element--margin-bottom; + color: inherit; + + &:hover{ + cursor: pointer; + @extend a:hover; + } +} + .ibo-quick-create--compartment--placeholder{ align-items: center; display: flex; diff --git a/js/components/quick-create.js b/js/components/quick-create.js index 3ebca8a31..c18f758b9 100644 --- a/js/components/quick-create.js +++ b/js/components/quick-create.js @@ -38,6 +38,7 @@ $(function() form: '[data-role="ibo-quick-create--head"]', input: '[data-role="ibo-quick-create--input"]', compartment_element: '[data-role="ibo-quick-create--compartment-element"]', + select_dropdown_parent: '[data-role="ibo-quick-create--compartment-results"]' }, // the constructor @@ -57,10 +58,15 @@ $(function() { const me = this; + // TODO 2.8.0 Use config parameter for maxOptions value // Instantiate selectize.js on input this.element.find(this.js_selectors.input).selectize({ + dropdownParent: this.js_selectors.select_dropdown_parent, + dropdownClass: 'ibo-quick-create--compartment-results--container', + dropdownContentClass: 'ibo-quick-create--compartment-results--element', openOnFocus: false, - maxItems: 1 + maxItems: 1, + maxOptions: 10, }); // Remove some inline styling from the widget diff --git a/templates/components/quick-create/layout.html.twig b/templates/components/quick-create/layout.html.twig index 02819458e..eb8b1171d 100644 --- a/templates/components/quick-create/layout.html.twig +++ b/templates/components/quick-create/layout.html.twig @@ -12,6 +12,8 @@