From 6db38a10c64ac7d7c36188fdf165133a16de26f0 Mon Sep 17 00:00:00 2001 From: "madjid.asa" Date: Wed, 30 Oct 2024 12:23:47 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20fix=20dsfr=20des=20champs=20multiselect?= =?UTF-8?q?=20de=20perim=C3=A8tres?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lemarche/static/itou_marche/itou_marche.scss | 27 ++++++++- .../static/js/perimeter_autocomplete_field.js | 59 ++++++++++--------- lemarche/templates/siaes/search_results.html | 2 +- 3 files changed, 55 insertions(+), 33 deletions(-) diff --git a/lemarche/static/itou_marche/itou_marche.scss b/lemarche/static/itou_marche/itou_marche.scss index 5df098940..bfb6be3d6 100644 --- a/lemarche/static/itou_marche/itou_marche.scss +++ b/lemarche/static/itou_marche/itou_marche.scss @@ -151,7 +151,6 @@ ul.summary-grid-list { } .cmsfr-background-dark { - & h1, h2, h3, @@ -164,7 +163,7 @@ ul.summary-grid-list { } .fr-header__service-title em { - font-weight: lighter + font-weight: lighter; } .cmsfr-author_card__header { @@ -181,4 +180,26 @@ ul.summary-grid-list { .fr-content-media { margin: 0; -} \ No newline at end of file +} + +.autocomplete__input, +.autocomplete__input--default { + --idle: transparent; + --hover: var(--background-contrast-grey-hover); + --active: var(--background-contrast-grey-active); + background-color: var(--background-contrast-grey); + border-radius: 0.25rem 0.25rem 0 0; + box-shadow: inset 0 -2px 0 0 var(--border-plain-grey); + color: var(--text-default-grey); + display: block; + font-size: 1rem; + line-height: 1.5rem; + padding: 0.5rem 1rem; + width: 100%; +} +.autocomplete__menu { + /* Style DSFR pour le menu */ + border: 1px solid #000091; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); + padding: 8px; +} diff --git a/lemarche/static/js/perimeter_autocomplete_field.js b/lemarche/static/js/perimeter_autocomplete_field.js index 7243a71a3..4d7bde384 100644 --- a/lemarche/static/js/perimeter_autocomplete_field.js +++ b/lemarche/static/js/perimeter_autocomplete_field.js @@ -36,12 +36,12 @@ async function fetchSource(query, kind = undefined) { } class PerimeterAutocomplete { - constructor(perimeter_container_name, perimeter_input_id, perimeter_placeholder='Région, ville…', perimeter_kind = undefined) { - this.perimeter_container_name= perimeter_container_name; - this.perimeter_input_id= perimeter_input_id; - this.perimeter_kind= perimeter_kind; - this.perimeter_placeholder= perimeter_placeholder; - this.perimeter_name_input_id= `${this.perimeter_input_id}_name`; + constructor(perimeter_container_name, perimeter_input_id, perimeter_placeholder = 'Région, ville…', perimeter_kind = undefined) { + this.perimeter_container_name = perimeter_container_name; + this.perimeter_input_id = perimeter_input_id; + this.perimeter_kind = perimeter_kind; + this.perimeter_placeholder = perimeter_placeholder; + this.perimeter_name_input_id = `${this.perimeter_input_id}_name`; this.perimeterAutocompleteContainer = document.getElementById(perimeter_container_name); this.perimeterInput = document.getElementById(perimeter_input_id); // hidden this.initial_value_name = this.perimeterAutocompleteContainer.dataset.inputValue; @@ -49,7 +49,7 @@ class PerimeterAutocomplete { } init() { - if(!this.isInit) { + if (!this.isInit) { this.isInit = true; accessibleAutocomplete({ element: this.perimeterAutocompleteContainer, @@ -98,7 +98,7 @@ class PerimeterAutocomplete { inputValue(result) { // strip html from suggestion - if(!result) { + if (!result) { return result; } let resultName, resultKind = ''; @@ -137,12 +137,12 @@ class PerimeterAutocomplete { } cleanPerimeter() { - this.perimeterInputName.value =''; - this.perimeterInput.value =''; + this.perimeterInputName.value = ''; + this.perimeterInput.value = ''; } - disablePerimeter(disable_it=true) { - if(disable_it){ + disablePerimeter(disable_it = true) { + if (disable_it) { this.cleanPerimeter(); this.perimeterInput.setAttribute('disabled', true); this.perimeterInputName.setAttribute('disabled', true); @@ -155,11 +155,11 @@ class PerimeterAutocomplete { class PerimetersMultiAutocomplete { constructor( - perimeter_autocomplete_id='id_perimeters', - perimeter_autocomplete_container_selector='#dir_form_perimeters', - perimeter_selected_container_selector='#perimeters-selected', - perimeter_hidden_input_selector_prefix='hiddenPerimeter', - perimeter_current_id='current-perimeters') { + perimeter_autocomplete_id = 'id_perimeters', + perimeter_autocomplete_container_selector = '#dir_form_perimeters', + perimeter_selected_container_selector = '#perimeters-selected', + perimeter_hidden_input_selector_prefix = 'hiddenPerimeter', + perimeter_current_id = 'current-perimeters') { this.perimeter_autocomplete_id = perimeter_autocomplete_id; this.perimeter_autocomplete_container_selector = perimeter_autocomplete_container_selector; this.perimeter_autocomplete_container = document.querySelector(this.perimeter_autocomplete_container_selector); @@ -173,9 +173,8 @@ class PerimetersMultiAutocomplete { } init() { - if(!this.isInit) { + if (!this.isInit) { this.isInit = true; - accessibleAutocomplete({ element: this.perimeter_autocomplete_container, id: this.perimeter_autocomplete_id, @@ -185,6 +184,8 @@ class PerimetersMultiAutocomplete { defaultValue: "", source: debounce(this.getSource, 300), displayMenu: 'overlay', + inputClasses: 'fr-input', + menuClasses: 'fr-menu', templates: { inputValue: this.inputValue, // returns the string value to be inserted into the input suggestion: this.suggestion, // used when rendering suggestions, and should return a string, which can contain HTML @@ -278,18 +279,18 @@ class PerimetersMultiAutocomplete { let removeIcon = $('', { class: "fr-icon-close-line", "aria-hidden": true }); let resultIdString = `${this.perimeter_hidden_input_selector_prefix}-${resultId}`; $('', { - type: 'hidden', - id: resultIdString, - name: this.perimeter_autocomplete_container_input_name, - value: resultId + type: 'hidden', + id: resultIdString, + name: this.perimeter_autocomplete_container_input_name, + value: resultId }).appendTo(this.perimeter_selected_container); let button = $('