DGNum/demarches-normaliennes
11
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

feat(header): switch to DSFR translate component and dropdown component

Browse source
This commit is contained in:
Martin 2022-08-19 15:58:34 +02:00 committed by mfo
parent 96cdae0dd5
commit 73f94b9635
9 changed files with 70 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/utils.scss
View file

@ -65,6 +65,10 @@
}
}
.relative {
position: relative;
}
// display
.hidden {
display: none;

33
app/views/layouts/_account_dropdown.haml
View file

@ -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'
&nbsp;
= " #{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])

51
app/views/layouts/_header.haml
View file

@ -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 }

26
app/views/layouts/_locale_dropdown.html.haml
View file

@ -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')

6
config/locales/en.yml
View file

@ -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

6
config/locales/fr.yml
View file

@ -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

1
config/locales/views/layouts/_account_dropdown.en.yml
View file

@ -9,3 +9,4 @@ en:
go_admin: "Switch to administrator"
profile: "See my profile"
logout: "Log out"
my_account: "My account"

1
config/locales/views/layouts/_account_dropdown.fr.yml
View file

@ -9,3 +9,4 @@ fr:
go_admin: "Passer en administrateur"
profile: "Voir mon profil"
logout: "Se déconnecter"
my_account: "Mon compte"

4
spec/system/i18n_spec.rb
View file

@ -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')