Use inline svgs for user role icons

diff --git a/app/helpers/user_roles_helper.rb b/app/helpers/user_roles_helper.rb
index b870d0273427a2bba3abc63f1b24e4756e6c9b60..1308cdfa757fdcb8d7b5448fde6c18fd582aefdf 100644 (file)
--- a/app/helpers/user_roles_helper.rb
+++ b/app/helpers/user_roles_helper.rb
@@ -6,29 +6,34 @@ module UserRolesHelper
   def role_icon(user, role)
     if current_user&.administrator?
       if user.role?(role)
-        image = "roles/#{role}"
-        alt = t("users.show.role.revoke.#{role}")
-        title = t("users.show.role.revoke.#{role}")
-        url = revoke_role_path(:display_name => user.display_name, :role => role)
-        confirm = t("user_role.revoke.are_you_sure", :name => user.display_name, :role => role)
+        link_to role_icon_svg_tag(role, false, t("users.show.role.revoke.#{role}")),
+                revoke_role_path(user, role),
+                :method => :post,
+                :data => { :confirm => t("user_role.revoke.are_you_sure", :name => user.display_name, :role => role) }
       else
-        image = "roles/blank_#{role}"
-        alt = t("users.show.role.grant.#{role}")
-        title = t("users.show.role.grant.#{role}")
-        url = grant_role_path(:display_name => user.display_name, :role => role)
-        confirm = t("user_role.grant.are_you_sure", :name => user.display_name, :role => role)
+        link_to role_icon_svg_tag(role, true, t("users.show.role.grant.#{role}")),
+                grant_role_path(user, role),
+                :method => :post,
+                :data => { :confirm => t("user_role.grant.are_you_sure", :name => user.display_name, :role => role) }
       end
     elsif user.role?(role)
-      image = "roles/#{role}"
-      alt = t("users.show.role.#{role}")
-      title = t("users.show.role.#{role}")
+      role_icon_svg_tag(role, false, t("users.show.role.#{role}"))
     end
+  end
 
-    if image
-      icon = image_tag("#{image}.png", :srcset => image_path("#{image}.svg"), :size => "20x20", :border => 0, :alt => alt, :title => title)
-      icon = link_to(icon, url, :method => :post, :data => { :confirm => confirm }) if url
-    end
+  def role_icon_svg_tag(role, blank, title)
+    role_colors = {
+      "administrator" => "#f69e42",
+      "moderator" => "#0606ff",
+      "importer" => "#38e13a"
+    }
+    color = role_colors[role] || "currentColor"
 
-    icon
+    path_data = "M 10,2 8.125,8 2,8 6.96875,11.71875 5,18 10,14 15,18 13.03125,11.71875 18,8 11.875,8 10,2 z"
+    tag.svg(:width => 20, :height => 20) do
+      concat tag.title(title)
+      concat tag.path(:d => path_data, :fill => color, :stroke => color, "stroke-width" => 2, "stroke-linejoin" => "round")
+      concat tag.path(:d => path_data, :fill => "#fff") if blank
+    end
   end
 end

diff --git a/test/helpers/user_roles_helper_test.rb b/test/helpers/user_roles_helper_test.rb
index ba51dd14f4b60a3181fafc6078e3d63da29387dc..41366199c4f828479e25de389bc2d9cc2473fe3a 100644 (file)
--- a/test/helpers/user_roles_helper_test.rb
+++ b/test/helpers/user_roles_helper_test.rb
@@ -13,74 +13,74 @@ class UserRolesHelperTest < ActionView::TestCase
     assert_dom_equal "", icon
 
     icon = role_icon(create(:moderator_user), "moderator")
-    expected = <<~HTML.delete("\n")
-      <img srcset="/images/roles/moderator.svg" border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" />
-    HTML
-    assert_dom_equal expected, icon
+    icon_dom = Rails::Dom::Testing.html_document_fragment.parse(icon)
+    assert_dom icon_dom, "svg:root", :count => 1 do
+      assert_dom "> title", :text => "This user is a moderator"
+    end
 
     icon = role_icon(create(:importer_user), "importer")
-    expected = <<~HTML.delete("\n")
-      <img srcset="/images/roles/importer.svg" border="0" alt="This user is a importer" title="This user is a importer" src="/images/roles/importer.png" width="20" height="20" />
-    HTML
-    assert_dom_equal expected, icon
+    icon_dom = Rails::Dom::Testing.html_document_fragment.parse(icon)
+    assert_dom icon_dom, "svg:root", :count => 1 do
+      assert_dom "> title", :text => "This user is a importer"
+    end
   end
 
   def test_role_icon_administrator
     self.current_user = create(:administrator_user)
 
