From 7c155c8f2eabe266ce4fdd44e04152d252a1b656 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Fri, 23 Jan 2026 14:57:49 +0000 Subject: [PATCH] Make share buttons use Bootstrap icons --- .../images/share_button_icons/bluesky.svg | 5 -- .../images/share_button_icons/email.svg | 4 - .../images/share_button_icons/facebook.svg | 4 - .../images/share_button_icons/linkedin.svg | 4 - .../images/share_button_icons/mastodon.svg | 5 -- .../images/share_button_icons/share.svg | 3 - .../images/share_button_icons/telegram.svg | 16 ---- app/assets/images/share_button_icons/x.svg | 1 - app/assets/javascripts/share_buttons.js | 5 +- app/assets/stylesheets/common.scss | 6 ++ app/helpers/share_buttons_helper.rb | 78 +++++-------------- test/helpers/share_buttons_helper_test.rb | 17 ++-- 12 files changed, 35 insertions(+), 113 deletions(-) delete mode 100644 app/assets/images/share_button_icons/bluesky.svg delete mode 100644 app/assets/images/share_button_icons/email.svg delete mode 100644 app/assets/images/share_button_icons/facebook.svg delete mode 100644 app/assets/images/share_button_icons/linkedin.svg delete mode 100644 app/assets/images/share_button_icons/mastodon.svg delete mode 100644 app/assets/images/share_button_icons/share.svg delete mode 100644 app/assets/images/share_button_icons/telegram.svg delete mode 100644 app/assets/images/share_button_icons/x.svg diff --git a/app/assets/images/share_button_icons/bluesky.svg b/app/assets/images/share_button_icons/bluesky.svg deleted file mode 100644 index 7e7c880d7..000000000 --- a/app/assets/images/share_button_icons/bluesky.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/app/assets/images/share_button_icons/email.svg b/app/assets/images/share_button_icons/email.svg deleted file mode 100644 index d35d51d60..000000000 --- a/app/assets/images/share_button_icons/email.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/app/assets/images/share_button_icons/facebook.svg b/app/assets/images/share_button_icons/facebook.svg deleted file mode 100644 index 80241473e..000000000 --- a/app/assets/images/share_button_icons/facebook.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/app/assets/images/share_button_icons/linkedin.svg b/app/assets/images/share_button_icons/linkedin.svg deleted file mode 100644 index 908c86751..000000000 --- a/app/assets/images/share_button_icons/linkedin.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/app/assets/images/share_button_icons/mastodon.svg b/app/assets/images/share_button_icons/mastodon.svg deleted file mode 100644 index a8b4bc44e..000000000 --- a/app/assets/images/share_button_icons/mastodon.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/app/assets/images/share_button_icons/share.svg b/app/assets/images/share_button_icons/share.svg deleted file mode 100644 index 0eb1f772d..000000000 --- a/app/assets/images/share_button_icons/share.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/images/share_button_icons/telegram.svg b/app/assets/images/share_button_icons/telegram.svg deleted file mode 100644 index 84c087929..000000000 --- a/app/assets/images/share_button_icons/telegram.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/app/assets/images/share_button_icons/x.svg b/app/assets/images/share_button_icons/x.svg deleted file mode 100644 index 937dcc732..000000000 --- a/app/assets/images/share_button_icons/x.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/app/assets/javascripts/share_buttons.js b/app/assets/javascripts/share_buttons.js index f165215b8..ff495bf9a 100644 --- a/app/assets/javascripts/share_buttons.js +++ b/app/assets/javascripts/share_buttons.js @@ -17,10 +17,7 @@ $(function () { if (navigator.share) { $("[data-share-type='native']").prop("hidden", false).on("click", function () { - navigator.share({ - text: this.dataset.shareText, - url: this.dataset.shareUrl - }); + navigator.share(Object.fromEntries(new URLSearchParams(this.hash.slice(1)))); }); } }); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 32e229e70..e20c8c4cd 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -517,6 +517,12 @@ legend { @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white); } +@each $variant, $color in (bluesky: #1185fe, email: #0971BD, facebook: #3B5998, linkedin: #0077B5, mastodon: #2b90d9, telegram: #54a9eb, x: #000000) { + .btn-#{$variant} { + @include button-variant($color, $color, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white); + } +} + /* Rules for the search and direction forms */ .directions_form { diff --git a/app/helpers/share_buttons_helper.rb b/app/helpers/share_buttons_helper.rb index 1db1ae014..9f05fe3ab 100644 --- a/app/helpers/share_buttons_helper.rb +++ b/app/helpers/share_buttons_helper.rb @@ -1,75 +1,39 @@ # frozen_string_literal: true module ShareButtonsHelper - SHARE_BUTTONS_CONFIG = { - :email => "share_button_icons/email.svg", - :bluesky => "share_button_icons/bluesky.svg", - :facebook => "share_button_icons/facebook.svg", - :linkedin => "share_button_icons/linkedin.svg", - :mastodon => "share_button_icons/mastodon.svg", - :telegram => "share_button_icons/telegram.svg", - :x => "share_button_icons/x.svg" - }.freeze + SHARE_BUTTONS_CONFIG = [ + { :site => "share", :type => "native", :button => "secondary", :icon => "share-fill", :href => "#text={title}&url={url}" }, + { :site => "email", :type => "email", :icon => "envelope-fill", :href => "mailto:?subject={title}&body={url}" }, + { :site => "bluesky", :href => "https://bsky.app/intent/compose?text={title}+{url}" }, + { :site => "facebook", :href => "https://www.facebook.com/sharer/sharer.php?t={title}&u={url}" }, + { :site => "linkedin", :href => "https://www.linkedin.com/sharing/share-offsite/?url={url}" }, + { :site => "mastodon", :href => "https://mastodonshare.com/?text={title}&url={url}" }, + { :site => "telegram", :href => "https://t.me/share/url?text={title}&url={url}" }, + { :site => "x", :icon => "twitter-x", :href => "https://x.com/intent/tweet?text={title}&url={url}" } + ].freeze # Generates a set of share buttons based on the specified options. def share_buttons(title:, url:) tag.div( :class => "d-flex gap-1 align-items-end flex-wrap mb-3" ) do - buttons = [ - tag.button(:type => "button", - :class => "btn btn-secondary p-1 border-1 rounded-circle", - :title => I18n.t("application.share.share.title"), - :hidden => true, - :data => { :share_type => "native", - :share_text => title, - :share_url => url }) do - image_tag("share_button_icons/share.svg", :alt => I18n.t("application.share.share.alt"), :size => 18, :class => "d-block") - end - ] - - buttons << SHARE_BUTTONS_CONFIG.map do |site, icon| + safe_join(SHARE_BUTTONS_CONFIG.map do |share| link_options = { :rel => "nofollow", - :class => "rounded-circle focus-ring", - :title => I18n.t("application.share.#{site}.title"), + :class => "btn btn-#{share[:button] || share[:site]} px-1 py-0 border-2 rounded-circle focus-ring", + :title => I18n.t("application.share.#{share[:site]}.title"), :target => "_blank", - :data => { :share_type => site == :email ? "email" : "site" } + :hidden => share[:type] == "native", + :data => { :share_type => share[:type] || "site" } } + share_url = share[:href] + .gsub("{title}", URI.encode_uri_component(title)) + .gsub("{url}", URI.encode_uri_component(url)) - link_to generate_share_url(site, title, url), link_options do - image_tag(icon, :alt => I18n.t("application.share.#{site}.alt"), :size => 28) + link_to share_url, link_options do + tag.i(:class => "bi bi-#{share[:icon] || share[:site]}", :aria => { :label => I18n.t("application.share.#{share[:site]}.alt") }) end - end - - safe_join(buttons, "\n") - end - end - - private - - def generate_share_url(site, title, url) - site = site.to_sym - title = URI.encode_uri_component(title) - url = URI.encode_uri_component(url) - - case site - when :email - "mailto:?subject=#{title}&body=#{url}" - when :x - "https://x.com/intent/tweet?url=#{url}&text=#{title}" - when :linkedin - "https://www.linkedin.com/sharing/share-offsite/?url=#{url}" - when :facebook - "https://www.facebook.com/sharer/sharer.php?u=#{url}&t=#{title}" - when :mastodon - "https://mastodonshare.com/?text=#{title}&url=#{url}" - when :telegram - "https://t.me/share/url?url=#{url}&text=#{title}" - when :bluesky - "https://bsky.app/intent/compose?text=#{title}+#{url}" - else - raise ArgumentError, "Unsupported platform: #{platform}" + end, "\n") end end end diff --git a/test/helpers/share_buttons_helper_test.rb b/test/helpers/share_buttons_helper_test.rb index ed45459e5..ebf259baf 100644 --- a/test/helpers/share_buttons_helper_test.rb +++ b/test/helpers/share_buttons_helper_test.rb @@ -6,19 +6,16 @@ class ShareButtonsHelperTest < ActionView::TestCase include ShareButtonsHelper def test_share_buttons - buttons = share_buttons(:title => "Test Title", :url => "https://example.com") + buttons = share_buttons(:title => "Diary Entry Title", :url => "https://osm.example.com/some/diary/entry") buttons_dom = Rails::Dom::Testing.html_document_fragment.parse(buttons) - SHARE_BUTTONS_CONFIG.each_value do |icon| - assert_dom buttons_dom, "div:has(a img[src='/images/#{icon}'])", :count => 1 do - assert_dom "a[href*='Test%20Title']" - assert_dom "a[href*='https%3A%2F%2Fexample.com']" + SHARE_BUTTONS_CONFIG.each do |icon| + assert_dom buttons_dom, "div:has(a i.bi.bi-#{icon[:icon] || icon[:site]})", :count => 1 do + assert_dom "a[href*='Diary%20Entry%20Title']" + assert_dom "a[href*='https%3A%2F%2Fosm.example.com%2Fsome%2Fdiary%2Fentry']" end end - end - - def test_generate_share_url_email - url = generate_share_url(:email, "Diary Entry Title", "https://osm.example.com/some/diary/entry") - assert_equal "mailto:?subject=Diary%20Entry%20Title&body=https%3A%2F%2Fosm.example.com%2Fsome%2Fdiary%2Fentry", url + assert_dom buttons_dom, "a[data-share-type='native']" + assert_dom buttons_dom, "a[data-share-type='email'][href='mailto:?subject=Diary%20Entry%20Title&body=https%3A%2F%2Fosm.example.com%2Fsome%2Fdiary%2Fentry']" end end -- 2.39.5