From f18401d183c3aae64b532c53c12a7e8a32e1fa3a Mon Sep 17 00:00:00 2001 From: Matt-Yorkley Date: Sat, 2 Sep 2017 18:25:17 +0100 Subject: [PATCH] Language switcher frontend --- .../stylesheets/darkswarm/menu.css.scss | 12 ++++++- app/views/layouts/darkswarm.html.haml | 1 + app/views/shared/menu/_large_menu.html.haml | 8 +++++ app/views/shared/menu/_mobile_menu.html.haml | 10 ++++++ config/locales/en.yml | 1 + spec/features/consumer/multilingual_spec.rb | 32 +++++++++++++++++++ 6 files changed, 63 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss index e526ff50a2..72f46b28be 100644 --- a/app/assets/stylesheets/darkswarm/menu.css.scss +++ b/app/assets/stylesheets/darkswarm/menu.css.scss @@ -36,10 +36,15 @@ nav { .top-bar-section .has-dropdown > a { padding-right: ($topbar-height / 3) !important; - i.ofn-i_022-cog { + i.ofn-i_022-cog, i.fa{ font-size: 24px; line-height: $topbar-height; } + + i.fa.fa-globe { + color: #666; + font-size: 27px + } } .top-bar-section .has-dropdown > a:after { @@ -95,6 +100,11 @@ nav { background-color: white; } +.off-canvas-list li.language-switcher ul li { + list-style-type: none; + padding-left: 0.5em; +} + .off-canvas-wrap.move-right .tab-bar .menu-icon { @include box-shadow(inset 0 0 6px 2px rgba(0, 0, 0, 0.5)); } diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml index c612388071..3df5328d6c 100644 --- a/app/views/layouts/darkswarm.html.haml +++ b/app/views/layouts/darkswarm.html.haml @@ -13,6 +13,7 @@ - else = favicon_link_tag "/favicon-staging.ico" %link{href: "https://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"} + %link{href: "https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css", rel: "stylesheet"} = yield :scripts %script{:src => "https://js.stripe.com/v3/", :type => "text/javascript"} diff --git a/app/views/shared/menu/_large_menu.html.haml b/app/views/shared/menu/_large_menu.html.haml index 89420217a9..18b9660927 100644 --- a/app/views/shared/menu/_large_menu.html.haml +++ b/app/views/shared/menu/_large_menu.html.haml @@ -60,6 +60,14 @@ = t 'powered_by' %a{href: '/'} = t 'title' + - if I18n.available_locales.count > 1 + %li.language-switcher.has-dropdown.not-click + %a{href: '#'} + %i.fa.fa-globe + %ul.dropdown + - I18n.available_locales.each do |l| + %li + %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l) - if spree_current_user.nil? = render 'shared/signed_out' - else diff --git a/app/views/shared/menu/_mobile_menu.html.haml b/app/views/shared/menu/_mobile_menu.html.haml index 2d91c11558..3c0b66c08e 100644 --- a/app/views/shared/menu/_mobile_menu.html.haml +++ b/app/views/shared/menu/_mobile_menu.html.haml @@ -40,6 +40,16 @@ %span.nav-primary %i.ofn-i_036-producers = t 'label_producers' + - if I18n.available_locales.count > 1 + %li.language-switcher.li-menu + %a + %i.fa.fa-globe + = t('language_name') + %ul + - I18n.available_locales.each do |l| + - if I18n.locale != l + %li + %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l) - if feature? :connect_learn_homepage %li.li-menu %a{href: "https://openfoodnetwork.org/au/connect/"} diff --git a/config/locales/en.yml b/config/locales/en.yml index 947968211a..ec85efccd2 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -55,6 +55,7 @@ en: # Overridden here due to a bug in spree i18n (Issue #870, and issue #1800) + language_name: "English" # Localised name of this language activerecord: attributes: spree/order: diff --git a/spec/features/consumer/multilingual_spec.rb b/spec/features/consumer/multilingual_spec.rb index 4f163dee01..201c6391f1 100644 --- a/spec/features/consumer/multilingual_spec.rb +++ b/spec/features/consumer/multilingual_spec.rb @@ -68,4 +68,36 @@ feature 'Multilingual', js: true do expect(page).to have_content 'TIENDAS' end end + + describe "using the language switcher UI" do + context "when there is only one language available" do + around do |example| + I18n.available_locales = ['en'] + example.run + I18n.available_locales = ['en', 'es'] + end + + it "hides the dropdown language menu" do + visit root_path + expect(page).to_not have_css 'ul.right li.language-switcher.has-dropdown' + end + end + + it "allows switching language via the main navigation" do + visit root_path + + expect(page).to have_content 'SHOPS' + + find('ul.right li.language-switcher').click + within'ul.right li.language-switcher ul.dropdown' do + expect(page).to have_link I18n.t('language_name', locale: :en), href: '?locale=en' + expect(page).to have_link I18n.t('language_name', locale: :es, default: 'Language Name'), href: '?locale=es' + + find('li a[href="?locale=es"]').click + end + + expect(page.driver.browser.cookies['locale'].value).to eq 'es' + expect(page).to have_content 'TIENDAS' + end + end end