-    user = create(:user)
-
-    icon = role_icon(user, "moderator")
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to grant the role `moderator&#39; to the user `#{user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(user.display_name)}/role/moderator/grant">
-      <img srcset="/images/roles/blank_moderator.svg" border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icon
-
-    icon = role_icon(user, "importer")
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to grant the role `importer&#39; to the user `#{user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(user.display_name)}/role/importer/grant">
-      <img srcset="/images/roles/blank_importer.svg" border="0" alt="Grant importer access" title="Grant importer access" src="/images/roles/blank_importer.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icon
-
-    moderator_user = create(:moderator_user)
-
-    icon = role_icon(moderator_user, "moderator")
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to revoke the role `moderator&#39; from the user `#{moderator_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(moderator_user.display_name)}/role/moderator/revoke">
-      <img srcset="/images/roles/moderator.svg" border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icon
-
-    icon = role_icon(user, "importer")
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to grant the role `importer&#39; to the user `#{user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(user.display_name)}/role/importer/grant">
-      <img srcset="/images/roles/blank_importer.svg" border="0" alt="Grant importer access" title="Grant importer access" src="/images/roles/blank_importer.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icon
-
-    importer_user = create(:importer_user)
-
-    icon = role_icon(user, "moderator")
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to grant the role `moderator&#39; to the user `#{user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(user.display_name)}/role/moderator/grant">
-      <img srcset="/images/roles/blank_moderator.svg" border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icon
-
-    icon = role_icon(importer_user, "importer")
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to revoke the role `importer&#39; from the user `#{importer_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(importer_user.display_name)}/role/importer/revoke">
-      <img srcset="/images/roles/importer.svg" border="0" alt="Revoke importer access" title="Revoke importer access" src="/images/roles/importer.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icon
+    create(:user) do |user|
+      icon = role_icon(user, "moderator")
+      icon_dom = Rails::Dom::Testing.html_document_fragment.parse(icon)
+      assert_dom icon_dom, "a:root[href='#{grant_role_path(user, 'moderator')}']", :count => 1 do
+        assert_dom "> svg", :count => 1 do
+          assert_dom "> title", :text => "Grant moderator access"
+        end
+      end
+
+      icon = role_icon(user, "importer")
+      icon_dom = Rails::Dom::Testing.html_document_fragment.parse(icon)
+      assert_dom icon_dom, "a:root[href='#{grant_role_path(user, 'importer')}']", :count => 1 do
+        assert_dom "> svg", :count => 1 do
+          assert_dom "> title", :text => "Grant importer access"
+        end
+      end
+    end
+
+    create(:moderator_user) do |user|
+      icon = role_icon(user, "moderator")
+      icon_dom = Rails::Dom::Testing.html_document_fragment.parse(icon)
+      assert_dom icon_dom, "a:root[href='#{revoke_role_path(user, 'moderator')}']", :count => 1 do
+        assert_dom "> svg", :count => 1 do
+          assert_dom "> title", :text => "Revoke moderator access"
+        end
+      end
+
+      icon = role_icon(user, "importer")
+      icon_dom = Rails::Dom::Testing.html_document_fragment.parse(icon)
+      assert_dom icon_dom, "a:root[href='#{grant_role_path(user, 'importer')}']", :count => 1 do
+        assert_dom "> svg", :count => 1 do
+          assert_dom "> title", :text => "Grant importer access"
+        end
+      end
+    end
+
+    create(:importer_user) do |user|
+      icon = role_icon(user, "moderator")
+      icon_dom = Rails::Dom::Testing.html_document_fragment.parse(icon)
+      assert_dom icon_dom, "a:root[href='#{grant_role_path(user, 'moderator')}']", :count => 1 do
+        assert_dom "> svg", :count => 1 do
+          assert_dom "> title", :text => "Grant moderator access"
+        end
+      end
+
+      icon = role_icon(user, "importer")
+      icon_dom = Rails::Dom::Testing.html_document_fragment.parse(icon)
+      assert_dom icon_dom, "a:root[href='#{revoke_role_path(user, 'importer')}']", :count => 1 do
+        assert_dom "> svg", :count => 1 do
+          assert_dom "> title", :text => "Revoke importer access"
+        end
+      end
+    end
   end
 
   def test_role_icons_normal
