From 7e29fe40f62f12e96812f2b05463981d896deccd Mon Sep 17 00:00:00 2001 From: DanteZ5 Date: Wed, 21 Sep 2022 10:06:45 +0200 Subject: [PATCH 1/3] fix-ux(issue#7774) : indicateur menu email navbar --- app/assets/stylesheets/buttons.scss | 4 ++++ app/views/layouts/_account_dropdown.haml | 4 ++-- spec/views/layouts/_header_spec.rb | 3 +++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index cd1aee3e0..fb36763d5 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -316,3 +316,7 @@ .link { color: $blue-france-500; } + +#account-btn:before, #account-btn_copy:before { + content: none; +} diff --git a/app/views/layouts/_account_dropdown.haml b/app/views/layouts/_account_dropdown.haml index 9c99d69d9..7e1e279df 100644 --- a/app/views/layouts/_account_dropdown.haml +++ b/app/views/layouts/_account_dropdown.haml @@ -1,6 +1,6 @@ -%nav.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) } +%nav.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) } .fr-nav__item - %button.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } + %button#account-btn.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy'   = " #{current_email}" diff --git a/spec/views/layouts/_header_spec.rb b/spec/views/layouts/_header_spec.rb index 74683e29c..0a53a402e 100644 --- a/spec/views/layouts/_header_spec.rb +++ b/spec/views/layouts/_header_spec.rb @@ -20,6 +20,7 @@ describe 'layouts/_header.html.haml', type: :view do let(:profile) { nil } it { is_expected.to have_css(".fr-header__logo") } + it { is_expected.to_not have_css("button#account-btn") } it 'displays the Help link' do expect(subject).to have_link('Aide', href: FAQ_URL) @@ -44,6 +45,7 @@ describe 'layouts/_header.html.haml', type: :view do it { is_expected.to have_css(".fr-header__logo") } it { is_expected.to have_link("Dossiers", href: dossiers_path) } + it { is_expected.to have_selector(:button, user.email, id: "account-btn") } it 'displays the Help button' do expect(subject).to have_link("Aide", href: FAQ_URL) @@ -57,6 +59,7 @@ describe 'layouts/_header.html.haml', type: :view do let(:current_instructeur) { instructeur } it { is_expected.to have_css(".fr-header__logo") } + it { is_expected.to have_selector(:button, user.email, id: "account-btn") } it 'displays the Help dropdown menu' do expect(subject).to have_css(".help-dropdown") From a22851cc35564a92df31d82e6c26271f629daa00 Mon Sep 17 00:00:00 2001 From: DanteZ5 Date: Wed, 21 Sep 2022 10:40:50 +0200 Subject: [PATCH 2/3] fix linter SingleLinePerSelector --- app/assets/stylesheets/buttons.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index fb36763d5..3ba0cfaf3 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -317,6 +317,7 @@ color: $blue-france-500; } -#account-btn:before, #account-btn_copy:before { +#account-btn::before, +#account-btn_copy::before { content: none; } From 3826121751973bf937ccb4f4dc12057757797bec Mon Sep 17 00:00:00 2001 From: DanteZ5 Date: Wed, 21 Sep 2022 11:06:19 +0200 Subject: [PATCH 3/3] switch from id to class --- app/assets/stylesheets/buttons.scss | 5 ++--- app/views/layouts/_account_dropdown.haml | 2 +- spec/views/layouts/_header_spec.rb | 6 +++--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index 3ba0cfaf3..11a331fe5 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -317,7 +317,6 @@ color: $blue-france-500; } -#account-btn::before, -#account-btn_copy::before { - content: none; +.account-btn::before { + content: none !important; } diff --git a/app/views/layouts/_account_dropdown.haml b/app/views/layouts/_account_dropdown.haml index 7e1e279df..129f5ffaf 100644 --- a/app/views/layouts/_account_dropdown.haml +++ b/app/views/layouts/_account_dropdown.haml @@ -1,6 +1,6 @@ %nav.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) } .fr-nav__item - %button#account-btn.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } + %button.account-btn.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) } = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy'   = " #{current_email}" diff --git a/spec/views/layouts/_header_spec.rb b/spec/views/layouts/_header_spec.rb index 0a53a402e..db2d91dcc 100644 --- a/spec/views/layouts/_header_spec.rb +++ b/spec/views/layouts/_header_spec.rb @@ -20,7 +20,7 @@ describe 'layouts/_header.html.haml', type: :view do let(:profile) { nil } it { is_expected.to have_css(".fr-header__logo") } - it { is_expected.to_not have_css("button#account-btn") } + it { is_expected.to_not have_css(".account-btn") } it 'displays the Help link' do expect(subject).to have_link('Aide', href: FAQ_URL) @@ -45,7 +45,7 @@ describe 'layouts/_header.html.haml', type: :view do it { is_expected.to have_css(".fr-header__logo") } it { is_expected.to have_link("Dossiers", href: dossiers_path) } - it { is_expected.to have_selector(:button, user.email, id: "account-btn") } + it { is_expected.to have_selector(:button, user.email, class: "account-btn") } it 'displays the Help button' do expect(subject).to have_link("Aide", href: FAQ_URL) @@ -59,7 +59,7 @@ describe 'layouts/_header.html.haml', type: :view do let(:current_instructeur) { instructeur } it { is_expected.to have_css(".fr-header__logo") } - it { is_expected.to have_selector(:button, user.email, id: "account-btn") } + it { is_expected.to have_selector(:button, user.email, class: "account-btn") } it 'displays the Help dropdown menu' do expect(subject).to have_css(".help-dropdown")