cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use inline svgs for user role icons

Browse source
This commit is contained in:
Anton Khorev 2024-05-07 13:30:48 +03:00
parent 31d879d403
commit d9e650fde1
2 changed files with 145 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

41
app/helpers/user_roles_helper.rb
View file

@ -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

238
test/helpers/user_roles_helper_test.rb
View file

@ -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)
create(:user) do |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_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")
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
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
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
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")
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_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")
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_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(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
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)
create(:user) do |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
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
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
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
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
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
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(: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