@@ -90,87 +90,83 @@ class UserRolesHelperTest < ActionView::TestCase
     assert_dom_equal "", icons
 
     icons = role_icons(create(:moderator_user))
-    expected = <<~HTML.delete("\n")
-      <img srcset="/images/roles/moderator.svg" border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" />
-    HTML
-    assert_dom_equal expected, icons
+    icons_dom = Rails::Dom::Testing.html_document_fragment.parse(icons)
+    assert_dom icons_dom, "svg:root > title", :text => "This user is a moderator"
 
     icons = role_icons(create(:importer_user))
-    expected = <<~HTML.delete("\n")
-      <img srcset="/images/roles/importer.svg" border="0" alt="This user is a importer" title="This user is a importer" src="/images/roles/importer.png" width="20" height="20" />
-    HTML
-    assert_dom_equal expected, icons
+    icons_dom = Rails::Dom::Testing.html_document_fragment.parse(icons)
+    assert_dom icons_dom, "svg:root > title", :text => "This user is a importer"
 
     icons = role_icons(create(:super_user))
-    expected = <<~HTML.delete("\n")
-      <img srcset="/images/roles/administrator.svg" border="0" alt="This user is an administrator" title="This user is an administrator" src="/images/roles/administrator.png" width="20" height="20" />
-      <img srcset="/images/roles/moderator.svg" border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" />
-      <img srcset="/images/roles/importer.svg" border="0" alt="This user is a importer" title="This user is a importer" src="/images/roles/importer.png" width="20" height="20" />
-    HTML
-    assert_dom_equal expected, icons
+    icons_dom = Rails::Dom::Testing.html_document_fragment.parse(icons)
+    assert_dom icons_dom, "svg:root", :count => 3 do
+      assert_dom "> title", :text => "This user is an administrator"
+      assert_dom "> title", :text => "This user is a moderator"
+      assert_dom "> title", :text => "This user is a importer"
+    end
   end
 
   def test_role_icons_administrator
     self.current_user = create(:administrator_user)
 
