From d601f92be84b81ddc06c4ec36d9d6067e1c24d58 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Wed, 15 Nov 2023 11:35:15 +0100 Subject: [PATCH] add links in footer and page profil and modal to choose scheme --- app/views/layouts/_display_modal.html.haml | 41 +++++++++++++++++++ app/views/layouts/application.html.haml | 2 + app/views/users/_general_footer_row.html.haml | 3 ++ app/views/users/profil/show.html.haml | 4 ++ config/locales/links.en.yml | 1 + config/locales/links.fr.yml | 1 + 6 files changed, 52 insertions(+) create mode 100644 app/views/layouts/_display_modal.html.haml diff --git a/app/views/layouts/_display_modal.html.haml b/app/views/layouts/_display_modal.html.haml new file mode 100644 index 000000000..237a5f966 --- /dev/null +++ b/app/views/layouts/_display_modal.html.haml @@ -0,0 +1,41 @@ +%dialog#fr-theme-modal.fr-modal{ "aria-labelledby" => "fr-theme-modal-title", role: "dialog" } + .fr-container.fr-container--fluid.fr-container-md + .fr-grid-row.fr-grid-row--center + .fr-col-12.fr-col-md-6.fr-col-lg-4 + .fr-modal__body + .fr-modal__header + %button#button-5622.fr-btn--close.fr-btn{ "aria-controls" => "fr-theme-modal", title: "Fermer" } Fermer + .fr-modal__content + %h1#fr-theme-modal-title.fr-modal__title Paramètres d’affichage + #fr-display.fr-display + %fieldset#display-fieldset.fr-fieldset + %legend#display-fieldset-legend.fr-fieldset__legend--regular.fr-fieldset__legend Choisissez un thème pour personnaliser l’apparence du site. + .fr-fieldset__element + .fr-radio-group.fr-radio-rich + %input#fr-radios-theme-light{ name: "fr-radios-theme", type: "radio", value: "light" }/ + %label.fr-label{ for: "fr-radios-theme-light" } Thème clair + .fr-radio-rich__img + %svg.fr-artwork{ aria_hidden: "true", viewBox: "0 0 80 80", width: "80px", height: "80px" } + %use.fr-artwork-decorative{ href: image_path("pictograms/environment/sun.svg#artwork-decorative") } + %use.fr-artwork-minor{ href: image_path("pictograms/environment/sun.svg#artwork-minor") } + %use.fr-artwork-major{ href: image_path("pictograms/environment/sun.svg#artwork-major") } + .fr-fieldset__element + .fr-radio-group.fr-radio-rich + %input#fr-radios-theme-dark{ name: "fr-radios-theme", type: "radio", value: "dark" }/ + %label.fr-label{ for: "fr-radios-theme-dark" } Thème sombre + .fr-radio-rich__img + %svg.fr-artwork{ "aria-hidden" => "true", height: "80px", viewbox: "0 0 80 80", width: "80px" } + %use.fr-artwork-decorative{ href: image_path("pictograms/environment/moon.svg#artwork-decorative") } + %use.fr-artwork-minor{ href: image_path("pictograms/environment/moon.svg#artwork-minor") } + %use.fr-artwork-major{ href: image_path("pictograms/environment/moon.svg#artwork-major") } + .fr-fieldset__element + .fr-radio-group.fr-radio-rich + %input#fr-radios-theme-system{ name: "fr-radios-theme", type: "radio", value: "system" }/ + %label.fr-label{ for: "fr-radios-theme-system" } + Système + %span.fr-hint-text Utilise les paramètres système + .fr-radio-rich__img + %svg.fr-artwork{ "aria-hidden" => "true", height: "80px", viewbox: "0 0 80 80", width: "80px" } + %use.fr-artwork-decorative{ href: image_path("pictograms/system/system.svg#artwork-decorative") } + %use.fr-artwork-minor{ href: image_path("pictograms/system/system.svg#artwork-minor") } + %use.fr-artwork-major{ href: image_path("pictograms/system/system.svg#artwork-major") } diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index a425e5cd8..a99911dda 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -38,6 +38,8 @@ %body{ { id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil, data: { controller: 'turbo number-input' } }.compact } = render partial: 'layouts/skiplinks' + = render partial: 'layouts/display_modal' + .page-wrapper - if feature_enabled?(:team_on_strike) = render partial: 'layouts/strike_banner' diff --git a/app/views/users/_general_footer_row.html.haml b/app/views/users/_general_footer_row.html.haml index abe772670..5d63143cf 100644 --- a/app/views/users/_general_footer_row.html.haml +++ b/app/views/users/_general_footer_row.html.haml @@ -5,3 +5,6 @@ = link_to t("links.footer.mentions_legales.label"), MENTIONS_LEGALES_URL, title: t("links.footer.mentions_legales.title"), class: "fr-footer__bottom-link", rel: "noopener noreferrer" %li.fr-footer__bottom-item = link_to t("links.footer.cookies.label"), suivi_path, title: t("links.footer.cookies.title"), class: "fr-footer__bottom-link" + %li.fr-footer__bottom-item + %button.fr-footer__bottom-link.fr-icon-theme-fill.fr-btn--icon-left{ aria: {controls: "fr-theme-modal" }, data: {'fr-opened': "false" } } + = t('links.footer.display_params') diff --git a/app/views/users/profil/show.html.haml b/app/views/users/profil/show.html.haml index a9a4703ba..6dba6b8e1 100644 --- a/app/views/users/profil/show.html.haml +++ b/app/views/users/profil/show.html.haml @@ -17,6 +17,10 @@ = link_to 'Refuser la fusion', refuse_merge_path, method: :post, class: 'fr-btn fr-btn--secondary', data: { confirm: "Confirmez-vous le refus ?" } = link_to 'Accepter la fusion', accept_merge_path, method: :post, class: 'fr-btn fr-btn--secondary', data: { confirm: "Confirmez-vous la fusion des comptes ?" } + .card + .card-title Choisissez un thème pour personnaliser l’apparence du site + = link_to t('links.footer.display_params'),'#', { aria: {controls: "fr-theme-modal" }, data: {'fr-opened': "false" }, class: 'fr-icon-theme-fill fr-link--icon-left fr-link' } + .card .card-title= t('.contact') %p diff --git a/config/locales/links.en.yml b/config/locales/links.en.yml index a1aeddd58..93d0349f0 100644 --- a/config/locales/links.en.yml +++ b/config/locales/links.en.yml @@ -74,3 +74,4 @@ en: contact: label: Contact title: Contact + display_params: Display params diff --git a/config/locales/links.fr.yml b/config/locales/links.fr.yml index b9abf2635..c2ebb7e9e 100644 --- a/config/locales/links.fr.yml +++ b/config/locales/links.fr.yml @@ -86,3 +86,4 @@ fr: contact: label: Nous contacter title: Nous contacter + display_params: Paramètres d'affichage