Use picture elements to render some more graphics as SVG
authorTom Hughes <tom@compton.nu>
Sun, 13 Sep 2015 20:58:34 +0000 (21:58 +0100)
committerTom Hughes <tom@compton.nu>
Sun, 13 Sep 2015 21:42:12 +0000 (22:42 +0100)
.rubocop_todo.yml
app/helpers/user_roles_helper.rb
app/views/layouts/_flash.html.erb
test/helpers/user_roles_helper_test.rb

index 71d949d..03c2e3d 100644 (file)
@@ -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.
index 690cccd..2d3d49d 100644 (file)
@@ -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
 
index e721851..2ba8ee9 100644 (file)
@@ -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 %>
index 8216a5b..ad9a6ed 100644 (file)
@@ -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