From 0d8119a1e3594bf721cebb2775ab420ed36222cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 23 Aug 2020 21:40:54 +0200 Subject: [PATCH] Use social-share-button whatsapp icon We were using a custom icon because in the past social-share-button didn't have support for whatsapp. But now that it does, we can remove our custom icon. Note we're using the `_app` suffix because that's the name of the icon meant for mobile devices. --- app/assets/javascripts/social_share.js | 2 +- app/assets/stylesheets/icons.scss | 5 --- app/assets/stylesheets/layout.scss | 19 +++++++++-- app/assets/stylesheets/participation.scss | 12 ------- app/views/shared/_social_share.html.erb | 10 ++---- config/initializers/social_share_button.rb | 2 +- config/locales/en/general.yml | 1 - config/locales/en/social_share_button.yml | 3 +- config/locales/es/general.yml | 1 - config/locales/es/social_share_button.yml | 1 + spec/system/debates_spec.rb | 38 ++++++++++++++++++++-- spec/system/proposals_spec.rb | 38 ++++++++++++++++++++-- 12 files changed, 96 insertions(+), 36 deletions(-) diff --git a/app/assets/javascripts/social_share.js b/app/assets/javascripts/social_share.js index eb75fe479..70343755a 100644 --- a/app/assets/javascripts/social_share.js +++ b/app/assets/javascripts/social_share.js @@ -3,7 +3,7 @@ App.SocialShare = { initialize: function() { $(".social-share-button a").each(function() { - $(this).append("" + ($(this).data("site")) + ""); + $(this).append("" + ($(this).data("site").replace(/_app$/, "")) + ""); }); }, destroy: function() { diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index 5915164d2..aaf6ccb2f 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -186,10 +186,6 @@ font-weight: normal; } -.icon-whatsapp::before { - content: "\f232"; -} - .icon-zip::before { content: "\f1c6"; font-weight: normal; @@ -285,7 +281,6 @@ .icon-instagram, .icon-telegram, .icon-twitter, -.icon-whatsapp, .icon-youtube { &::before { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index b8c99cdde..3e2c83bae 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1571,7 +1571,8 @@ table { .ssb-facebook, .ssb-telegram, -.ssb-twitter { +.ssb-twitter, +.ssb-whatsapp_app { background-image: none !important; color: #fff; height: $line-height * 2 !important; @@ -1673,10 +1674,24 @@ table { } } +.ssb-whatsapp_app { + background: #43d854; + + &::before { + content: "P"; + } + + &:hover, + &:focus { + color: #43d854; + } +} + @include breakpoint(medium) { .button.button-telegram, - .ssb-telegram { + .ssb-telegram, + .ssb-whatsapp_app { display: none !important; } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index d47dda44e..8b833106c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -355,18 +355,6 @@ display: inline; } - .whatsapp::before { - background-color: #43d854; - color: #fff; - display: inline-block; - font-size: rem-calc(30); - height: rem-calc(48); - padding-top: rem-calc(9); - text-align: center; - vertical-align: top; - width: rem-calc(48); - } - .debate-info, .proposal-info, .investment-project-info, diff --git a/app/views/shared/_social_share.html.erb b/app/views/shared/_social_share.html.erb index 27b8f63c2..ed3cf1f82 100644 --- a/app/views/shared/_social_share.html.erb +++ b/app/views/shared/_social_share.html.erb @@ -1,7 +1,5 @@ <% description = local_assigns.fetch(:description, "") %> <% description = truncate(ActionView::Base.full_sanitizer.sanitize(description), length: 140) %> -<% mobile = local_assigns[:mobile] %> -<% mobile_url = mobile.present? ? "#{mobile.gsub(/\s+/, "%20")}%20" : "" %> <% if local_assigns[:share_title].present? %> @@ -13,10 +11,6 @@ image: local_assigns.fetch(:image_url, ""), desc: description, "data-twitter-title": local_assigns[:mobile], - "data-telegram-title": local_assigns[:mobile]) %> - - - <%= t("social.whatsapp") %> - + "data-telegram-title": local_assigns[:mobile], + "data-whatsapp_app-title": local_assigns[:mobile]) %> diff --git a/config/initializers/social_share_button.rb b/config/initializers/social_share_button.rb index 48840aeac..0d76f9dac 100644 --- a/config/initializers/social_share_button.rb +++ b/config/initializers/social_share_button.rb @@ -1,3 +1,3 @@ SocialShareButton.configure do |config| - config.allow_sites = %w[twitter facebook telegram] + config.allow_sites = %w[twitter facebook telegram whatsapp_app] end diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index 3985effb9..6f6672013 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -784,7 +784,6 @@ en: facebook: "%{org} Facebook" twitter: "%{org} Twitter" youtube: "%{org} YouTube" - whatsapp: WhatsApp telegram: "%{org} Telegram" instagram: "%{org} Instagram" stats: diff --git a/config/locales/en/social_share_button.yml b/config/locales/en/social_share_button.yml index dbc62e956..3cddf1c1c 100644 --- a/config/locales/en/social_share_button.yml +++ b/config/locales/en/social_share_button.yml @@ -16,4 +16,5 @@ en: plurk: "Plurk" pinterest: "Pinterest" email: "Email" - telegram: "Telegram" \ No newline at end of file + telegram: "Telegram" + whatsapp_app: "WhatsApp" diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 9b0e15134..d1fff5341 100644 --- a/config/locales/es/general.yml +++ b/config/locales/es/general.yml @@ -784,7 +784,6 @@ es: facebook: "Facebook de %{org}" twitter: "Twitter de %{org}" youtube: "YouTube de %{org}" - whatsapp: WhatsApp telegram: "Telegram de %{org}" instagram: "Instagram de %{org}" stats: diff --git a/config/locales/es/social_share_button.yml b/config/locales/es/social_share_button.yml index 2947efcc6..4749ced24 100644 --- a/config/locales/es/social_share_button.yml +++ b/config/locales/es/social_share_button.yml @@ -17,3 +17,4 @@ es: pinterest: "Pinterest" email: "Correo electrónico" telegram: "Telegram" + whatsapp_app: "WhatsApp" diff --git a/spec/system/debates_spec.rb b/spec/system/debates_spec.rb index 6e052681e..7dd5d4cdb 100644 --- a/spec/system/debates_spec.rb +++ b/spec/system/debates_spec.rb @@ -93,9 +93,43 @@ describe "Debates" do expect(page).to have_content I18n.l(debate.created_at.to_date) expect(page).to have_selector(avatar(debate.author.name)) expect(page.html).to include "#{debate.title}" + end - within(".social-share-button") do - expect(page.all("a").count).to be(3) # Twitter, Facebook, Telegram + describe "Social share buttons", :js do + context "On desktop browsers" do + scenario "Shows links to share on facebook and twitter" do + visit debate_path(create(:debate)) + + within(".social-share-button") do + expect(page.all("a").count).to be(2) + expect(page).to have_link "Share to Facebook" + expect(page).to have_link "Share to Twitter" + end + end + end + + context "On small devices" do + let!(:window_size) { Capybara.current_window.size } + + before do + Capybara.current_window.resize_to(639, 479) + end + + after do + Capybara.current_window.resize_to(*window_size) + end + + scenario "Shows links to share on telegram and whatsapp too" do + visit debate_path(create(:debate)) + + within(".social-share-button") do + expect(page.all("a").count).to be(4) + expect(page).to have_link "Share to Facebook" + expect(page).to have_link "Share to Twitter" + expect(page).to have_link "Share to Telegram" + expect(page).to have_link "Share to WhatsApp" + end + end end end diff --git a/spec/system/proposals_spec.rb b/spec/system/proposals_spec.rb index 31f2d13a5..e6afeab3d 100644 --- a/spec/system/proposals_spec.rb +++ b/spec/system/proposals_spec.rb @@ -138,9 +138,43 @@ describe "Proposals" do expect(page.html).to include "#{proposal.title}" expect(page).not_to have_selector ".js-flag-actions" expect(page).not_to have_selector ".js-follow" + end - within(".social-share-button") do - expect(page.all("a").count).to be(3) # Twitter, Facebook, Telegram + describe "Social share buttons", :js do + context "On desktop browsers" do + scenario "Shows links to share on facebook and twitter" do + visit proposal_path(create(:proposal)) + + within(".social-share-button") do + expect(page.all("a").count).to be(2) + expect(page).to have_link "Share to Facebook" + expect(page).to have_link "Share to Twitter" + end + end + end + + context "On small devices" do + let!(:window_size) { Capybara.current_window.size } + + before do + Capybara.current_window.resize_to(639, 479) + end + + after do + Capybara.current_window.resize_to(*window_size) + end + + scenario "Shows links to share on telegram and whatsapp too" do + visit proposal_path(create(:proposal)) + + within(".social-share-button") do + expect(page.all("a").count).to be(4) + expect(page).to have_link "Share to Facebook" + expect(page).to have_link "Share to Twitter" + expect(page).to have_link "Share to Telegram" + expect(page).to have_link "Share to WhatsApp" + end + end end end