From a0998ab709634f2f4c9e8e7e674763300c4980df Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Thu, 9 Nov 2023 14:32:52 +0100 Subject: [PATCH 01/17] import dark mode from DSFR and setup as system --- app/javascript/entrypoints/main.css | 1 + app/views/layouts/application.html.haml | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css index ed543d693..66fa14be9 100644 --- a/app/javascript/entrypoints/main.css +++ b/app/javascript/entrypoints/main.css @@ -1,5 +1,6 @@ @import '@gouvfr/dsfr/dist/core/core.css'; @import '@gouvfr/dsfr/dist/utility/utility.css'; +@import '@gouvfr/dsfr/dist/scheme/scheme.css'; /* These base components may be dependencies of other components */ @import '@gouvfr/dsfr/dist/component/link/link.css'; diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 932431329..a425e5cd8 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -1,5 +1,5 @@ !!! 5 -%html{ lang: html_lang, class: yield(:root_class) } +%html{ lang: html_lang, data: { fr_scheme: 'system' }, class: yield(:root_class) } %head %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" } %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" } From 11c8e408efb1b673e153e4a8921c75c19380eec3 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Thu, 9 Nov 2023 15:02:43 +0100 Subject: [PATCH 02/17] remove specific tabs css and use DSFR tabs --- app/assets/stylesheets/tabs.scss | 57 ------------------- app/javascript/entrypoints/main.css | 1 + .../procedures/apercu.html.haml | 4 +- .../procedures/index.html.haml | 4 +- app/views/experts/avis/_header.html.haml | 4 +- app/views/experts/avis/procedure.html.haml | 4 +- .../dossiers/_header_bottom.html.haml | 4 +- .../instructeurs/procedures/_tabs.html.haml | 4 +- .../instructeurs/procedures/index.html.haml | 4 +- app/views/root/patron.html.haml | 4 +- app/views/shared/_tab_item.html.haml | 4 +- app/views/users/dossiers/index.html.haml | 4 +- .../users/dossiers/show/_header.html.haml | 4 +- spec/system/experts/expert_spec.rb | 8 +-- .../routing/rules_full_scenario_spec.rb | 4 +- spec/system/users/list_dossiers_spec.rb | 2 +- .../users/dossiers/index.html.haml_spec.rb | 8 +-- .../dossiers/show/_header.html.haml_spec.rb | 2 +- 18 files changed, 35 insertions(+), 91 deletions(-) delete mode 100644 app/assets/stylesheets/tabs.scss diff --git a/app/assets/stylesheets/tabs.scss b/app/assets/stylesheets/tabs.scss deleted file mode 100644 index 7540b8ca9..000000000 --- a/app/assets/stylesheets/tabs.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import "colors"; -@import "mixins"; - -.tabs { - ul { - margin-bottom: 0; - padding: 0; - } - - li { - display: inline-block; - line-height: 36px; - position: relative; - text-align: center; - font-size: 14px; - border-radius: 3px 3px 0 0; - border: 1px solid transparent; - - a { - display: block; - padding-left: 20px; - padding-right: 20px; - color: $black; - background-image: none; - } - - &.active { - background-color: #FFFFFF; - border-top: 2px solid $blue-france-500; - border-left: 1px solid $border-grey; - border-right: 1px solid $border-grey; - - a { - color: $blue-france-500; - } - - .badge { - color: $blue-france-500; - } - } - - &:hover { - a { - color: $blue-france-500; - } - - .badge { - color: $blue-france-500; - } - } - - .notifications { - top: 3px; - right: 3px; - } - } -} diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css index 66fa14be9..b07341915 100644 --- a/app/javascript/entrypoints/main.css +++ b/app/javascript/entrypoints/main.css @@ -37,3 +37,4 @@ @import '@gouvfr/dsfr/dist/component/skiplink/skiplink.css'; @import '@gouvfr/dsfr/dist/component/password/password.css'; @import '@gouvfr/dsfr/dist/component/accordion/accordion.css'; +@import '@gouvfr/dsfr/dist/component/tab/tab.css'; diff --git a/app/views/administrateurs/procedures/apercu.html.haml b/app/views/administrateurs/procedures/apercu.html.haml index a9e55556f..c44643884 100644 --- a/app/views/administrateurs/procedures/apercu.html.haml +++ b/app/views/administrateurs/procedures/apercu.html.haml @@ -2,8 +2,8 @@ .fr-container %h1.page-title Prévisualisation de la démarche « #{@dossier.procedure.libelle} » - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = tab_item('le dossier', apercu_admin_procedure_path(@dossier.procedure, tab: 'dossier'), active: @tab == 'dossier') diff --git a/app/views/administrateurs/procedures/index.html.haml b/app/views/administrateurs/procedures/index.html.haml index 05c2f71b4..e66f1e7dc 100644 --- a/app/views/administrateurs/procedures/index.html.haml +++ b/app/views/administrateurs/procedures/index.html.haml @@ -5,8 +5,8 @@ = link_to "Nouvelle Démarche", new_from_existing_admin_procedures_path, id: 'new-procedure', class: 'fr-btn' .fr-container - %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul + %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } + %ul.fr-tabs__list = tab_item(t('pluralize.published', count: @procedures_publiees_count), admin_procedures_path(statut: 'publiees'), active: @statut == 'publiees', badge: number_with_html_delimiter(@procedures_publiees_count)) = tab_item('En test', admin_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count)) = tab_item(t('pluralize.closed', count: @procedures_closed_count), admin_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closed_count)) diff --git a/app/views/experts/avis/_header.html.haml b/app/views/experts/avis/_header.html.haml index 02d7860e2..eaccb2926 100644 --- a/app/views/experts/avis/_header.html.haml +++ b/app/views/experts/avis/_header.html.haml @@ -18,8 +18,8 @@ %span.fr-download__detail ZIP - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = dynamic_tab_item('Demande', expert_avis_path(avis.procedure, avis)) = dynamic_tab_item('Avis', instruction_expert_avis_path(avis.procedure, avis), notification: avis.answer.blank?) - if avis.procedure.allow_expert_messaging diff --git a/app/views/experts/avis/procedure.html.haml b/app/views/experts/avis/procedure.html.haml index 40edc6445..c6473c323 100644 --- a/app/views/experts/avis/procedure.html.haml +++ b/app/views/experts/avis/procedure.html.haml @@ -11,8 +11,8 @@ .procedure-header %h1.fr-h3= procedure_libelle @procedure - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = tab_item('avis à donner', procedure_expert_avis_index_path(statut: Instructeurs::AvisController::A_DONNER_STATUS), active: @statut == Instructeurs::AvisController::A_DONNER_STATUS, diff --git a/app/views/instructeurs/dossiers/_header_bottom.html.haml b/app/views/instructeurs/dossiers/_header_bottom.html.haml index d409f2aed..fb0fcaaf0 100644 --- a/app/views/instructeurs/dossiers/_header_bottom.html.haml +++ b/app/views/instructeurs/dossiers/_header_bottom.html.haml @@ -1,6 +1,6 @@ #header-bottom.fr-container - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list - notifications_summary = current_instructeur.notifications_for_dossier(dossier) = dynamic_tab_item(t('views.instructeurs.dossiers.tab_steps.request'), diff --git a/app/views/instructeurs/procedures/_tabs.html.haml b/app/views/instructeurs/procedures/_tabs.html.haml index b3dc9f2ff..58f796e09 100644 --- a/app/views/instructeurs/procedures/_tabs.html.haml +++ b/app/views/instructeurs/procedures/_tabs.html.haml @@ -1,5 +1,5 @@ -%nav.tabs.mt-3 - %ul +%nav.fr-tabs.mt-3 + %ul.fr-tabs__list = tab_item(t(tab_i18n_key_from_status('a-suivre')), instructeur_procedure_path(procedure, statut: 'a-suivre'), active: statut == 'a-suivre', diff --git a/app/views/instructeurs/procedures/index.html.haml b/app/views/instructeurs/procedures/index.html.haml index 9893c144c..71ecc1ee1 100644 --- a/app/views/instructeurs/procedures/index.html.haml +++ b/app/views/instructeurs/procedures/index.html.haml @@ -5,8 +5,8 @@ %h1.fr-h3.fr-mb-0 Démarches = render partial: 'instructeurs/procedures/synthese', locals: { procedures: @procedures, all_dossiers_counts: @all_dossiers_counts } - %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul + %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } + %ul.fr-tabs__list = tab_item(t('pluralize.en_cours', count: @procedures_en_cours_count), instructeur_procedures_path(statut: 'en-cours'), active: @statut == 'en-cours', badge: number_with_html_delimiter(@procedures_en_cours_count)) = tab_item(t('pluralize.en_test', count: @procedures_draft_count), instructeur_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count)) = tab_item(t('pluralize.closed', count: @procedures_closes_count), instructeur_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closes_count)) diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index d57c86f5c..6ccf40bdd 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -231,8 +231,8 @@ .sub-header .container Titre - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = tab_item("Onglet actif", "#", active: true) = tab_item("Onglet inactif", "#") = tab_item("Onglet avec badge", "#", badge: 2) diff --git a/app/views/shared/_tab_item.html.haml b/app/views/shared/_tab_item.html.haml index b6fb21372..27c65e513 100644 --- a/app/views/shared/_tab_item.html.haml +++ b/app/views/shared/_tab_item.html.haml @@ -1,7 +1,7 @@ %li{ class: (active ? 'active' : nil) } - if notification %span.notifications{ 'aria-label': 'notifications' } - = link_to(url, 'aria-current': active ? 'page' : nil) do + = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab' ) do - if badge.present? - %span.badge= badge + %span.badge.fr-mr-1w= badge = label diff --git a/app/views/users/dossiers/index.html.haml b/app/views/users/dossiers/index.html.haml index f9b90694c..ca3f1be23 100644 --- a/app/views/users/dossiers/index.html.haml +++ b/app/views/users/dossiers/index.html.haml @@ -25,8 +25,8 @@ = render Dossiers::UserProcedureFilterComponent.new(procedures_for_select: @procedures_for_select) - if @search_terms.blank? - %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul + %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } + %ul.fr-tabs__list - if @user_dossiers.present? = tab_item(t('pluralize.en_cours', count: @user_dossiers.count), dossiers_path(statut: 'en-cours', procedure_id: params[:procedure_id]), diff --git a/app/views/users/dossiers/show/_header.html.haml b/app/views/users/dossiers/show/_header.html.haml index d2b3194de..67be0feb1 100644 --- a/app/views/users/dossiers/show/_header.html.haml +++ b/app/views/users/dossiers/show/_header.html.haml @@ -21,8 +21,8 @@ title: t('views.users.dossiers.demande.edit_dossier_title') = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier }) - %nav.tabs - %ul + %nav.fr-tabs + %ul.fr-tabs__list = dynamic_tab_item(t('views.users.dossiers.show.header.summary'), dossier_path(dossier)) = dynamic_tab_item(t('views.users.dossiers.show.header.request'), [demande_dossier_path(dossier), modifier_dossier_path(dossier)]) = dynamic_tab_item(t('views.users.dossiers.show.header.mailbox'), messagerie_dossier_path(dossier)) diff --git a/spec/system/experts/expert_spec.rb b/spec/system/experts/expert_spec.rb index 3f3ae3741..74e187ab5 100644 --- a/spec/system/experts/expert_spec.rb +++ b/spec/system/experts/expert_spec.rb @@ -72,7 +72,7 @@ describe 'Inviting an expert:' do click_on '1 avis à donner' click_on avis.dossier.user.email - within('.tabs') { click_on 'Avis' } + within('.fr-tabs') { click_on 'Avis' } expect(page).to have_text("Demandeur : #{avis.claimant.email}") expect(page).to have_text('Cet avis est confidentiel') @@ -102,7 +102,7 @@ describe 'Inviting an expert:' do click_on '1 avis à donner' click_on avis.dossier.user.email - within('.tabs') { click_on 'Avis' } + within('.fr-tabs') { click_on 'Avis' } expect(page).to have_text("Demandeur : #{avis.claimant.email}") expect(page).to have_text('Question ?') expect(page).to have_text('Cet avis est confidentiel') @@ -200,7 +200,7 @@ describe 'Inviting an expert:' do click_on '1 avis à donner' click_on avis_1.dossier.user.email - within('.tabs') { click_on 'Avis' } + within('.fr-tabs') { click_on 'Avis' } expect(page).to have_text("Demandeur : #{avis_1.claimant.email}") click_on 'Voir les avis' expect(page).to have_text("Vous") @@ -216,7 +216,7 @@ describe 'Inviting an expert:' do click_on '1 avis à donner' click_on avis_2.dossier.user.email - within('.tabs') { click_on 'Avis' } + within('.fr-tabs') { click_on 'Avis' } expect(page).to have_text("Demandeur : #{avis_2.claimant.email}") click_on 'Voir les avis' expect(page).to have_text("Vous") diff --git a/spec/system/routing/rules_full_scenario_spec.rb b/spec/system/routing/rules_full_scenario_spec.rb index cba6ac0ac..08dff3fe9 100644 --- a/spec/system/routing/rules_full_scenario_spec.rb +++ b/spec/system/routing/rules_full_scenario_spec.rb @@ -204,14 +204,14 @@ describe 'The routing with rules', js: true do ## on the dossiers list click_on procedure.libelle expect(page).to have_current_path(instructeur_procedure_path(procedure)) - expect(find('.tabs')).to have_css('span.notifications') + expect(find('.fr-tabs')).to have_css('span.notifications') ## on the dossier itself click_on 'suivi' click_on litteraire_user.email expect(page).to have_current_path(instructeur_dossier_path(procedure, litteraire_user.dossiers.first)) expect(page).to have_text('Annotations privées') - expect(find('.tabs')).to have_css('span.notifications') + expect(find('.fr-tabs')).to have_css('span.notifications') log_out # the scientifiques instructeurs should not have a notification diff --git a/spec/system/users/list_dossiers_spec.rb b/spec/system/users/list_dossiers_spec.rb index 3f8938f9b..c00436d63 100644 --- a/spec/system/users/list_dossiers_spec.rb +++ b/spec/system/users/list_dossiers_spec.rb @@ -231,7 +231,7 @@ describe 'user access to the list of their dossiers', js: true do it "appears in the result list" do expect(current_path).to eq(dossiers_path) expect(page).to have_content("Résultat de la recherche pour « #{dossier_en_construction.id} »") - expect(page).not_to have_css('.tabs') + expect(page).not_to have_css('.fr-tabs') expect(page).to have_content(dossier_en_construction.id) end end diff --git a/spec/views/users/dossiers/index.html.haml_spec.rb b/spec/views/users/dossiers/index.html.haml_spec.rb index 3f9eacd84..0fe392a35 100644 --- a/spec/views/users/dossiers/index.html.haml_spec.rb +++ b/spec/views/users/dossiers/index.html.haml_spec.rb @@ -76,7 +76,7 @@ describe 'users/dossiers/index', type: :view do end it 'n’affiche la barre d’onglets' do - expect(rendered).to have_selector('nav.tabs') + expect(rendered).to have_selector('nav.fr-tabs') end end @@ -88,9 +88,9 @@ describe 'users/dossiers/index', type: :view do end it 'affiche la barre d’onglets' do - expect(rendered).to have_selector('nav.tabs') - expect(rendered).to have_selector('nav.tabs li', count: 5) - expect(rendered).to have_selector('nav.tabs li.active', count: 1) + expect(rendered).to have_selector('nav.fr-tabs') + expect(rendered).to have_selector('nav.fr-tabs li', count: 5) + expect(rendered).to have_selector('nav.fr-tabs li.active', count: 1) end end diff --git a/spec/views/users/dossiers/show/_header.html.haml_spec.rb b/spec/views/users/dossiers/show/_header.html.haml_spec.rb index 2529c86ec..f072d0191 100644 --- a/spec/views/users/dossiers/show/_header.html.haml_spec.rb +++ b/spec/views/users/dossiers/show/_header.html.haml_spec.rb @@ -13,7 +13,7 @@ describe 'users/dossiers/show/header', type: :view do expect(rendered).to have_text("Dossier nº #{dossier.id}") expect(rendered).to have_text("en construction") - expect(rendered).to have_selector("nav.tabs") + expect(rendered).to have_selector("nav.fr-tabs") expect(rendered).to have_link("Résumé", href: dossier_path(dossier)) expect(rendered).to have_link("Demande", href: demande_dossier_path(dossier)) end From f4283392b787c57cb6f6c160d57d56c8f58194b3 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Mon, 13 Nov 2023 11:22:14 +0100 Subject: [PATCH 03/17] improve table and messagerie display in dark mode --- app/assets/stylesheets/autosave.scss | 1 - app/assets/stylesheets/card.scss | 7 ++++++- app/assets/stylesheets/dossier_edit.scss | 6 ++++++ app/assets/stylesheets/dsfr.scss | 9 --------- app/assets/stylesheets/message.scss | 11 ++++++++++- app/assets/stylesheets/messagerie.scss | 1 - app/assets/stylesheets/table.scss | 11 +++++++++++ 7 files changed, 33 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/autosave.scss b/app/assets/stylesheets/autosave.scss index c5f92e842..4e73ad38b 100644 --- a/app/assets/stylesheets/autosave.scss +++ b/app/assets/stylesheets/autosave.scss @@ -7,7 +7,6 @@ } .autosave-explanation { - color: $dark-grey; margin-left: 4px; } diff --git a/app/assets/stylesheets/card.scss b/app/assets/stylesheets/card.scss index 9ba8544bb..6cf472ef4 100644 --- a/app/assets/stylesheets/card.scss +++ b/app/assets/stylesheets/card.scss @@ -1,6 +1,12 @@ @import "colors"; @import "constants"; +[data-fr-theme="dark"] + .card { + background: none; + border: 1px solid rgb(74, 74, 125); + } + .card { padding: ($default-spacer * 3) ($default-spacer * 2); border: 1px solid $border-grey; @@ -8,7 +14,6 @@ background: #FFFFFF; .card-title { - color: $black; font-weight: bold; font-size: 20px; line-height: 1.5rem; diff --git a/app/assets/stylesheets/dossier_edit.scss b/app/assets/stylesheets/dossier_edit.scss index 9690a508f..56bf7857b 100644 --- a/app/assets/stylesheets/dossier_edit.scss +++ b/app/assets/stylesheets/dossier_edit.scss @@ -3,6 +3,12 @@ $dossier-actions-bar-border-width: 1px; +[data-fr-theme="dark"] + .dossier-edit + .dossier-edit-sticky-footer { + background-color: rgb(74, 74, 125); + border: none +} .dossier-header { .fr-container { padding-bottom: $default-padding; diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss index 5c2bef546..15b651c35 100644 --- a/app/assets/stylesheets/dsfr.scss +++ b/app/assets/stylesheets/dsfr.scss @@ -10,15 +10,6 @@ ol.fr-ol-content--override { } } -// override default transparent background on inputs & font-size to 16px by default -input, -textarea, -select, -// FIXME when DSFR is DONE -.form-ds-fr-white .fr-input { - background: $white; - font-size: 1em; -} // with Marianne font, weight of font is less bolder, so bold it up .button.primary { diff --git a/app/assets/stylesheets/message.scss b/app/assets/stylesheets/message.scss index 95960b192..57f482dd2 100644 --- a/app/assets/stylesheets/message.scss +++ b/app/assets/stylesheets/message.scss @@ -1,12 +1,21 @@ @import "colors"; @import "constants"; +[data-fr-theme="dark"] + .message { + background: rgb(74, 74, 125); + + &.inverted-background { + background: rgb(74, 74, 125); + } +} + .message { display: flex; align-items: flex-start; margin-bottom: $default-padding; padding: $default-padding; - background: #FFFFFF; + background: $light-grey; border-radius: 3px; &.inverted-background { diff --git a/app/assets/stylesheets/messagerie.scss b/app/assets/stylesheets/messagerie.scss index 034cbcea3..ded8156aa 100644 --- a/app/assets/stylesheets/messagerie.scss +++ b/app/assets/stylesheets/messagerie.scss @@ -5,7 +5,6 @@ max-height: 350px; overflow-y: scroll; border: 1px solid $border-grey; - background: $light-grey; padding: 2 * $default-spacer; margin-bottom: $default-spacer; border-radius: 4px; diff --git a/app/assets/stylesheets/table.scss b/app/assets/stylesheets/table.scss index c265035a7..b35937450 100644 --- a/app/assets/stylesheets/table.scss +++ b/app/assets/stylesheets/table.scss @@ -56,6 +56,17 @@ width: calc(100vw); } +[data-fr-theme="dark"] + .fr-table--bordered { + .table { + &.hoverable { + tbody tr:hover { + background-color: rgb(74, 74, 125); + } + } + } +} + .fr-table--bordered { .table { &.hoverable { From a3307553b75561b07a07ee866e255679a1bcb032 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Mon, 13 Nov 2023 12:44:02 +0100 Subject: [PATCH 04/17] simplify html and css for landing pages and improve dark mode --- app/assets/stylesheets/landing.scss | 53 ------------------------- app/views/root/_testimonials.html.haml | 2 +- app/views/root/_users.html.haml | 2 +- app/views/root/administration.html.haml | 22 +++++----- app/views/root/landing.html.haml | 30 +++++--------- 5 files changed, 23 insertions(+), 86 deletions(-) diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss index 85f4cb65a..c0795cde8 100644 --- a/app/assets/stylesheets/landing.scss +++ b/app/assets/stylesheets/landing.scss @@ -3,10 +3,6 @@ @import "mixins"; @import "placeholders"; -.landing-panel { - @include vertical-padding(60px); -} - $landing-breakpoint: 1040px; .hero-wrapper { @@ -27,16 +23,6 @@ $landing-breakpoint: 1040px; } } -.hero-tagline { - margin-bottom: 0px; -} - -.hero-tagline-em { - color: $blue-france-500; - font-style: normal; - font-weight: bold; -} - .hero-illustration { max-width: 500px; @@ -74,7 +60,6 @@ $landing-breakpoint: 1040px; } .feature-text { - color: #FFFFFF; font-size: 20px; text-align: center; } @@ -139,17 +124,7 @@ $landing-breakpoint: 1040px; font-weight: bold; } -.usagers-panel, -.numbers-panel, -.cta-panel-2 { - background-color: var(--background-alt-blue-france); -} - - .landing { - .more-info { - background-color: #FFFFFF; - } .numbers { @extend %horizontal-list; @@ -229,15 +204,6 @@ $users-breakpoint: 950px; height: 180px; } -.cta-panel { - background-color: $blue-france-500; - color: #FFFFFF; - - .fr-btn { - box-shadow: inset 0 0 0 1px var(--text-inverted-blue-france); - } -} - .role-panel-wrapper { width: 100%; display: flex; @@ -274,25 +240,6 @@ $users-breakpoint: 950px; } } -.cta-panel-title { - font-size: 24px; - font-weight: bold; - margin-top: 13px; - color: #FFFFFF; - - &.grey { - color: $g700; - } -} - -.cta-panel-explanation { - font-size: 22px; - margin-bottom: 10px; - - &.grey { - color: $g700; - } -} .role-administrations-image { text-align: right; diff --git a/app/views/root/_testimonials.html.haml b/app/views/root/_testimonials.html.haml index 5a9916320..ac9111116 100644 --- a/app/views/root/_testimonials.html.haml +++ b/app/views/root/_testimonials.html.haml @@ -1,4 +1,4 @@ -.landing-panel +.fr-py-6w .container %h2.center.fr-mb-4w Ce que les utilisateurs pensent du service diff --git a/app/views/root/_users.html.haml b/app/views/root/_users.html.haml index 7ffed0f57..c85a7db69 100644 --- a/app/views/root/_users.html.haml +++ b/app/views/root/_users.html.haml @@ -1,4 +1,4 @@ -.landing-panel.users-panel +.fr-py-6w .container %h2.center.fr-mb-4w Ils utilisent déjà #{APPLICATION_NAME} diff --git a/app/views/root/administration.html.haml b/app/views/root/administration.html.haml index 66b43d704..6ee3941b2 100644 --- a/app/views/root/administration.html.haml +++ b/app/views/root/administration.html.haml @@ -2,18 +2,18 @@ = render partial: "root/footer" .landing - .landing-panel.hero-panel + .fr-py-6w .container .hero-wrapper .hero-text - %h1.hero-tagline - %em.hero-tagline-em Dématérialisez et simplifiez + %h1.fr-mb-0 + Dématérialisez et simplifiez vos démarches administratives .hero-illustration %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: "" } - .landing-panel.more-info + .fr-py-6w.fr-background-alt--blue-france .container .role-panel-wrapper.role-administrations-panel .role-panel-70 @@ -26,7 +26,7 @@ .role-panel-30.role-more-info-image.fr-mt-2w %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "" } - .landing-panel.usagers-panel + .fr-py-6w .container .role-panel-wrapper.role-administrations-panel .role-panel-30.role-administrations-image @@ -44,9 +44,7 @@ %br - - - .landing-panel.features-panel + .fr-py-6w.fr-background-flat--blue-france.fr-text-inverted--blue-france .container %ul.features %li.feature @@ -73,7 +71,7 @@ = render partial: "root/testimonials" if LANDING_TESTIMONIALS_ENABLED - cache "numbers-panel", :expires_in => 3.hours do - .landing-panel.numbers-panel + .fr-py-6w.fr-background-alt--blue-france .container %h2.center.fr-mb-4w #{APPLICATION_NAME} en chiffres %ul.numbers @@ -113,11 +111,11 @@ - c.with_footer_button do = link_to("Inscription à notre prochain webinaire", INSCRIPTION_WEBINAIRE_URL, class: "fr-btn", **external_link_attributes) - .landing-panel.cta-panel + .fr-py-6w.fr-background-alt--blue-france .container .cta-panel-wrapper %div - %h1.cta-panel-title Une question, un problème ? - %p.cta-panel-explanation Consultez notre FAQ + %h2 Une question, un problème ? + %p.fr-h5 Consultez notre FAQ %div = link_to "Voir la FAQ", t("links.common.faq.url"), class: "fr-btn fr-btn--lg", **external_link_attributes diff --git a/app/views/root/landing.html.haml b/app/views/root/landing.html.haml index 464f4d864..4f45bc147 100644 --- a/app/views/root/landing.html.haml +++ b/app/views/root/landing.html.haml @@ -3,17 +3,17 @@ - content_for :title, t(".promise") .landing - .landing-panel.hero-panel + .fr-py-6w .container .hero-wrapper .hero-text - %h1.hero-tagline - %em.hero-tagline-em= t(".promise") + %h1.fr-mb-0 + = t(".promise") .hero-illustration %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: '', width: 499, height: 280, loading: 'lazy' } - .landing-panel.usagers-panel + .fr-background-alt--blue-france.fr-py-6w .container .role-panel-wrapper .role-panel-30.role-usagers-image @@ -27,7 +27,7 @@ = link_to t("views.users.sessions.new.connection"), new_user_session_path, class: "fr-btn fr-btn--secondary fr-btn--lg" - cache [I18n.locale, "numbers-panel"], expires_in: 3.hours do - .landing-panel + .fr-py-6w .container %h2.center.fr-mb-4w= t(".our_numbers", name: APPLICATION_NAME) %ul.numbers @@ -44,28 +44,20 @@ = "#{number_with_delimiter(50)} %" .number-label.number-label-third= t(".numbers.processing_time") - .landing-panel.cta-panel + .fr-background-alt--blue-france.fr-py-6w .container .cta-panel-wrapper %div - %h2.cta-panel-title= t(".question") - %p.cta-panel-explanation= t(".answer_in_faq") + %h2= t(".question") + %p.fr-h5= t(".answer_in_faq") %div = link_to t(".online_help"), t("links.common.faq.url"), class: "fr-btn fr-btn--lg", title: new_tab_suffix(t(".online_help")), **external_link_attributes - -# We temporarily disable the link to the contact page on the homepage - -# %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider - -# %div - -# = contact_link "Contactez-nous", - -# tags: 'landing', - -# class: "cta-panel-button-white", - -# target: "_blank", - -# rel: "noopener noreferrer" - .landing-panel + .fr-py-6w .container .cta-panel-wrapper %div - %h2.fr-h4= t(".administration_dematerialize") - %p.cta-panel-explanation.grey= t(".administration_fill_online") + %h2= t(".administration_dematerialize") + %p.fr-h5= t(".administration_fill_online") %div = link_to t(".administration_discover"), administration_path, class: "fr-btn fr-btn--lg" From 86c9a841113377e4342cc45fdb9ad2d57c2e03bf Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Mon, 13 Nov 2023 14:42:51 +0100 Subject: [PATCH 05/17] fix dark mode on login pages --- app/assets/stylesheets/layouts.scss | 3 +-- app/views/agent_connect/agent/index.html.haml | 4 ++-- app/views/super_admins/sessions/new.html.haml | 2 +- app/views/users/sessions/new.html.haml | 2 +- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/layouts.scss b/app/assets/stylesheets/layouts.scss index c2703fd0b..3294a2906 100644 --- a/app/assets/stylesheets/layouts.scss +++ b/app/assets/stylesheets/layouts.scss @@ -3,10 +3,9 @@ @import "placeholders"; .two-columns { - background-color: $white; @media (min-width: $two-columns-breakpoint) { - background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%); + background: linear-gradient(to right, transparent 0%, transparent 50%, var(--background-alt-blue-france) 50%, var(--background-alt-blue-france) 100%); } .columns-container { // TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore diff --git a/app/views/agent_connect/agent/index.html.haml b/app/views/agent_connect/agent/index.html.haml index e146229f7..a7e1bf0cb 100644 --- a/app/views/agent_connect/agent/index.html.haml +++ b/app/views/agent_connect/agent/index.html.haml @@ -4,7 +4,7 @@ .fr-container .fr-grid-row.fr-grid-row--gutters - .fr-col-lg.fr-p-6w.fr-background-alt--grey + .fr-col-lg.fr-p-6w.fr-background-alt--blue-france #session-new.auth-form.sign-in-form = form_for User.new, url: user_session_path do |f| @@ -43,7 +43,7 @@ .fr-fieldset__element = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password' }) - %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "link" + %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "fr-link" .fr-fieldset__element .auth-options diff --git a/app/views/super_admins/sessions/new.html.haml b/app/views/super_admins/sessions/new.html.haml index a1285c36a..69661d8d8 100644 --- a/app/views/super_admins/sessions/new.html.haml +++ b/app/views/super_admins/sessions/new.html.haml @@ -17,6 +17,6 @@ = render Dsfr::InputComponent.new(form: f, attribute: :otp_attempt, input_type: :number_field, opts: { inputmode: :numeric }, required: false) .fr-fieldset__element - %p= link_to "Mot de passe oublié ou réinitialisation 2FA ?", new_super_admin_password_path, class: "link" + %p= link_to "Mot de passe oublié ou réinitialisation 2FA ?", new_super_admin_password_path, class: "fr-link" = f.submit t('views.users.sessions.new.connection'), class: "fr-btn fr-btn--lg" diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index b13c0044e..77975aade 100644 --- a/app/views/users/sessions/new.html.haml +++ b/app/views/users/sessions/new.html.haml @@ -20,7 +20,7 @@ .fr-fieldset__element = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password' }) - %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "link" + %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "fr-link" .fr-fieldset__element From 84cd5daf9c9144051ef0e013157518ec75952bfb Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Mon, 13 Nov 2023 18:10:35 +0100 Subject: [PATCH 06/17] add css to make dropdown readable with dark mode --- app/assets/stylesheets/buttons.scss | 24 ++++++++++++++++++++-- app/assets/stylesheets/help_dropdown.scss | 2 +- app/assets/stylesheets/menu_component.scss | 1 - 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index 0d4016b15..6320d1fa8 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -174,6 +174,28 @@ } } +[data-fr-theme="dark"] + .dropdown-content { + border: none; + background: var(--background-action-low-blue-france); + } + +[data-fr-theme="dark"] + .dropdown-items { + li { + &:not(.inactive) { + &:hover, + &.selected { + background: var(--background-action-low-blue-france-hover); + } + } + + &.form-inside { + background-color: var(--background-action-low-blue-france); + } + } + } + .dropdown-content { border: 1px solid $border-grey; background: #FFFFFF; @@ -226,7 +248,6 @@ ul.dropdown-items { li { display: flex; padding: $default-padding; - color: $dark-grey; border-bottom: 1px solid $border-grey; font-size: 12px; min-width: 300px; @@ -293,7 +314,6 @@ ul.dropdown-items { h4 { font-size: 14px; - color: $black; margin-bottom: $default-spacer; } diff --git a/app/assets/stylesheets/help_dropdown.scss b/app/assets/stylesheets/help_dropdown.scss index 5c1e2e4df..f20b13a02 100644 --- a/app/assets/stylesheets/help_dropdown.scss +++ b/app/assets/stylesheets/help_dropdown.scss @@ -8,7 +8,7 @@ } .help-dropdown-title { - color: $blue-france-500; + font-weight: bold; } .dropdown-items li.help-dropdown-service { diff --git a/app/assets/stylesheets/menu_component.scss b/app/assets/stylesheets/menu_component.scss index 3bc0c9f53..32438e088 100644 --- a/app/assets/stylesheets/menu_component.scss +++ b/app/assets/stylesheets/menu_component.scss @@ -1,7 +1,6 @@ @import "colors"; .menu-component-header { - color: $dark-grey; font-size: 12px; a { From 7c7f9113d2fd91e540255dfca58206f2905effe6 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Tue, 14 Nov 2023 10:48:41 +0100 Subject: [PATCH 07/17] improve css dark mode for combobox --- app/assets/stylesheets/forms.scss | 10 ++++++++++ app/assets/stylesheets/procedure_list.scss | 1 - app/assets/stylesheets/procedure_show.scss | 1 - 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 8cfe04eed..1ff1b20b9 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -623,6 +623,16 @@ outline-color: $light-blue; } +[data-fr-theme="dark"] + [data-reach-combobox-popover] { + border: none; + background: var(--background-action-low-blue-france); + } +[data-fr-theme="dark"] + [data-reach-combobox-option]:hover { + background: var(--background-action-low-blue-france-hover); + } + [data-reach-combobox-popover] { z-index: 20; } diff --git a/app/assets/stylesheets/procedure_list.scss b/app/assets/stylesheets/procedure_list.scss index 01180680c..3fa1094d2 100644 --- a/app/assets/stylesheets/procedure_list.scss +++ b/app/assets/stylesheets/procedure_list.scss @@ -49,7 +49,6 @@ .stats-legend { font-size: 12px; - color: $dark-grey; } } diff --git a/app/assets/stylesheets/procedure_show.scss b/app/assets/stylesheets/procedure_show.scss index 138f0262b..5100162cb 100644 --- a/app/assets/stylesheets/procedure_show.scss +++ b/app/assets/stylesheets/procedure_show.scss @@ -56,7 +56,6 @@ [data-reach-combobox-token] button { border: solid 1px $border-grey; - color: $black; margin: 0.25 * $default-padding; border-radius: 2px; padding: 0.25 * $default-padding; From cf318158901b063e63fba0b34e7ad74488abf468 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Tue, 14 Nov 2023 10:59:10 +0100 Subject: [PATCH 08/17] change rgb color by var from DSFR --- app/assets/stylesheets/card.scss | 2 +- app/assets/stylesheets/dossier_edit.scss | 2 +- app/assets/stylesheets/message.scss | 4 ++-- app/assets/stylesheets/table.scss | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/card.scss b/app/assets/stylesheets/card.scss index 6cf472ef4..e40469846 100644 --- a/app/assets/stylesheets/card.scss +++ b/app/assets/stylesheets/card.scss @@ -4,7 +4,7 @@ [data-fr-theme="dark"] .card { background: none; - border: 1px solid rgb(74, 74, 125); + border: 1px solid var(--background-action-low-blue-france); } .card { diff --git a/app/assets/stylesheets/dossier_edit.scss b/app/assets/stylesheets/dossier_edit.scss index 56bf7857b..df5d66ae6 100644 --- a/app/assets/stylesheets/dossier_edit.scss +++ b/app/assets/stylesheets/dossier_edit.scss @@ -6,7 +6,7 @@ $dossier-actions-bar-border-width: 1px; [data-fr-theme="dark"] .dossier-edit .dossier-edit-sticky-footer { - background-color: rgb(74, 74, 125); + background-color: var(--background-action-low-blue-france); border: none } .dossier-header { diff --git a/app/assets/stylesheets/message.scss b/app/assets/stylesheets/message.scss index 57f482dd2..90e011d9c 100644 --- a/app/assets/stylesheets/message.scss +++ b/app/assets/stylesheets/message.scss @@ -3,10 +3,10 @@ [data-fr-theme="dark"] .message { - background: rgb(74, 74, 125); + background: var(--background-action-low-blue-france); &.inverted-background { - background: rgb(74, 74, 125); + background: var(--background-action-low-blue-france); } } diff --git a/app/assets/stylesheets/table.scss b/app/assets/stylesheets/table.scss index b35937450..4dc1375cf 100644 --- a/app/assets/stylesheets/table.scss +++ b/app/assets/stylesheets/table.scss @@ -61,7 +61,7 @@ .table { &.hoverable { tbody tr:hover { - background-color: rgb(74, 74, 125); + background-color: var(--background-action-low-blue-france); } } } From 75867df013fdf530fdd590b6f91123da0c5b7f82 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Tue, 14 Nov 2023 11:24:15 +0100 Subject: [PATCH 09/17] fix linter with correct indentation --- app/assets/stylesheets/buttons.scss | 31 ++++++++++++------------ app/assets/stylesheets/card.scss | 10 ++++---- app/assets/stylesheets/dossier_edit.scss | 9 +++---- app/assets/stylesheets/forms.scss | 17 ++++++------- app/assets/stylesheets/message.scss | 12 ++++----- app/assets/stylesheets/table.scss | 14 +++++------ 6 files changed, 45 insertions(+), 48 deletions(-) diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index 6320d1fa8..0b35195f8 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -174,27 +174,26 @@ } } -[data-fr-theme="dark"] - .dropdown-content { - border: none; - background: var(--background-action-low-blue-france); - } -[data-fr-theme="dark"] - .dropdown-items { - li { - &:not(.inactive) { - &:hover, - &.selected { - background: var(--background-action-low-blue-france-hover); - } - } +[data-fr-theme="dark"] .dropdown-content { + border: none; + background: var(--background-action-low-blue-france); +} - &.form-inside { - background-color: var(--background-action-low-blue-france); +[data-fr-theme="dark"] .dropdown-items { + li { + &:not(.inactive) { + &:hover, + &.selected { + background: var(--background-action-low-blue-france-hover); } } + + &.form-inside { + background-color: var(--background-action-low-blue-france); + } } +} .dropdown-content { border: 1px solid $border-grey; diff --git a/app/assets/stylesheets/card.scss b/app/assets/stylesheets/card.scss index e40469846..82b6f7cf1 100644 --- a/app/assets/stylesheets/card.scss +++ b/app/assets/stylesheets/card.scss @@ -1,11 +1,11 @@ @import "colors"; @import "constants"; -[data-fr-theme="dark"] - .card { - background: none; - border: 1px solid var(--background-action-low-blue-france); - } + +[data-fr-theme="dark"] .card { + background: none; + border: 1px solid var(--background-action-low-blue-france); +} .card { padding: ($default-spacer * 3) ($default-spacer * 2); diff --git a/app/assets/stylesheets/dossier_edit.scss b/app/assets/stylesheets/dossier_edit.scss index df5d66ae6..6edf8d33d 100644 --- a/app/assets/stylesheets/dossier_edit.scss +++ b/app/assets/stylesheets/dossier_edit.scss @@ -3,12 +3,11 @@ $dossier-actions-bar-border-width: 1px; -[data-fr-theme="dark"] - .dossier-edit - .dossier-edit-sticky-footer { - background-color: var(--background-action-low-blue-france); - border: none +[data-fr-theme="dark"] .dossier-edit .dossier-edit-sticky-footer { + background-color: var(--background-action-low-blue-france); + border: none; } + .dossier-header { .fr-container { padding-bottom: $default-padding; diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 1ff1b20b9..4035a4a49 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -623,15 +623,14 @@ outline-color: $light-blue; } -[data-fr-theme="dark"] - [data-reach-combobox-popover] { - border: none; - background: var(--background-action-low-blue-france); - } -[data-fr-theme="dark"] - [data-reach-combobox-option]:hover { - background: var(--background-action-low-blue-france-hover); - } +[data-fr-theme="dark"] [data-reach-combobox-popover] { + border: none; + background: var(--background-action-low-blue-france); +} + +[data-fr-theme="dark"] [data-reach-combobox-option]:hover { + background: var(--background-action-low-blue-france-hover); +} [data-reach-combobox-popover] { z-index: 20; diff --git a/app/assets/stylesheets/message.scss b/app/assets/stylesheets/message.scss index 90e011d9c..0add83ba9 100644 --- a/app/assets/stylesheets/message.scss +++ b/app/assets/stylesheets/message.scss @@ -1,13 +1,13 @@ @import "colors"; @import "constants"; -[data-fr-theme="dark"] - .message { - background: var(--background-action-low-blue-france); - &.inverted-background { - background: var(--background-action-low-blue-france); - } +[data-fr-theme="dark"] .message { + background: var(--background-action-low-blue-france); + + &.inverted-background { + background: var(--background-action-low-blue-france); + } } .message { diff --git a/app/assets/stylesheets/table.scss b/app/assets/stylesheets/table.scss index 4dc1375cf..0fdae7410 100644 --- a/app/assets/stylesheets/table.scss +++ b/app/assets/stylesheets/table.scss @@ -56,15 +56,15 @@ width: calc(100vw); } -[data-fr-theme="dark"] - .fr-table--bordered { - .table { - &.hoverable { - tbody tr:hover { - background-color: var(--background-action-low-blue-france); - } + +[data-fr-theme="dark"] .fr-table--bordered { + .table { + &.hoverable { + tbody tr:hover { + background-color: var(--background-action-low-blue-france); } } + } } .fr-table--bordered { From d403f851c66f34dfa86bffe64487c376c2cb04ad Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Tue, 14 Nov 2023 12:05:17 +0100 Subject: [PATCH 10/17] fix specs with good aria attributes for tabs --- app/views/administrateurs/procedures/apercu.html.haml | 2 +- app/views/administrateurs/procedures/index.html.haml | 2 +- app/views/experts/avis/_header.html.haml | 2 +- app/views/experts/avis/procedure.html.haml | 2 +- app/views/instructeurs/dossiers/_header_bottom.html.haml | 2 +- app/views/instructeurs/procedures/_tabs.html.haml | 2 +- app/views/instructeurs/procedures/index.html.haml | 2 +- app/views/root/patron.html.haml | 2 +- app/views/shared/_tab_item.html.haml | 4 ++-- app/views/users/dossiers/index.html.haml | 2 +- app/views/users/dossiers/show/_header.html.haml | 2 +- 11 files changed, 12 insertions(+), 12 deletions(-) diff --git a/app/views/administrateurs/procedures/apercu.html.haml b/app/views/administrateurs/procedures/apercu.html.haml index c44643884..aa55c2b81 100644 --- a/app/views/administrateurs/procedures/apercu.html.haml +++ b/app/views/administrateurs/procedures/apercu.html.haml @@ -3,7 +3,7 @@ %h1.page-title Prévisualisation de la démarche « #{@dossier.procedure.libelle} » %nav.fr-tabs - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } = tab_item('le dossier', apercu_admin_procedure_path(@dossier.procedure, tab: 'dossier'), active: @tab == 'dossier') diff --git a/app/views/administrateurs/procedures/index.html.haml b/app/views/administrateurs/procedures/index.html.haml index e66f1e7dc..8c17eddd0 100644 --- a/app/views/administrateurs/procedures/index.html.haml +++ b/app/views/administrateurs/procedures/index.html.haml @@ -6,7 +6,7 @@ .fr-container %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } = tab_item(t('pluralize.published', count: @procedures_publiees_count), admin_procedures_path(statut: 'publiees'), active: @statut == 'publiees', badge: number_with_html_delimiter(@procedures_publiees_count)) = tab_item('En test', admin_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count)) = tab_item(t('pluralize.closed', count: @procedures_closed_count), admin_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closed_count)) diff --git a/app/views/experts/avis/_header.html.haml b/app/views/experts/avis/_header.html.haml index eaccb2926..b6cbd9538 100644 --- a/app/views/experts/avis/_header.html.haml +++ b/app/views/experts/avis/_header.html.haml @@ -19,7 +19,7 @@ ZIP %nav.fr-tabs - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } = dynamic_tab_item('Demande', expert_avis_path(avis.procedure, avis)) = dynamic_tab_item('Avis', instruction_expert_avis_path(avis.procedure, avis), notification: avis.answer.blank?) - if avis.procedure.allow_expert_messaging diff --git a/app/views/experts/avis/procedure.html.haml b/app/views/experts/avis/procedure.html.haml index c6473c323..05c4bda8b 100644 --- a/app/views/experts/avis/procedure.html.haml +++ b/app/views/experts/avis/procedure.html.haml @@ -12,7 +12,7 @@ %h1.fr-h3= procedure_libelle @procedure %nav.fr-tabs - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } = tab_item('avis à donner', procedure_expert_avis_index_path(statut: Instructeurs::AvisController::A_DONNER_STATUS), active: @statut == Instructeurs::AvisController::A_DONNER_STATUS, diff --git a/app/views/instructeurs/dossiers/_header_bottom.html.haml b/app/views/instructeurs/dossiers/_header_bottom.html.haml index fb0fcaaf0..57ea40455 100644 --- a/app/views/instructeurs/dossiers/_header_bottom.html.haml +++ b/app/views/instructeurs/dossiers/_header_bottom.html.haml @@ -1,6 +1,6 @@ #header-bottom.fr-container %nav.fr-tabs - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } - notifications_summary = current_instructeur.notifications_for_dossier(dossier) = dynamic_tab_item(t('views.instructeurs.dossiers.tab_steps.request'), diff --git a/app/views/instructeurs/procedures/_tabs.html.haml b/app/views/instructeurs/procedures/_tabs.html.haml index 58f796e09..c9d6a2560 100644 --- a/app/views/instructeurs/procedures/_tabs.html.haml +++ b/app/views/instructeurs/procedures/_tabs.html.haml @@ -1,5 +1,5 @@ %nav.fr-tabs.mt-3 - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } = tab_item(t(tab_i18n_key_from_status('a-suivre')), instructeur_procedure_path(procedure, statut: 'a-suivre'), active: statut == 'a-suivre', diff --git a/app/views/instructeurs/procedures/index.html.haml b/app/views/instructeurs/procedures/index.html.haml index 71ecc1ee1..a3ff48798 100644 --- a/app/views/instructeurs/procedures/index.html.haml +++ b/app/views/instructeurs/procedures/index.html.haml @@ -6,7 +6,7 @@ = render partial: 'instructeurs/procedures/synthese', locals: { procedures: @procedures, all_dossiers_counts: @all_dossiers_counts } %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } = tab_item(t('pluralize.en_cours', count: @procedures_en_cours_count), instructeur_procedures_path(statut: 'en-cours'), active: @statut == 'en-cours', badge: number_with_html_delimiter(@procedures_en_cours_count)) = tab_item(t('pluralize.en_test', count: @procedures_draft_count), instructeur_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count)) = tab_item(t('pluralize.closed', count: @procedures_closes_count), instructeur_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closes_count)) diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index 6ccf40bdd..02d15120b 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -232,7 +232,7 @@ .container Titre %nav.fr-tabs - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } = tab_item("Onglet actif", "#", active: true) = tab_item("Onglet inactif", "#") = tab_item("Onglet avec badge", "#", badge: 2) diff --git a/app/views/shared/_tab_item.html.haml b/app/views/shared/_tab_item.html.haml index 27c65e513..73a96e55b 100644 --- a/app/views/shared/_tab_item.html.haml +++ b/app/views/shared/_tab_item.html.haml @@ -1,7 +1,7 @@ -%li{ class: (active ? 'active' : nil) } +%li{ class: (active ? 'active' : nil), role: 'presentation' } - if notification %span.notifications{ 'aria-label': 'notifications' } - = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab' ) do + = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab', role: 'tab' ) do - if badge.present? %span.badge.fr-mr-1w= badge = label diff --git a/app/views/users/dossiers/index.html.haml b/app/views/users/dossiers/index.html.haml index ca3f1be23..29eaa7e06 100644 --- a/app/views/users/dossiers/index.html.haml +++ b/app/views/users/dossiers/index.html.haml @@ -26,7 +26,7 @@ - if @search_terms.blank? %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') } - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } - if @user_dossiers.present? = tab_item(t('pluralize.en_cours', count: @user_dossiers.count), dossiers_path(statut: 'en-cours', procedure_id: params[:procedure_id]), diff --git a/app/views/users/dossiers/show/_header.html.haml b/app/views/users/dossiers/show/_header.html.haml index 67be0feb1..466518cb5 100644 --- a/app/views/users/dossiers/show/_header.html.haml +++ b/app/views/users/dossiers/show/_header.html.haml @@ -22,7 +22,7 @@ = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier }) %nav.fr-tabs - %ul.fr-tabs__list + %ul.fr-tabs__list{ role: 'tablist' } = dynamic_tab_item(t('views.users.dossiers.show.header.summary'), dossier_path(dossier)) = dynamic_tab_item(t('views.users.dossiers.show.header.request'), [demande_dossier_path(dossier), modifier_dossier_path(dossier)]) = dynamic_tab_item(t('views.users.dossiers.show.header.mailbox'), messagerie_dossier_path(dossier)) From cbec8b8b752bd99ca40bb991100185ffce087755 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Tue, 14 Nov 2023 18:47:53 +0100 Subject: [PATCH 11/17] chore(assets): setup dsfr artwork --- app/assets/config/manifest.js | 1 + config/initializers/assets.rb | 1 + 2 files changed, 2 insertions(+) diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index d2795649b..478d726eb 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -5,3 +5,4 @@ //= link administrate/application.js //= link manager.css //= link attestation.css +//= link_tree ../../../node_modules/@gouvfr/dsfr/dist/artwork diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 815baaf0c..12057061a 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -10,6 +10,7 @@ Rails.application.config.assets.paths << Rails.root.join('node_modules', 'trix', Rails.application.config.assets.paths << Rails.root.join('node_modules', 'mapbox-gl', 'dist') Rails.application.config.assets.paths << Rails.root.join('node_modules', '@reach', 'combobox') Rails.application.config.assets.paths << Rails.root.join('node_modules', '@mapbox', 'mapbox-gl-draw', 'dist') +Rails.application.config.assets.paths << Rails.root.join('node_modules', '@gouvfr', 'dsfr', 'dist', 'artwork') # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in the app/assets From d601f92be84b81ddc06c4ec36d9d6067e1c24d58 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Wed, 15 Nov 2023 11:35:15 +0100 Subject: [PATCH 12/17] 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 From 9af2304019a48f8335de6ddc44dcbf619fa76b42 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Wed, 15 Nov 2023 15:18:52 +0100 Subject: [PATCH 13/17] remove hard coded color for dossier subheader --- app/assets/stylesheets/dossier_views.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/assets/stylesheets/dossier_views.scss b/app/assets/stylesheets/dossier_views.scss index 84feba524..e24706016 100644 --- a/app/assets/stylesheets/dossier_views.scss +++ b/app/assets/stylesheets/dossier_views.scss @@ -4,13 +4,11 @@ .dossier-container { .sub-header { h1 { - color: $black; font-size: 22px; margin-bottom: 0; } h2 { - color: $dark-grey; font-weight: bold; } From 373379d132760df027baf3987f4668cdcd029ef3 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Wed, 15 Nov 2023 15:54:19 +0100 Subject: [PATCH 14/17] remove icon from admin dashboard and use badge - Figma --- .../children_component/children_component.html.haml | 4 +--- .../gestionnaires_component.html.haml | 4 +--- .../administrateurs_component.html.haml | 4 +--- .../annotations_component.html.haml | 8 ++------ .../api_entreprise_component.html.haml | 8 ++------ .../api_particulier_component.html.haml | 8 ++------ .../attestation_component.html.haml | 10 +++------- .../card/champs_component/champs_component.html.haml | 8 ++------ .../card/chorus_component/chorus_component.html.haml | 8 ++------ .../dossier_submitted_message_component.html.haml | 8 ++------ .../card/emails_component/emails_component.html.haml | 9 +++------ .../card/experts_component/experts_component.html.haml | 4 +--- .../instructeurs_component.html.haml | 8 ++------ .../modifications_component.html.haml | 7 +++---- .../mon_avis_component/mon_avis_component.html.haml | 8 ++------ .../presentation_component.html.haml | 4 +--- .../card/service_component/service_component.html.haml | 8 ++------ .../card/sva_svr_component/sva_svr_component.html.haml | 8 ++------ .../card/zones_component/zones_component.html.haml | 8 ++------ .../procedure_attestation_template_spec.rb | 9 ++++++--- 20 files changed, 42 insertions(+), 101 deletions(-) diff --git a/app/components/groupe_gestionnaire/card/children_component/children_component.html.haml b/app/components/groupe_gestionnaire/card/children_component/children_component.html.haml index 0147657ab..d52916c74 100644 --- a/app/components/groupe_gestionnaire/card/children_component/children_component.html.haml +++ b/app/components/groupe_gestionnaire/card/children_component/children_component.html.haml @@ -1,9 +1,7 @@ .fr-col-6.fr-col-md-4.fr-col-lg-3 = link_to gestionnaire_groupe_gestionnaire_children_path(@groupe_gestionnaire), id: 'gestionnaires', class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé %div .line-count.fr-my-1w %p.fr-tag= @groupe_gestionnaire.children.size diff --git a/app/components/groupe_gestionnaire/card/gestionnaires_component/gestionnaires_component.html.haml b/app/components/groupe_gestionnaire/card/gestionnaires_component/gestionnaires_component.html.haml index 2cdd84805..c6178d615 100644 --- a/app/components/groupe_gestionnaire/card/gestionnaires_component/gestionnaires_component.html.haml +++ b/app/components/groupe_gestionnaire/card/gestionnaires_component/gestionnaires_component.html.haml @@ -1,9 +1,7 @@ .fr-col-6.fr-col-md-4.fr-col-lg-3 = link_to gestionnaire_groupe_gestionnaire_gestionnaires_path(@groupe_gestionnaire), id: 'gestionnaires', class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé %div .line-count.fr-my-1w %p.fr-tag= @groupe_gestionnaire.gestionnaires.size diff --git a/app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml b/app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml index bf035cf3b..6b1f577b2 100644 --- a/app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml +++ b/app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml @@ -1,9 +1,7 @@ .fr-col-6.fr-col-md-4.fr-col-lg-3 = link_to admin_procedure_administrateurs_path(@procedure), id: 'administrateurs', class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé %div .line-count.fr-my-1w %p.fr-tag= @procedure.administrateurs.size diff --git a/app/components/procedure/card/annotations_component/annotations_component.html.haml b/app/components/procedure/card/annotations_component/annotations_component.html.haml index 0eb809dd7..c5a810ad2 100644 --- a/app/components/procedure/card/annotations_component/annotations_component.html.haml +++ b/app/components/procedure/card/annotations_component/annotations_component.html.haml @@ -6,13 +6,9 @@ %span.icon.refuse %p.fr-tile-status-error À modifier - elsif @count == 0 - %div - %span.icon.clock - %p.fr-tile-status-todo À configurer + %p.fr-badge.fr-badge--info À configurer - else - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé %div .line-count.fr-my-1w %p.fr-tag= @count diff --git a/app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml b/app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml index 8981e5b02..8c5ed09f9 100644 --- a/app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml +++ b/app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml @@ -2,13 +2,9 @@ = link_to jeton_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - if @procedure.api_entreprise_token.present? - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé - else - %div - %span.icon.clock - %p.fr-tile-status-todo À configurer + %p.fr-badge.fr-badge--info À configurer %div %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle Configurer le jeton API entreprise diff --git a/app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml b/app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml index 6eaf18232..3fd86aff4 100644 --- a/app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml +++ b/app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml @@ -2,13 +2,9 @@ = link_to admin_procedure_api_particulier_path(@procedure), class: 'fr-tile fr-enlarge-link', id: 'api-particulier' do .fr-tile__body.flex.column.align-center.justify-between - if @procedure.api_particulier_token.present? - %div - %span.icon.accept - %p.fr-tile-status-accept= t('.ready') + %p.fr-badge.fr-badge--success= t('.ready') - else - %div - %span.icon.clock - %p.fr-tile-status-todo= t('.needs_configuration') + %p.fr-badge.fr-badge--info= t('.needs_configuration') %div %h3.fr-h6.fr-mt-10v= Procedure.human_attribute_name(:api_particulier_token) %p.fr-tile-subtitle= t('.configure_api_particulier_token') diff --git a/app/components/procedure/card/attestation_component/attestation_component.html.haml b/app/components/procedure/card/attestation_component/attestation_component.html.haml index 20cd5c3d0..0b86b5997 100644 --- a/app/components/procedure/card/attestation_component/attestation_component.html.haml +++ b/app/components/procedure/card/attestation_component/attestation_component.html.haml @@ -4,15 +4,11 @@ - if @procedure.attestation_template&.activated? %div - if error_messages.present? - %span.icon.refuse - %p.fr-tile-status-error À modifier + %p.fr-badge.fr-badge--warning À modifier - else - %span.icon.accept - %p.fr-tile-status-accept Activée + %p.fr-badge.fr-badge--success Activée - else - %div - %span.icon.clock - %p.fr-tile-status-todo Désactivée + %p.fr-badge Désactivée %div %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle Délivrance automatique pour les dossiers acceptés diff --git a/app/components/procedure/card/champs_component/champs_component.html.haml b/app/components/procedure/card/champs_component/champs_component.html.haml index 669497630..98197d5cf 100644 --- a/app/components/procedure/card/champs_component/champs_component.html.haml +++ b/app/components/procedure/card/champs_component/champs_component.html.haml @@ -6,13 +6,9 @@ %span.icon.refuse %p.fr-tile-status-error À modifier - elsif @count == 0 - %div - %span.icon.clock - %p.fr-tile-status-todo À faire + %p.fr-badge.fr-badge--warning À faire - else - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé %div .line-count.fr-my-1w %p.fr-tag= @count diff --git a/app/components/procedure/card/chorus_component/chorus_component.html.haml b/app/components/procedure/card/chorus_component/chorus_component.html.haml index 8fd65667b..095056e73 100644 --- a/app/components/procedure/card/chorus_component/chorus_component.html.haml +++ b/app/components/procedure/card/chorus_component/chorus_component.html.haml @@ -2,13 +2,9 @@ = link_to edit_admin_procedure_chorus_path(@procedure), class: 'fr-tile fr-enlarge-link', title: 'Configurer le cadre budgetaire Chorus' do .fr-tile__body.flex.column.align-center.justify-between - if !@procedure.chorus_configuration.complete? - %div - %span.icon.clock - %p.fr-tile-status-todo À compléter + %p.fr-badge.fr-badge--warning À compléter - else - %div - %span.icon.accept - %p.fr-tile-status-accept Configuré + %p.fr-badge.fr-badge--success Configuré %div %h3.fr-h6.fr-mt-10v Connecteur Chorus diff --git a/app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml b/app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml index 69146624e..c77f353e5 100644 --- a/app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml +++ b/app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml @@ -2,13 +2,9 @@ = link_to edit_admin_procedure_dossier_submitted_message_path(@procedure), class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - if @procedure.active_dossier_submitted_message.present? - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé - else - %div - %span.icon.clock - %p.fr-tile-status-todo À configurer + %p.fr-badge.fr-badge--info À configurer %div %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle Orienter l'usager suite à l'envoi de son dossier diff --git a/app/components/procedure/card/emails_component/emails_component.html.haml b/app/components/procedure/card/emails_component/emails_component.html.haml index 42ee0b234..eb6fd7205 100644 --- a/app/components/procedure/card/emails_component/emails_component.html.haml +++ b/app/components/procedure/card/emails_component/emails_component.html.haml @@ -3,14 +3,11 @@ .fr-tile__body.flex.column.align-center.justify-between %div - if error_messages.present? - %span.icon.refuse - %p.fr-tile-status-error À modifier + %p.fr-badge.fr-badge--warning À modifier - elsif fully_customized? - %span.icon.accept - %p.fr-tile-status-todo Validé + %p.fr-badge.fr-badge--success Validé - else - %span.icon.clock - %p.fr-tile-status-todo À configurer + %p.fr-badge.fr-badge--info À configurer %div .line-count.fr-my-1w %p.fr-tag= customized_progress diff --git a/app/components/procedure/card/experts_component/experts_component.html.haml b/app/components/procedure/card/experts_component/experts_component.html.haml index 1ef946814..c77daca21 100644 --- a/app/components/procedure/card/experts_component/experts_component.html.haml +++ b/app/components/procedure/card/experts_component/experts_component.html.haml @@ -1,9 +1,7 @@ .fr-col-6.fr-col-md-4.fr-col-lg-3 = link_to admin_procedure_experts_path(@procedure), class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - %div - %span.icon.preview - %p.fr-tile-status-todo À configurer + %p.fr-badge.fr-badge--info À configurer %div %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle Gérer les avis des experts invités diff --git a/app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml b/app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml index 102b5a687..fdcc8fc4f 100644 --- a/app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml +++ b/app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml @@ -2,13 +2,9 @@ = link_to admin_procedure_groupe_instructeurs_path(@procedure), id: 'groupe-instructeurs', class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - if @procedure.routing_enabled? || @procedure.instructeurs.present? - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé - else - %div - %span.icon.clock - %p.fr-tile-status-todo À faire + %p.fr-badge.fr-badge--warning À faire %div .line-count.fr-my-1w - if @procedure.routing_enabled? diff --git a/app/components/procedure/card/modifications_component/modifications_component.html.haml b/app/components/procedure/card/modifications_component/modifications_component.html.haml index 677847f6a..7ee37782a 100644 --- a/app/components/procedure/card/modifications_component/modifications_component.html.haml +++ b/app/components/procedure/card/modifications_component/modifications_component.html.haml @@ -1,12 +1,11 @@ .fr-col-6.fr-col-md-4.fr-col-lg-3 = link_to modifications_admin_procedure_path(@procedure), id: 'modifications', class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between + %p.fr-badge.fr-badge--success Activée %div - %span.icon.accept - %p.fr-tile-status-accept Activée - %div - %h3.fr-h6.fr-mt-10v + .line-count.fr-my-1w %p.fr-tag= @procedure.revisions_count + %h3.fr-h6 = t('.title', count: @procedure.revisions_count) %p.fr-tile-subtitle Historique des modifications du formulaire diff --git a/app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml b/app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml index 564451ead..7710d31c2 100644 --- a/app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml +++ b/app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml @@ -2,13 +2,9 @@ = link_to monavis_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - if @procedure.monavis_embed.present? - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé - else - %div - %span.icon.clock - %p.fr-tile-status-todo À configurer + %p.fr-badge.fr-badge--info À configurer %div %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle Avis des usagers sur votre démarche diff --git a/app/components/procedure/card/presentation_component/presentation_component.html.haml b/app/components/procedure/card/presentation_component/presentation_component.html.haml index 0620c11cc..f09dbfb22 100644 --- a/app/components/procedure/card/presentation_component/presentation_component.html.haml +++ b/app/components/procedure/card/presentation_component/presentation_component.html.haml @@ -1,9 +1,7 @@ .fr-col-6.fr-col-md-4.fr-col-lg-3 = link_to edit_admin_procedure_path(@procedure), id: 'presentation', class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé %div %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle Logo, nom, description diff --git a/app/components/procedure/card/service_component/service_component.html.haml b/app/components/procedure/card/service_component/service_component.html.haml index 2073b990b..270484fcc 100644 --- a/app/components/procedure/card/service_component/service_component.html.haml +++ b/app/components/procedure/card/service_component/service_component.html.haml @@ -2,13 +2,9 @@ = link_to service_link, class: 'fr-tile fr-enlarge-link', id: 'service' do .fr-tile__body.flex.column.align-center.justify-between - if @procedure.service_id.present? - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé - else - %div - %span.icon.clock - %p.fr-tile-status-todo À faire + %p.fr-badge.fr-badge--warning À faire %div %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle diff --git a/app/components/procedure/card/sva_svr_component/sva_svr_component.html.haml b/app/components/procedure/card/sva_svr_component/sva_svr_component.html.haml index 906e78976..2b4297749 100644 --- a/app/components/procedure/card/sva_svr_component/sva_svr_component.html.haml +++ b/app/components/procedure/card/sva_svr_component/sva_svr_component.html.haml @@ -2,13 +2,9 @@ = link_to edit_admin_procedure_sva_svr_path(@procedure), class: 'fr-tile fr-enlarge-link', id: 'sva' do .fr-tile__body.flex.column.align-center.justify-between - if @procedure.sva_svr_enabled? - %div - %span.icon.accept - %p.fr-tile-status-accept= t('.ready') + %p.fr-badge.fr-badge--success= t('.ready') - else - %div - %span.icon.clock - %p.fr-tile-status-todo= t('.needs_configuration') + %p.fr-badge.fr-badge--info= t('.needs_configuration') %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle= t('.subtitle') %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit') diff --git a/app/components/procedure/card/zones_component/zones_component.html.haml b/app/components/procedure/card/zones_component/zones_component.html.haml index d2ca9bd67..5361197de 100644 --- a/app/components/procedure/card/zones_component/zones_component.html.haml +++ b/app/components/procedure/card/zones_component/zones_component.html.haml @@ -2,13 +2,9 @@ = link_to zones_admin_procedure_path(@procedure), id: 'zones', class: 'fr-tile fr-enlarge-link' do .fr-tile__body.flex.column.align-center.justify-between - if @procedure.zones.size >= 1 - %div - %span.icon.accept - %p.fr-tile-status-accept Validé + %p.fr-badge.fr-badge--success Validé - else - %div - %span.icon.clock - %p.fr-tile-status-todo À faire + %p.fr-badge.fr-badge--info À faire %div %h3.fr-h6.fr-mt-10v= t('.title') %p.fr-tile-subtitle= t('.subtitle') diff --git a/spec/system/administrateurs/procedure_attestation_template_spec.rb b/spec/system/administrateurs/procedure_attestation_template_spec.rb index e45e8be98..91adc458b 100644 --- a/spec/system/administrateurs/procedure_attestation_template_spec.rb +++ b/spec/system/administrateurs/procedure_attestation_template_spec.rb @@ -25,7 +25,8 @@ describe 'As an administrateur, I want to manage the procedure’s attestation', scenario do visit admin_procedure_path(procedure) # start with no attestation - find_attestation_card(with_nested_selector: ".icon.clock") + expect(page).to have_content('Désactivée') + find_attestation_card(with_nested_selector: ".fr-badge") # now process to enable attestation find_attestation_card.click @@ -38,7 +39,8 @@ describe 'As an administrateur, I want to manage the procedure’s attestation', # check attestation visit admin_procedure_path(procedure) - find_attestation_card(with_nested_selector: ".icon.accept") + expect(page).to have_content('Activée') + find_attestation_card(with_nested_selector: ".fr-badge--success") # publish procedure # click CTA for publication screen @@ -54,7 +56,8 @@ describe 'As an administrateur, I want to manage the procedure’s attestation', # check attestation is now disabled visit admin_procedure_path(procedure) - find_attestation_card(with_nested_selector: ".icon.clock") + expect(page).to have_content('Désactivée') + find_attestation_card(with_nested_selector: ".fr-badge") end end end From 31cb62e27da86319cb7c949dbdd0999e74fc421a Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Wed, 15 Nov 2023 17:58:26 +0100 Subject: [PATCH 15/17] improve dark mode for admin user --- app/assets/images/icons/move-handle.svg | 1 - app/assets/stylesheets/forms.scss | 22 ++++------------ app/assets/stylesheets/icons.scss | 4 --- app/assets/stylesheets/manager.scss | 1 - .../stylesheets/personnes_impliquees.scss | 1 - .../stylesheets/procedure_champs_editor.scss | 8 +----- app/assets/stylesheets/procedure_form.scss | 6 ++++- .../stylesheets/sources_particulier_form.scss | 26 ------------------- .../repetition_component.html.haml | 2 +- .../api_token_component.html.haml | 2 +- .../champ_component/champ_component.html.haml | 2 +- .../_informations.html.haml | 4 +-- .../attestation_templates/edit.html.haml | 2 +- .../_informations.html.haml | 7 ++--- .../dossier_submitted_messages/edit.html.haml | 5 ++-- .../jeton_particulier/show.html.haml | 8 +++--- .../mail_templates/edit.html.haml | 2 +- .../procedures/_monavis.html.haml | 26 ++++++++++--------- .../procedures/jeton.html.haml | 16 +++++++----- .../sources_particulier/show.html.haml | 9 ++++--- .../procedures/email_notifications.html.haml | 6 +++-- app/views/manager/procedures/show.html.erb | 2 +- app/views/root/patron.html.haml | 5 ++-- 23 files changed, 65 insertions(+), 102 deletions(-) delete mode 100644 app/assets/images/icons/move-handle.svg delete mode 100644 app/assets/stylesheets/sources_particulier_form.scss diff --git a/app/assets/images/icons/move-handle.svg b/app/assets/images/icons/move-handle.svg deleted file mode 100644 index 1e809fbc4..000000000 --- a/app/assets/images/icons/move-handle.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 4035a4a49..a645ac77a 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -386,7 +386,6 @@ [data-reach-combobox-token] button { border: solid 1px $border-grey; - color: $black; border-radius: 4px; padding: $default-spacer; margin-right: $default-spacer; @@ -449,22 +448,6 @@ margin-bottom: $default-padding; } - .explication-libelle { - font-weight: bold; - font-size: 20px; - margin-bottom: $default-padding; - } - - .explication { - margin-bottom: $default-fields-spacer; - padding: $default-spacer; - background-color: $light-grey; - - p:not(:last-child) { - margin-bottom: $default-padding; - } - } - .send-wrapper { display: flex; width: 100%; @@ -662,6 +645,11 @@ textarea::placeholder { } } +[data-fr-theme="dark"] .fixed-footer { + border-top: 2px solid var(--background-action-low-blue-france-hover); + background-color: var(--background-action-low-blue-france); +} + .fixed-footer { border-top: 2px solid $blue-france-500; position: fixed; diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index 37c0a156a..84fc3f272 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -170,10 +170,6 @@ background-image: image-url("icons/trash.svg"); } - &.move-handle { - background-image: image-url("icons/move-handle.svg"); - } - &.mandatory { width: 10px; } diff --git a/app/assets/stylesheets/manager.scss b/app/assets/stylesheets/manager.scss index de6abef3f..facc768ac 100644 --- a/app/assets/stylesheets/manager.scss +++ b/app/assets/stylesheets/manager.scss @@ -23,7 +23,6 @@ .form [data-reach-combobox-token] button { border: solid 1px #CCCCCC; background-color: transparent; - color: #333333; border-radius: 4px; padding: 8px; margin-right: 8px; diff --git a/app/assets/stylesheets/personnes_impliquees.scss b/app/assets/stylesheets/personnes_impliquees.scss index 64e982129..d47aa2755 100644 --- a/app/assets/stylesheets/personnes_impliquees.scss +++ b/app/assets/stylesheets/personnes_impliquees.scss @@ -19,7 +19,6 @@ [data-reach-combobox-token] button { border: solid 1px $border-grey; - color: $black; margin-top: 0.5 * $default-padding; margin-bottom: 0.5 * $default-padding; margin-right: 0.5 * $default-padding; diff --git a/app/assets/stylesheets/procedure_champs_editor.scss b/app/assets/stylesheets/procedure_champs_editor.scss index 6fff56e38..04d977626 100644 --- a/app/assets/stylesheets/procedure_champs_editor.scss +++ b/app/assets/stylesheets/procedure_champs_editor.scss @@ -25,15 +25,9 @@ box-shadow: 0px 2px 4px -4px; } - .handle.icon { - width: 32px; - height: 32px; - background-size: 32px; - margin-left: 7px; - margin-right: 16px; + .handle { align-self: center; cursor: grab; - opacity: 0.8; &:hover { opacity: 0.4; diff --git a/app/assets/stylesheets/procedure_form.scss b/app/assets/stylesheets/procedure_form.scss index a65e38ec6..68c7839c8 100644 --- a/app/assets/stylesheets/procedure_form.scss +++ b/app/assets/stylesheets/procedure_form.scss @@ -22,7 +22,6 @@ .procedure-form__column--form { flex: 10; padding: 0 $default-padding; - background-color: $light-grey; input[type=file] { background-color: transparent; // Remove white bg set by DSFR @@ -67,6 +66,11 @@ } } +[data-fr-theme="dark"] .procedure-form__actions { + background: var(--background-action-low-blue-france); + border-top: 1px solid var(--background-action-low-blue-france-hover); +} + .procedure-form__actions { display: flex; padding: $default-spacer $default-padding; diff --git a/app/assets/stylesheets/sources_particulier_form.scss b/app/assets/stylesheets/sources_particulier_form.scss deleted file mode 100644 index 650c6bfdf..000000000 --- a/app/assets/stylesheets/sources_particulier_form.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "constants"; - -#sources-particulier-form { - h2 { - margin-bottom: 0; - } - - h3 { - margin-top: 2 * $default-padding; - } - - .explication { - padding: $default-padding; - - ul { - list-style-type: circle; - list-style-position: inside; - padding-left: $default-padding; - margin-bottom: $default-padding; - } - } - - .form input[type="checkbox"] { - margin-bottom: 0; - } -} diff --git a/app/components/editable_champ/repetition_component/repetition_component.html.haml b/app/components/editable_champ/repetition_component/repetition_component.html.haml index d81bd8f64..6e0f83525 100644 --- a/app/components/editable_champ/repetition_component/repetition_component.html.haml +++ b/app/components/editable_champ/repetition_component/repetition_component.html.haml @@ -1,5 +1,5 @@ %fieldset - %legend.header-subsection{ legend_params }= @champ.libelle + %legend.fr-h5{ legend_params }= @champ.libelle - if @champ.description.present? .notice{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true) diff --git a/app/components/profile/api_token_component/api_token_component.html.haml b/app/components/profile/api_token_component/api_token_component.html.haml index d187510a0..afadbfe11 100644 --- a/app/components/profile/api_token_component/api_token_component.html.haml +++ b/app/components/profile/api_token_component/api_token_component.html.haml @@ -51,7 +51,7 @@ = f.button type: :submit, class: "fr-btn fr-btn--secondary" do = t('.add') - = form_for @api_token, namespace: dom_id(@api_token, :write_access), html: { class: 'form form-ds-fr-white mb-3', data: { turbo: true, controller: 'autosubmit' } } do |f| + = form_for @api_token, namespace: dom_id(@api_token, :write_access), html: { class: 'form mb-3', data: { turbo: true, controller: 'autosubmit' } } do |f| = f.label :write_access do = t('.token_procedures') %label.toggle-switch.no-margin diff --git a/app/components/types_de_champ_editor/champ_component/champ_component.html.haml b/app/components/types_de_champ_editor/champ_component/champ_component.html.haml index 047bcf277..0a10ee99f 100644 --- a/app/components/types_de_champ_editor/champ_component/champ_component.html.haml +++ b/app/components/types_de_champ_editor/champ_component/champ_component.html.haml @@ -1,7 +1,7 @@ %li.type-de-champ.flex.column.justify-start{ html_options } .type-de-champ-container .flex.justify-between.section.head.hr - .handle.small.icon-only.icon.move-handle{ title: "Déplacer le champ vers le haut ou vers le bas" } + .handle.fr-icon-drag-move-2-line{ title: "Déplacer le champ vers le haut ou vers le bas" } - if coordinate.used_by_routing_rules? .flex.align-center diff --git a/app/views/administrateurs/attestation_templates/_informations.html.haml b/app/views/administrateurs/attestation_templates/_informations.html.haml index 139c4ff53..d98874088 100644 --- a/app/views/administrateurs/attestation_templates/_informations.html.haml +++ b/app/views/administrateurs/attestation_templates/_informations.html.haml @@ -23,13 +23,13 @@ .description = tag[:description] -%h3.header-subsection Logo de l'attestation +%h3.fr-h5 Logo de l'attestation %p.fr-text--sm.fr-text-mention--grey.fr-mb-0 Dimensions conseillées : au minimum 500px de largeur ou de hauteur. = render Attachment::EditComponent.new(attached_file: @attestation_template.logo, direct_upload: false) -%h3.header-subsection.fr-mt-5w Tampon de l'attestation +%h3.fr-h5.fr-mt-5w Tampon de l'attestation %p.fr-text--sm.fr-text-mention--grey.fr-mb-0 Dimensions conseillées : au minimum 500px de largeur ou de hauteur. = render Attachment::EditComponent.new(attached_file: @attestation_template.signature, direct_upload: false) diff --git a/app/views/administrateurs/attestation_templates/edit.html.haml b/app/views/administrateurs/attestation_templates/edit.html.haml index 2923c6aa3..cea7a1b20 100644 --- a/app/views/administrateurs/attestation_templates/edit.html.haml +++ b/app/views/administrateurs/attestation_templates/edit.html.haml @@ -10,7 +10,7 @@ = render NestedForms::FormOwnerComponent.new = form_for @attestation_template, url: admin_procedure_attestation_template_path(@procedure), - html: { multipart: true, class: 'form form-ds-fr-white procedure-form__column--form' } do |f| + html: { multipart: true, class: 'form procedure-form__column--form fr-background-alt--blue-france' } do |f| %h1.page-title Délivrance d’attestation diff --git a/app/views/administrateurs/dossier_submitted_messages/_informations.html.haml b/app/views/administrateurs/dossier_submitted_messages/_informations.html.haml index e9fb291e9..6991e56cd 100644 --- a/app/views/administrateurs/dossier_submitted_messages/_informations.html.haml +++ b/app/views/administrateurs/dossier_submitted_messages/_informations.html.haml @@ -1,3 +1,4 @@ -= f.label :message_on_submit_by_usager do - Message affiché après l'envoi du dossier -= f.text_area :message_on_submit_by_usager, placeholder: "Merci, votre dossier sera traité dans les plus brefs délais" +.fr-input-group + = f.label :message_on_submit_by_usager do + Message affiché après l'envoi du dossier + = f.text_area :message_on_submit_by_usager, placeholder: "Merci, votre dossier sera traité dans les plus brefs délais", class: 'fr-input' diff --git a/app/views/administrateurs/dossier_submitted_messages/edit.html.haml b/app/views/administrateurs/dossier_submitted_messages/edit.html.haml index 6a4d4d4b8..08ce1b7cd 100644 --- a/app/views/administrateurs/dossier_submitted_messages/edit.html.haml +++ b/app/views/administrateurs/dossier_submitted_messages/edit.html.haml @@ -9,7 +9,7 @@ .procedure-form__columns.container = form_for @dossier_submitted_message, url: url_for({ controller: 'administrateurs/dossier_submitted_messages', action: :update, id: @procedure.id }), - html: { class: 'form procedure-form__column--form' } do |f| + html: { class: 'form procedure-form__column--form fr-background-alt--blue-france' } do |f| %h1.page-title Fin du dépot @@ -18,10 +18,9 @@ = render partial: 'administrateurs/dossier_submitted_messages/informations', locals: { f: f } - .procedure-form__actions .actions-left - = f.submit 'Enregistrer', class: 'button primary send' + = f.submit 'Enregistrer', class: 'fr-btn send' .procedure-form__column--preview %h3 diff --git a/app/views/administrateurs/jeton_particulier/show.html.haml b/app/views/administrateurs/jeton_particulier/show.html.haml index f8442cf99..e794d2895 100644 --- a/app/views/administrateurs/jeton_particulier/show.html.haml +++ b/app/views/administrateurs/jeton_particulier/show.html.haml @@ -11,12 +11,14 @@ .container %h1 = form_with model: @procedure, url: admin_procedure_api_particulier_jeton_path, local: true, html: { class: 'form' } do |f| - %p.explication - = t('.api_particulier_description_html', app_name: APPLICATION_NAME) + = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c| + - c.body do + %p + = t('.api_particulier_description_html', app_name: APPLICATION_NAME) = f.label :api_particulier_token .desc.mb-2 %p= t('.token_description') = f.password_field :api_particulier_token, class: 'form-control', required: :required .text-right - = f.button t('views.shared.actions.save'), class: 'button primary send' + = f.button t('views.shared.actions.save'), class: 'fr-btn send' diff --git a/app/views/administrateurs/mail_templates/edit.html.haml b/app/views/administrateurs/mail_templates/edit.html.haml index d7a6f5ed4..7a6f57679 100644 --- a/app/views/administrateurs/mail_templates/edit.html.haml +++ b/app/views/administrateurs/mail_templates/edit.html.haml @@ -14,7 +14,7 @@ = form_for @mail_template, url: admin_procedure_mail_template_path(@procedure, @mail_template.class.const_get(:SLUG)), method: :put, - html: { class: 'form form-ds-fr-white procedure-form__column--form' } do |f| + html: { class: 'form form-ds-fr-white procedure-form__column--form fr-background-alt--blue-france' } do |f| %h1.page-title= @mail_template.class.const_get(:DISPLAYED_NAME) = render partial: 'form', locals: { f: f, tags: @mail_template.tags } diff --git a/app/views/administrateurs/procedures/_monavis.html.haml b/app/views/administrateurs/procedures/_monavis.html.haml index 11d1f9ec7..272b54430 100644 --- a/app/views/administrateurs/procedures/_monavis.html.haml +++ b/app/views/administrateurs/procedures/_monavis.html.haml @@ -1,15 +1,17 @@ -%p.explication - Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur « - %a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr - », créer un compte, et référencer la démarche que vous venez de publier. - %br - %br - Vous pouvez - %a{ :href => DOC_INTEGRATION_MONAVIS_URL } consulter notre tutoriel complet - pour intégrer le bouton « MonAvis » sur #{APPLICATION_NAME}. - %br - %br - Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous : += render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c| + - c.body do + %p + Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur « + %a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr + », créer un compte, et référencer la démarche que vous venez de publier. + %br + %br + Vous pouvez + %a{ :href => DOC_INTEGRATION_MONAVIS_URL } consulter notre tutoriel complet + pour intégrer le bouton « MonAvis » sur #{APPLICATION_NAME}. + %br + %br + Une fois en possession du code généré sur le site MonAvis, vous pouvez le coller dans le champ ci-dessous : .fr-input-group = f.label :monavis_embed, "Mon avis", class: "fr-label" diff --git a/app/views/administrateurs/procedures/jeton.html.haml b/app/views/administrateurs/procedures/jeton.html.haml index 5f86e9817..c98e021f5 100644 --- a/app/views/administrateurs/procedures/jeton.html.haml +++ b/app/views/administrateurs/procedures/jeton.html.haml @@ -10,13 +10,15 @@ .container %h1 = form_with model: @procedure, url: url_for({ controller: 'administrateurs/procedures', action: :update_jeton }) do |f| - %p.explication - Démarches Simplifiées utilise - = link_to 'API Entreprise', "https://entreprise.api.gouv.fr/" - qui permet de récupérer les informations administratives des entreprises et des associations. - Si votre démarche nécessite des autorisations spécifiques que Démarches Simplifiées n’a pas par défaut, merci de renseigner ici le jeton - = link_to 'API Entreprise', "https://api.gouv.fr/les-api/api-entreprise/demande-acces" - propre à votre démarche. + = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c| + - c.body do + %p + Démarches Simplifiées utilise + = link_to 'API Entreprise', "https://entreprise.api.gouv.fr/" + qui permet de récupérer les informations administratives des entreprises et des associations. + Si votre démarche nécessite des autorisations spécifiques que Démarches Simplifiées n’a pas par défaut, merci de renseigner ici le jeton + = link_to 'API Entreprise', "https://api.gouv.fr/les-api/api-entreprise/demande-acces" + propre à votre démarche. .fr-input-group = f.label :api_entreprise_token, "Jeton", class: 'fr-label' diff --git a/app/views/administrateurs/sources_particulier/show.html.haml b/app/views/administrateurs/sources_particulier/show.html.haml index 8a725096c..8881b3661 100644 --- a/app/views/administrateurs/sources_particulier/show.html.haml +++ b/app/views/administrateurs/sources_particulier/show.html.haml @@ -9,13 +9,16 @@ .container#sources-particulier-form.mb-2 = form_with model: @procedure, url: admin_procedure_api_particulier_sources_path, local: true, html: { class: 'form' } do |f| - .explication= t('.explication_html') + = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c| + - c.body do + %p + = t('.explication_html') - @available_sources.each do |provider_key, scopes| %h2.header-section= t("api_particulier.providers.#{provider_key}.libelle") - scopes.each do |scope_key, sources| - %h3.explication-libelle= t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.libelle") + %h3= t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.libelle") %ul.procedure-admin-api-particulier-sources{ id: "#{provider_key}-#{scope_key}" } - sources.each do |source_key, enabled_hash| - enabled = (@procedure.api_particulier_sources.dig(provider_key, scope_key)&.include?(source_key)).present? @@ -25,4 +28,4 @@ #{t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.#{source_key}")} .text-right - = f.button t('views.shared.actions.save'), class: 'button primary send' + = f.button t('views.shared.actions.save'), class: 'fr-btn send' diff --git a/app/views/instructeurs/procedures/email_notifications.html.haml b/app/views/instructeurs/procedures/email_notifications.html.haml index 7642f6041..de0185e51 100644 --- a/app/views/instructeurs/procedures/email_notifications.html.haml +++ b/app/views/instructeurs/procedures/email_notifications.html.haml @@ -9,8 +9,10 @@ = t('.title') = form_for @assign_to, url: update_email_notifications_instructeur_procedure_path(@procedure), html: { class: 'form' } do |form| - .explication - = t('.subtitle') + = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c| + - c.body do + %p + = t('.subtitle') = form.label :email_notification, t('.for_each_file_submitted.title') diff --git a/app/views/manager/procedures/show.html.erb b/app/views/manager/procedures/show.html.erb index 0ec2adecc..47a4c2b4b 100644 --- a/app/views/manager/procedures/show.html.erb +++ b/app/views/manager/procedures/show.html.erb @@ -89,7 +89,7 @@ as well as a link to its edit page. <% end %> <% end %> <% if attribute.name == 'tags' %> - <%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form mt-1' } do %> + <%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form fr-background-alt--blue-france mt-1' } do %> <%= hidden_field_tag 'procedure[tags]', nil %> <%= react_component("ComboMultiple", options: Procedure.tags, diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index 02d15120b..1c221bdcc 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -35,7 +35,6 @@ %span.icon.retry %span.icon.download %span.icon.download-white - %span.icon.move-handle %span.icon.frown %span.icon.meh %span.icon.smile @@ -50,7 +49,7 @@ %label Mot de passe %input{ type: "password", value: "12345678" } - %h3.header-subsection Bouton radio verticaux + %h3.fr-h5 Bouton radio verticaux .radios.vertical = f.label :archived, value: true do = f.radio_button :archived, true @@ -61,7 +60,7 @@ Option B %p.notice Une autre option, pas mal non plus. - %h3.header-subsection Interrupteur + %h3.fr-h5 Interrupteur %label.toggle-switch = f.check_box :archived, class: 'toggle-switch-checkbox' %span.toggle-switch-control.round From 139e8f2059aa6edcebe292d9eac1c459ed62bd8f Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Thu, 16 Nov 2023 14:02:07 +0100 Subject: [PATCH 16/17] rename theme modal --- ...{_display_modal.html.haml => _display_theme_modal.html.haml} | 0 app/views/layouts/application.html.haml | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename app/views/layouts/{_display_modal.html.haml => _display_theme_modal.html.haml} (100%) diff --git a/app/views/layouts/_display_modal.html.haml b/app/views/layouts/_display_theme_modal.html.haml similarity index 100% rename from app/views/layouts/_display_modal.html.haml rename to app/views/layouts/_display_theme_modal.html.haml diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index a99911dda..e78873f70 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -38,7 +38,7 @@ %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' + = render partial: 'layouts/display_theme_modal' .page-wrapper - if feature_enabled?(:team_on_strike) From 8ecc24258688c0427d25a24668b975ac2318184c Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Thu, 16 Nov 2023 14:06:05 +0100 Subject: [PATCH 17/17] fix display of notification dot inside DSFR tabs --- app/assets/stylesheets/notifications.scss | 6 ++++++ app/views/shared/_tab_item.html.haml | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss index d9e6a9931..eec59f93d 100644 --- a/app/assets/stylesheets/notifications.scss +++ b/app/assets/stylesheets/notifications.scss @@ -7,3 +7,9 @@ span.notifications { border-radius: 4px; background-color: $orange; } + +.fr-tabs__list span.notifications { + z-index: 2; + top: 5px; + right: 8px; +} diff --git a/app/views/shared/_tab_item.html.haml b/app/views/shared/_tab_item.html.haml index 73a96e55b..cd4103ef8 100644 --- a/app/views/shared/_tab_item.html.haml +++ b/app/views/shared/_tab_item.html.haml @@ -1,4 +1,4 @@ -%li{ class: (active ? 'active' : nil), role: 'presentation' } +%li{ class: "relative #{(active ? 'active' : nil)}", role: 'presentation' } - if notification %span.notifications{ 'aria-label': 'notifications' } = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab', role: 'tab' ) do