Use picture elements to render some more graphics as SVG

diff --git a/.rubocop_todo.yml b/.rubocop_todo.yml
index 71d949daee69c30e6f4217e86e4e267374ca4fa8..03c2e3d6f722a777cab7cfff288c4d336525c85e 100644 (file)
--- a/.rubocop_todo.yml
+++ b/.rubocop_todo.yml
@@ -75,7 +75,7 @@ Metrics/CyclomaticComplexity:
 # Offense count: 2535
 # Configuration parameters: AllowURI, URISchemes.
 Metrics/LineLength:
-  Max: 694
+  Max: 878
 
 # Offense count: 628
 # Configuration parameters: CountComments.

diff --git a/app/helpers/user_roles_helper.rb b/app/helpers/user_roles_helper.rb
index 690cccdca2ad7e15a46ba5f9c2f45791187a5eb4..2d3d49d779790de13f3ce6ff82b4548063e21094 100644 (file)
--- a/app/helpers/user_roles_helper.rb
+++ b/app/helpers/user_roles_helper.rb
@@ -6,26 +6,28 @@ module UserRolesHelper
   def role_icon(user, role)
     if @user && @user.administrator?
       if user.has_role?(role)
-        image = "roles/#{role}.png"
+        image = "roles/#{role}"
         alt = t("user.view.role.revoke.#{role}")
         title = t("user.view.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)
       else
-        image = "roles/blank_#{role}.png"
+        image = "roles/blank_#{role}"
         alt = t("user.view.role.grant.#{role}")
         title = t("user.view.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)
       end
     elsif user.has_role?(role)
-      image = "roles/#{role}.png"
+      image = "roles/#{role}"
       alt = t("user.view.role.#{role}")
       title = t("user.view.role.#{role}")
     end
 
     if image
-      icon = image_tag(image, :size => "20x20", :border => 0, :alt => alt, :title => title)
+      svg_icon = tag("source", :srcset => image_path("#{image}.svg"), :type => "image/svg+xml")
+      png_icon = image_tag("#{image}.png", :size => "20x20", :border => 0, :alt => alt, :title => title)
+      icon = content_tag("picture", svg_icon + png_icon)
       icon = link_to(icon, url, :method => :post, :confirm => confirm) if url
     end
 

diff --git a/app/views/layouts/_flash.html.erb b/app/views/layouts/_flash.html.erb
index e721851018af7a3a504bb4913e643877499ee3a0..2ba8ee95dae1bda9cadfd6ffb9592460a5bccab8 100644 (file)
--- a/app/views/layouts/_flash.html.erb
+++ b/app/views/layouts/_flash.html.erb
@@ -1,20 +1,29 @@
 <% if flash[:error] %>
   <div class="flash error">
-    <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+    <picture>
+      <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml">
+      <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+    </picture>
     <div class="message"><%= flash[:error] %></div>
   </div>
 <% end %>
 
 <% if flash[:warning] %>
   <div class="flash warning">
-    <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+    <picture>
+      <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml">
+      <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+    </picture>
     <div class="message"><%= flash[:warning] %></div>
   </div>
 <% end %>
 
 <% if flash[:notice] %>
   <div class="flash notice">
-    <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+    <picture>
+      <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml">
+      <%= image_tag("notice.png", :class => "small_icon", :border => 0) %>
+    </picture>
     <div class="message"><%= flash[:notice] %></div>
   </div>
 <% end %>

diff --git a/test/helpers/user_roles_helper_test.rb b/test/helpers/user_roles_helper_test.rb
index 8216a5b56458f01debb99eb1bd4873000d749096..ad9a6ed63504d78c7a1460d2bee6622be4738632 100644 (file)
--- a/test/helpers/user_roles_helper_test.rb
+++ b/test/helpers/user_roles_helper_test.rb
@@ -10,17 +10,17 @@ class UserRolesHelperTest < ActionView::TestCase
     assert_dom_equal "", icon
 
     icon = role_icon(users(:moderator_user), "moderator")
-    assert_dom_equal '<img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" />', icon
+    assert_dom_equal '<picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icon
   end
 
   def test_role_icon_administrator
     @user = users(:administrator_user)
 
     icon = role_icon(users(:normal_user), "moderator")
-    assert_dom_equal '<a confirm="Are you sure you want to grant the role `moderator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/moderator/grant"><img border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" /></a>', icon
+    assert_dom_equal '<a confirm="Are you sure you want to grant the role `moderator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/moderator/grant"><picture><source srcset="/images/roles/blank_moderator.svg" type="image/svg+xml" /><img border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" /></picture></a>', icon
 
     icon = role_icon(users(:moderator_user), "moderator")
-    assert_dom_equal '<a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/moderator/revoke"><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></a>', icon
+    assert_dom_equal '<a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icon
   end
 
   def test_role_icons_normal
@@ -30,22 +30,22 @@ class UserRolesHelperTest < ActionView::TestCase
     assert_dom_equal "  ", icons
 
     icons = role_icons(users(:moderator_user))
-    assert_dom_equal '  <img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" />', icons
+    assert_dom_equal '  <picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icons
 
     icons = role_icons(users(:super_user))
-    assert_dom_equal ' <img border="0" alt="This user is an administrator" title="This user is an administrator" src="/images/roles/administrator.png" width="20" height="20" /> <img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" />', icons
+    assert_dom_equal ' <picture><source srcset="/images/roles/administrator.svg" type="image/svg+xml" /><img border="0" alt="This user is an administrator" title="This user is an administrator" src="/images/roles/administrator.png" width="20" height="20" /></picture> <picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="This user is a moderator" title="This user is a moderator" src="/images/roles/moderator.png" width="20" height="20" /></picture>', icons
   end
 
   def test_role_icons_administrator
     @user = users(:administrator_user)
 
     icons = role_icons(users(:normal_user))
-    assert_dom_equal ' <a confirm="Are you sure you want to grant the role `administrator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/administrator/grant"><img border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" /></a> <a confirm="Are you sure you want to grant the role `moderator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/moderator/grant"><img border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" /></a>', icons
+    assert_dom_equal ' <a confirm="Are you sure you want to grant the role `administrator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/administrator/grant"><picture><source srcset="/images/roles/blank_administrator.svg" type="image/svg+xml" /><img border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to grant the role `moderator&#39; to the user `test&#39;?" rel="nofollow" data-method="post" href="/user/test/role/moderator/grant"><picture><source srcset="/images/roles/blank_moderator.svg" type="image/svg+xml" /><img border="0" alt="Grant moderator access" title="Grant moderator access" src="/images/roles/blank_moderator.png" width="20" height="20" /></picture></a>', icons
 
     icons = role_icons(users(:moderator_user))
-    assert_dom_equal ' <a confirm="Are you sure you want to grant the role `administrator&#39; to the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/administrator/grant"><img border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" /></a> <a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/moderator/revoke"><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></a>', icons
+    assert_dom_equal ' <a confirm="Are you sure you want to grant the role `administrator&#39; to the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/administrator/grant"><picture><source srcset="/images/roles/blank_administrator.svg" type="image/svg+xml" /><img border="0" alt="Grant administrator access" title="Grant administrator access" src="/images/roles/blank_administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `moderator&#39;?" rel="nofollow" data-method="post" href="/user/moderator/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icons
 
     icons = role_icons(users(:super_user))
-    assert_dom_equal ' <a confirm="Are you sure you want to revoke the role `administrator&#39; from the user `super&#39;?" rel="nofollow" data-method="post" href="/user/super/role/administrator/revoke"><img border="0" alt="Revoke administrator access" title="Revoke administrator access" src="/images/roles/administrator.png" width="20" height="20" /></a> <a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `super&#39;?" rel="nofollow" data-method="post" href="/user/super/role/moderator/revoke"><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></a>', icons
+    assert_dom_equal ' <a confirm="Are you sure you want to revoke the role `administrator&#39; from the user `super&#39;?" rel="nofollow" data-method="post" href="/user/super/role/administrator/revoke"><picture><source srcset="/images/roles/administrator.svg" type="image/svg+xml" /><img border="0" alt="Revoke administrator access" title="Revoke administrator access" src="/images/roles/administrator.png" width="20" height="20" /></picture></a> <a confirm="Are you sure you want to revoke the role `moderator&#39; from the user `super&#39;?" rel="nofollow" data-method="post" href="/user/super/role/moderator/revoke"><picture><source srcset="/images/roles/moderator.svg" type="image/svg+xml" /><img border="0" alt="Revoke moderator access" title="Revoke moderator access" src="/images/roles/moderator.png" width="20" height="20" /></picture></a>', icons
   end
 end