-    user = create(:user)
-    icons = role_icons(user)
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to grant the role `administrator&#39; to the user `#{user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(user.display_name)}/role/administrator/grant">
-      <img srcset="/images/roles/blank_administrator.svg" border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" />
-      </a>
-      <a data-confirm="Are you sure you want to grant the role `moderator&#39; to the user `#{user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(user.display_name)}/role/moderator/grant">
-      <img srcset="/images/roles/blank_moderator.svg" border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" />
-      </a>
-      <a data-confirm="Are you sure you want to grant the role `importer&#39; to the user `#{user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(user.display_name)}/role/importer/grant">
-      <img srcset="/images/roles/blank_importer.svg" border="0" alt="Grant importer access" title="Grant importer access" src="/images/roles/blank_importer.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icons
-
-    moderator_user = create(:moderator_user)
-    icons = role_icons(moderator_user)
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to grant the role `administrator&#39; to the user `#{moderator_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(moderator_user.display_name)}/role/administrator/grant">
-      <img srcset="/images/roles/blank_administrator.svg" border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" />
-      </a>
-      <a data-confirm="Are you sure you want to revoke the role `moderator&#39; from the user `#{moderator_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(moderator_user.display_name)}/role/moderator/revoke">
-      <img srcset="/images/roles/moderator.svg" border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" />
-      </a>
-      <a data-confirm="Are you sure you want to grant the role `importer&#39; to the user `#{moderator_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(moderator_user.display_name)}/role/importer/grant">
-      <img srcset="/images/roles/blank_importer.svg" border="0" alt="Grant importer access" title="Grant importer access" src="/images/roles/blank_importer.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icons
-
-    importer_user = create(:importer_user)
-    icons = role_icons(importer_user)
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to grant the role `administrator&#39; to the user `#{importer_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(importer_user.display_name)}/role/administrator/grant">
-      <img srcset="/images/roles/blank_administrator.svg" border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" />
-      </a>
-      <a data-confirm="Are you sure you want to grant the role `moderator&#39; to the user `#{importer_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(importer_user.display_name)}/role/moderator/grant">
-      <img srcset="/images/roles/blank_moderator.svg" border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" />
-      </a>
-      <a data-confirm="Are you sure you want to revoke the role `importer&#39; from the user `#{importer_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(importer_user.display_name)}/role/importer/revoke">
-      <img srcset="/images/roles/importer.svg" border="0" alt="Revoke importer access" title="Revoke importer access" src="/images/roles/importer.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icons
-
-    super_user = create(:super_user)
-    icons = role_icons(super_user)
-    expected = <<~HTML.delete("\n")
-      <a data-confirm="Are you sure you want to revoke the role `administrator&#39; from the user `#{super_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(super_user.display_name)}/role/administrator/revoke">
-      <img srcset="/images/roles/administrator.svg" border="0" alt="Revoke administrator access" title="Revoke administrator access" src="/images/roles/administrator.png" width="20" height="20" />
-      </a>
-      <a data-confirm="Are you sure you want to revoke the role `moderator&#39; from the user `#{super_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(super_user.display_name)}/role/moderator/revoke">
-      <img srcset="/images/roles/moderator.svg" border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" />
-      </a>
-      <a data-confirm="Are you sure you want to revoke the role `importer&#39; from the user `#{super_user.display_name}&#39;?" rel="nofollow" data-method="post" href="/user/#{ERB::Util.u(super_user.display_name)}/role/importer/revoke">
-      <img srcset="/images/roles/importer.svg" border="0" alt="Revoke importer access" title="Revoke importer access" src="/images/roles/importer.png" width="20" height="20" />
-      </a>
-    HTML
-    assert_dom_equal expected, icons
+    create(:user) do |user|
+      icons = role_icons(user)
+      icons_dom = Rails::Dom::Testing.html_document_fragment.parse(icons)
+      assert_dom icons_dom, "a:root", :count => 3
+      assert_dom icons_dom, "a:root[href='#{grant_role_path(user, 'administrator')}']" do
+        assert_dom "> svg > title", :text => "Grant administrator access"
+      end
+      assert_dom icons_dom, "a:root[href='#{grant_role_path(user, 'moderator')}']" do
+        assert_dom "> svg > title", :text => "Grant moderator access"
+      end
+      assert_dom icons_dom, "a:root[href='#{grant_role_path(user, 'importer')}']" do
+        assert_dom "> svg > title", :text => "Grant importer access"
+      end
+    end
+
+    create(:moderator_user) do |user|
+      icons = role_icons(user)
+      icons_dom = Rails::Dom::Testing.html_document_fragment.parse(icons)
+      assert_dom icons_dom, "a:root", :count => 3
+      assert_dom icons_dom, "a:root[href='#{grant_role_path(user, 'administrator')}']" do
+        assert_dom "> svg > title", :text => "Grant administrator access"
+      end
+      assert_dom icons_dom, "a:root[href='#{revoke_role_path(user, 'moderator')}']" do
+        assert_dom "> svg > title", :text => "Revoke moderator access"
+      end
+      assert_dom icons_dom, "a:root[href='#{grant_role_path(user, 'importer')}']" do
+        assert_dom "> svg > title", :text => "Grant importer access"
+      end
+    end
+
+    create(:importer_user) do |user|
+      icons = role_icons(user)
+      icons_dom = Rails::Dom::Testing.html_document_fragment.parse(icons)
+      assert_dom icons_dom, "a:root", :count => 3
+      assert_dom icons_dom, "a:root[href='#{grant_role_path(user, 'administrator')}']" do
+        assert_dom "> svg > title", :text => "Grant administrator access"
+      end
+      assert_dom icons_dom, "a:root[href='#{grant_role_path(user, 'moderator')}']" do
+        assert_dom "> svg > title", :text => "Grant moderator access"
+      end
+      assert_dom icons_dom, "a:root[href='#{revoke_role_path(user, 'importer')}']" do
+        assert_dom "> svg > title", :text => "Revoke importer access"
+      end
+    end
+
+    create(:super_user) do |user|
+      icons = role_icons(user)
+      icons_dom = Rails::Dom::Testing.html_document_fragment.parse(icons)
+      assert_dom icons_dom, "a:root", :count => 3
+      assert_dom icons_dom, "a:root[href='#{revoke_role_path(user, 'administrator')}']" do
+        assert_dom "> svg > title", :text => "Revoke administrator access"
+      end
+      assert_dom icons_dom, "a:root[href='#{revoke_role_path(user, 'moderator')}']" do
+        assert_dom "> svg > title", :text => "Revoke moderator access"
+      end
+      assert_dom icons_dom, "a:root[href='#{revoke_role_path(user, 'importer')}']" do
+        assert_dom "> svg > title", :text => "Revoke importer access"
+      end
+    end
   end
 end