From 73f94b96350168517d737ee694beb191780654c2 Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 19 Aug 2022 15:58:34 +0200 Subject: [PATCH] feat(header): switch to DSFR translate component and dropdown component --- app/assets/stylesheets/utils.scss | 4 ++ app/views/layouts/_account_dropdown.haml | 33 +++++------- app/views/layouts/_header.haml | 51 +++++++++---------- app/views/layouts/_locale_dropdown.html.haml | 26 +++++----- config/locales/en.yml | 6 +++ config/locales/fr.yml | 6 +++ .../views/layouts/_account_dropdown.en.yml | 1 + .../views/layouts/_account_dropdown.fr.yml | 1 + spec/system/i18n_spec.rb | 4 +- 9 files changed, 70 insertions(+), 62 deletions(-) diff --git a/app/assets/stylesheets/utils.scss b/app/assets/stylesheets/utils.scss index 6aa666347..bbb809d71 100644 --- a/app/assets/stylesheets/utils.scss +++ b/app/assets/stylesheets/utils.scss @@ -65,6 +65,10 @@ } } +.relative { + position: relative; +} + // display .hidden { display: none; diff --git a/app/views/layouts/_account_dropdown.haml b/app/views/layouts/_account_dropdown.haml index f81b8b2a9..103906d31 100644 --- a/app/views/layouts/_account_dropdown.haml +++ b/app/views/layouts/_account_dropdown.haml @@ -1,7 +1,13 @@ +<<<<<<< HEAD %nav.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) } .fr-nav__item %button.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } +======= +%nav.fr-nav{role: "navigation"} + .fr-nav__item + %button.fr-translate__btn.fr-btn.fr-btn--tertiary{"aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts])} +>>>>>>> 62ec6eeed (feat(header): switch to DSFR translate component and dropdown component) = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy'   = " #{current_email}" @@ -35,25 +41,10 @@ = t('go_admin', scope: [:layouts]) %li - = link_to instructeur_procedures_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('go_instructor', scope: [:layouts]) - - if expert_signed_in? && nav_bar_profile != :expert + = link_to profil_path, class: "fr-nav__link flex align-center" do + = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1' + = t('profile', scope: [:layouts]) %li - = link_to expert_all_avis_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('go_expert', scope: [:layouts]) - - if administrateur_signed_in? && nav_bar_profile != :administrateur - %li - = link_to admin_procedures_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('go_admin', scope: [:layouts]) - - %li - = link_to profil_path, class: "menu-item menu-link" do - = image_tag "icons/switch-profile.svg", alt: '' - = t('profile', scope: [:layouts]) - %li - = link_to destroy_user_session_path, method: :delete, class: "menu-item menu-link" do - = image_tag "icons/sign-out.svg", alt: '' - = t('logout', scope: [:layouts]) + = link_to destroy_user_session_path, method: :delete, class: "fr-nav__link flex align-center" do + = image_tag "icons/sign-out.svg", alt: '', width: 20, height: 20, class: 'mr-1' + = t('logout', scope: [:layouts]) diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 8d2b5cd04..a59f3351c 100644 --- a/app/views/layouts/_header.haml +++ b/app/views/layouts/_header.haml @@ -5,6 +5,7 @@ - is_instructeur_context = nav_bar_profile == :instructeur && instructeur_signed_in? - is_expert_context = nav_bar_profile == :expert && expert_signed_in? - is_user_context = nav_bar_profile == :user +- is_search_enabled = [params[:controller] == 'recherche', is_instructeur_context, is_expert_context, is_user_context && current_user.dossiers.count].any? %header.fr-header{ class: current_page?(root_path) ? nil : "new-header-with-border", role: "banner"} .fr-header__body .fr-container @@ -20,6 +21,7 @@ - if is_search_enabled %button.fr-btn--search.fr-btn{ "aria-controls" => "search-modal", "data-fr-opened" => "false", :title => t('views.users.dossiers.search.search_file') }= t('views.users.dossiers.search.search_file') %button#button_burger.fr-btn--menu.fr-btn{ "aria-controls" => "burger-menu", "aria-haspopup" => "menu", "data-fr-opened" => "false", :title => "Menu" } Menu + .fr-header__service - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile) @@ -28,7 +30,8 @@ %p.fr-header__service-tagline Simplement dématérialiser .fr-header__tools - .fr-header__tools-links + .fr-header__tools-links.relative + %ul.fr-btns-group - if instructeur_signed_in? || user_signed_in? %li @@ -52,9 +55,9 @@ - else = render partial: 'shared/help/help_button' - - if localization_enabled? - %li - = render partial: 'layouts/locale_dropdown' + - if localization_enabled? + = render partial: 'layouts/locale_dropdown' + - if params[:controller] == 'recherche' = render partial: 'layouts/search_dossiers_form', locals: { search_endpoint: recherche_index_path } @@ -74,33 +77,27 @@ %button.fr-btn--close.fr-btn{ "aria-controls" => "burger-menu", :title => t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header]) .fr-header__menu-links %nav#navigation-478.fr-nav{ "aria-label" => "Menu principal", :role => "navigation" } - %ul.fr-nav__list - -# Questionner UX pour un back JS - - if params[:controller] == 'users/commencer' - %li.fr-nav__item + #burger-menu.fr-header__menu.fr-modal{"aria-labelledby" => "button-477"} + .fr-container + %button.fr-btn--close.fr-btn{"aria-controls" => "burger-menu", :title => "Fermer"} Fermer + %div.fr-header__menu-links + %nav#navigation-478.fr-nav{"aria-label" => "Menu principal", :role => "navigation"} = link_to t('layouts.header.back'), url_for(:back), title: t('layouts.header.back'), class: 'fr-nav__link' - - if is_instructeur_context - if current_instructeur.procedures.any? - current_url = request.path_info %li.fr-nav__item - = link_to 'Revenir en arrière', url_for(:back), title: "Revenir sur le site de mon administration", class: 'fr-nav__link' + = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' + - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } - - if is_instructeur_context - - if current_instructeur.procedures.any? - - current_url = request.path_info - %li.fr-nav__item - = active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' - - if current_instructeur.user.expert && current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } + - if is_expert_context + - if current_expert.user.instructeur && current_instructeur.procedures.any? + %li.fr-nav__item= active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' + - if current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } - - if is_expert_context - - if current_expert.user.instructeur && current_instructeur.procedures.any? - %li.fr-nav__item= active_link_to t('utils.procedure'), instructeur_procedures_path, active: ['dossiers','procedures'].include?(controller_name), class: 'fr-nav__link' - - if current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } - - - if is_user_context - %li.fr-nav__item= active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'fr-nav__link' - - if current_user.expert && current_expert.avis_summary[:total] > 0 - = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } + - if is_user_context + %li.fr-nav__item= active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'fr-nav__link' + - if current_user.expert && current_expert.avis_summary[:total] > 0 + = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } diff --git a/app/views/layouts/_locale_dropdown.html.haml b/app/views/layouts/_locale_dropdown.html.haml index f0cd75a98..72d60796b 100644 --- a/app/views/layouts/_locale_dropdown.html.haml +++ b/app/views/layouts/_locale_dropdown.html.haml @@ -1,12 +1,14 @@ -.dropdown.locale-dropdown.header-menu-opener{ data: { controller: 'menu-button' } } - %button.button.dropdown-button.icon-only.header-menu-button{ title: t('.languages'), data: { menu_button_target: 'button' } } - %span.hidden - = t('.languages') - = image_tag "icons/translate-icon.svg", alt: t('.languages'), width: 24, height: 24, loading: :lazy, aria: { hidden: true } - %ul.header-menu.dropdown-content{ data: { menu_button_target: 'menu' } } - %li - = active_link_to save_locale_path(locale: :fr), method: :post, class: "menu-item menu-link", active: I18n.locale == :fr do - Français - %li - = active_link_to save_locale_path(locale: :en), method: :post, class: "menu-item menu-link", active: I18n.locale == :en do - English +%nav.fr-translate.fr-nav{:role => "navigation", title: t('.select_locale')} + .fr-nav__item + %button.fr-translate__btn.fr-btn.fr-btn--tertiary{"aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale')} + = t(".#{I18n.locale}") + %span.fr-hidden-lg= t('.francais') + #translate.fr-collapse.fr-menu + %ul.fr-menu__list + %li + = active_link_to save_locale_path(locale: :fr), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :fr, "aria-current" => I18n.locale == :fr, hreflang: "fr", lang: "fr" do + = t('.fr_francais') + %li + = active_link_to save_locale_path(locale: :en), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :en, "aria-current" => I18n.locale == :en, hreflang: "en", lang: "en" do + = t('.en_english') + diff --git a/config/locales/en.yml b/config/locales/en.yml index 79c9dcbde..d9b8a191f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -72,6 +72,12 @@ en: back_title: "Revenir sur le site de mon administration" locale_dropdown: languages: "Languages" + select_locale: "Choose a language" + fr: FR + en: EN + francais: " - French" + fr_francais: FR - French + en_english: EN - English notifications: actions: access: View your File diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 279a27b39..b49940655 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -62,6 +62,12 @@ fr: back_title: "Revenir sur le site de mon administration" locale_dropdown: languages: "Langues" + select_locale: "Sélectionner une langue" + fr: FR + en: EN + francais: " - Français" + fr_francais: FR - Français + en_english: EN - Anglais notifications: actions: access: Consulter mon dossier diff --git a/config/locales/views/layouts/_account_dropdown.en.yml b/config/locales/views/layouts/_account_dropdown.en.yml index 35c1c1378..951014cf7 100644 --- a/config/locales/views/layouts/_account_dropdown.en.yml +++ b/config/locales/views/layouts/_account_dropdown.en.yml @@ -9,3 +9,4 @@ en: go_admin: "Switch to administrator" profile: "See my profile" logout: "Log out" + my_account: "My account" diff --git a/config/locales/views/layouts/_account_dropdown.fr.yml b/config/locales/views/layouts/_account_dropdown.fr.yml index f663ec105..ee25fc153 100644 --- a/config/locales/views/layouts/_account_dropdown.fr.yml +++ b/config/locales/views/layouts/_account_dropdown.fr.yml @@ -9,3 +9,4 @@ fr: go_admin: "Passer en administrateur" profile: "Voir mon profil" logout: "Se déconnecter" + my_account: "Mon compte" diff --git a/spec/system/i18n_spec.rb b/spec/system/i18n_spec.rb index 681e6a32f..32430e71e 100644 --- a/spec/system/i18n_spec.rb +++ b/spec/system/i18n_spec.rb @@ -7,8 +7,8 @@ describe 'Accessing the website in different languages:' do visit new_user_session_path expect(page).to have_text('Connectez-vous') - click_on 'Langues' - click_on 'English' + find('.fr-translate__btn').click + find('.fr-nav__link[hreflang="en"]').click # The page is now in English expect(page).to have_text('Sign in')