From 530d36b6df80b24d89b93cce55fc3aa8aac2f05c Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Tue, 2 May 2023 19:07:53 +0200 Subject: [PATCH] use dropdown to hide filter form --- app/assets/stylesheets/dsfr.scss | 20 +++++-- .../user_filter_component.en.yml | 2 + .../user_filter_component.fr.yml | 2 + .../user_filter_component.html.haml | 53 ++++++++++--------- 4 files changed, 50 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss index 81727d1a1..b412f7981 100644 --- a/app/assets/stylesheets/dsfr.scss +++ b/app/assets/stylesheets/dsfr.scss @@ -39,9 +39,11 @@ input[type="radio"] { } // scss-lint:enable DuplicateProperty -// remove additional calendar icon on date input already handle by navigator -.fr-input[type="date"] { - background-image: none; +// remove additional calendar icon on date input already handle by Firefox navigator +@-moz-document url-prefix() { + .fr-input[type="date"] { + background-image: none; + } } // remove pointer cursor on textarea @@ -71,3 +73,15 @@ fieldset { color: $light-red; box-shadow: 0px 0px 0px 1px $light-red; } + +// on utilise le dropdown de sélecteur de langue pour un autre usage donc on veut retirer l'icone +.fr-translate .fr-translate__btn.custom-fr-translate-no-icon::before { + display: none; +} + +// on veut ferrer à droite le dropdown de sélecteur de langue +@media (min-width: 62em) { + .fr-nav__item.custom-fr-translate-flex-end { + align-items: flex-end; + } +} diff --git a/app/components/dossiers/user_filter_component/user_filter_component.en.yml b/app/components/dossiers/user_filter_component/user_filter_component.en.yml index 34b43b391..d31274c28 100644 --- a/app/components/dossiers/user_filter_component/user_filter_component.en.yml +++ b/app/components/dossiers/user_filter_component/user_filter_component.en.yml @@ -6,3 +6,5 @@ en: button: apply_filters: Apply filters reset_filters: Reset filters + select_filters: Select a filter + filter_title: Filter diff --git a/app/components/dossiers/user_filter_component/user_filter_component.fr.yml b/app/components/dossiers/user_filter_component/user_filter_component.fr.yml index fae3da666..5401c7b6b 100644 --- a/app/components/dossiers/user_filter_component/user_filter_component.fr.yml +++ b/app/components/dossiers/user_filter_component/user_filter_component.fr.yml @@ -6,3 +6,5 @@ fr: button: apply_filters: Appliquer les filtres reset_filters: Réinitialiser les filtres + select_filters: Sélectionner un filtre + filter_title: Filtrer diff --git a/app/components/dossiers/user_filter_component/user_filter_component.html.haml b/app/components/dossiers/user_filter_component/user_filter_component.html.haml index f81993cbb..63f994ecc 100644 --- a/app/components/dossiers/user_filter_component/user_filter_component.html.haml +++ b/app/components/dossiers/user_filter_component/user_filter_component.html.haml @@ -1,28 +1,33 @@ -= form_with(url: dossiers_path(), method: :get ) do |f| - = f.hidden_field :statut, value: @statut - .fr-grid-row.fr-grid-row--gutters - .fr-col-12.fr-col-md-6 - %fieldset#checkboxes-inline.fr-fieldset{ "aria-labelledby" => "checkboxes-inline-legend checkboxes-inline-messages" } - %legend.fr-fieldset__legend--regular.fr-fieldset__legend - = t('.legend.states') - = f.collection_check_boxes :states, states_collection(@statut), :to_s, :to_s, include_hidden: false do |b| - .fr-fieldset__element.fr-fieldset__element--inline - .fr-checkbox-group.fr-ml-2w.fr-py-1w - = b.check_box(checked: filter.states_filtered?(b.value)) - = b.label(class: 'fr-label') { dossier_display_state(b.text) } +.fr-grid-row + .fr-col + %nav.fr-translate.fr-nav{ role: "filter" } + .fr-nav__item.custom-fr-translate-flex-end + %button.fr-translate__btn.translate-no-icon.fr-btn.fr-btn--tertiary.custom-fr-translate-no-icon{ "aria-controls" => "filters", "aria-expanded" => "false", title: t('.button.select_filters') } + = t('.button.filter_title') + #filters.fr-collapse.fr-translate__menu.fr-menu + %ul.fr-menu__list.fr-p-3w + = form_with(url: dossiers_path(), method: :get ) do |f| + = f.hidden_field :statut, value: @statut - .fr-col-12.fr-col-md-3 - .fr-input-group - = f.label 'from_created_at_date', t('.legend.created_at'), class: 'fr-label' - = f.date_field 'from_created_at_date', value: @filter.from_created_at_date, class: 'fr-input' + %fieldset#checkboxes.fr-fieldset{ "aria-labelledby" => "checkboxes-legend checkboxes-messages" } + %legend#checkboxes-legend.fr-fieldset__legend--regular.fr-fieldset__legend + = t('.legend.states') + = f.collection_check_boxes :states, states_collection(@statut), :to_s, :to_s, include_hidden: false do |b| + .fr-fieldset__element + .fr-checkbox-group.fr-ml-2w.fr-py-1w + = b.check_box(checked: filter.states_filtered?(b.value)) + = b.label(class: 'fr-label') { dossier_display_state(b.text) } - .fr-col-12.fr-col-md-3 - .fr-input-group - = f.label 'from_depose_at_date', t('.legend.depose_at'), class: 'fr-label' - = f.date_field 'from_depose_at_date', value: @filter.from_depose_at_date, class: 'fr-input' - .fr-mb-2w - = f.submit t('.button.apply_filters'), class: 'fr-btn fr-btn--sm' - = link_to t('.button.reset_filters'), dossiers_path(statut: @statut), class: 'fr-btn fr-btn--sm fr-btn--tertiary-no-outline' + .fr-input-group + = f.label 'from_created_at_date', t('.legend.created_at'), class: 'fr-label' + = f.date_field 'from_created_at_date', value: @filter.from_created_at_date, class: 'fr-input' - %hr + + .fr-input-group + = f.label 'from_depose_at_date', t('.legend.depose_at'), class: 'fr-label' + = f.date_field 'from_depose_at_date', value: @filter.from_depose_at_date, class: 'fr-input' + + .fr-my-2w + = f.submit t('.button.apply_filters'), class: 'fr-btn fr-btn--sm' + = link_to t('.button.reset_filters'), dossiers_path(statut: @statut), class: 'fr-btn fr-btn--sm fr-btn--tertiary-no-outline'