Patch from bug #2787 to add icons to data browser pages

app/helpers/browse_helper.rb

@@ -2,7 +2,7 @@ module BrowseHelper
   def link_to_page(page, page_param)
     return link_to(page, page_param => page)
   end
-  
+
   def printable_name(object, version=false)
     name = t 'printable_name.with_id', :id => object.id.to_s
     if version
@@ -16,6 +16,16 @@ module BrowseHelper
     return name
   end
 
+  def css_class(type, object)
+    css = type + " " + h(object.tags.find_all { |k,v| k == "aeroway" || k == "amenity" || k == "barrier" || k == "building" || k == "highway" || k == "landuse" || k == "leisure" || k == "man_made" || k == "natural" || k == "railway" || k == "shop" || k == "tourism" || k == "waterway" }.join(' '))
+    return css
+  end
+
+  def link_title(object)
+    title = h(object.tags.map { |k,v| k + '=' + v }.to_sentence)
+    return title
+  end
+
   def format_key(key)
     if url = wiki_link("key", key)
       link_to h(key), url, :title => t('browse.tag_details.wiki_link.key', :key => key)

app/views/browse/_changeset_details.html.erb

@@ -53,7 +53,7 @@
       <td>
         <table cellpadding="0">
           <% @nodes.each do |node| %>
-            <tr><td><%= link_to h(printable_name(node, true)), :action => "node", :id => node.id.to_s %></td></tr>
+            <tr><td><%= link_to h(printable_name(node, true)), { :action => "node", :id => node.id.to_s }, :class => css_class('node', node), :title => link_title(node) %></td></tr>
           <% end %>
         </table>
       </td>
@@ -67,7 +67,7 @@
       <td>
         <table cellpadding="0">
           <% @ways.each do |way| %>
-          <tr><td><%= link_to h(printable_name(way, true)), :action => "way", :id => way.id.to_s %></td></tr>
+          <tr><td><%= link_to h(printable_name(way, true)), { :action => "way", :id => way.id.to_s }, :class => css_class('way', way), :title => link_title(way) %></td></tr>
           <% end %>
           <%=
           #render :partial => "containing_relation", :collection => changeset_details.containing_relation_members 
@@ -84,7 +84,7 @@
       <td>
         <table cellpadding="0">
           <% @relations.each do |relation| %>
-          <tr><td><%= link_to h(printable_name(relation, true)), :action => "relation", :id => relation.id.to_s %></td></tr>
+          <tr><td><%= link_to h(printable_name(relation, true)), { :action => "relation", :id => relation.id.to_s }, :class => "relation " %></td></tr>
           <% end %>
         </table>
       </td>

app/views/browse/_node_details.html.erb

@@ -13,7 +13,7 @@
       <td>
         <table cellpadding="0">
           <% node_details.ways.each do |way| %>
-            <tr><td><%= link_to h(printable_name(way)), :action => "way", :id => way.id.to_s %></td></tr>
+            <tr><td><%= link_to h(printable_name(way)), { :action => "way", :id => way.id.to_s }, :class => css_class('way', way), :title => link_title(way) %></td></tr>
           <% end %>
           <%= render :partial => "containing_relation", :collection => node_details.containing_relation_members %>
         </table>

app/views/browse/_relation_member.html.erb

@@ -1,12 +1,17 @@
 <tr>
-  <td><%=
-    linked_name = link_to h(printable_name(relation_member.member)), :action => relation_member.member_type.downcase, :id => relation_member.member_id.to_s
-    type_str = t'browse.relation_member.type.' + relation_member.member_type.downcase
-
+  <td><%
+    linked_name = link_to h(printable_name(relation_member.member)), { :action => relation_member.member_type.downcase, :id => relation_member.member_id.to_s }, :title => link_title(relation_member.member)
+    type_str = t'browse.relation_member.type.' + relation_member.member_type.downcase 
+    %>
+    <span class="<%=
+     css_class(relation_member.member_type.downcase, relation_member.member)
+      %>">
+      <%=
     if relation_member.member_role.blank?
       t'browse.relation_member.entry', :type => type_str, :name => linked_name
     else
       t'browse.relation_member.entry_role', :type => type_str, :name => linked_name, :role => h(relation_member.member_role)
     end
-  %></td>
+  %>
+  </span></td>
 </tr> 

app/views/browse/_way_details.html.erb

@@ -8,10 +8,10 @@
       <table cellpadding="0">
         <% way_details.way_nodes.each do |wn| %>
           <tr><td>
-            <%= link_to h(printable_name(wn.node)), :action => "node", :id => wn.node_id.to_s %>
+            <%= link_to h(printable_name(wn.node)), { :action => "node", :id => wn.node_id.to_s }, :class => css_class('node', wn.node), :title => link_title(wn.node) %>
             <% related_ways = wn.node.ways.reject { |w| w.id == way_details.id } %>
 	    <% if related_ways.size > 0 then %>
-              (<%= t 'browse.way_details.also_part_of', :count => related_ways.size, :related_ways => related_ways.map { |w| link_to(h(printable_name(w)), :action => "way", :id => w.id.to_s) }.to_sentence %>)
+              (<%= t 'browse.way_details.also_part_of', :count => related_ways.size, :related_ways => related_ways.map { |w| link_to(h(printable_name(w)), { :action => "way", :id => w.id.to_s }, :class => css_class('way', w), :title => link_title(w) ) }.to_sentence %>)
             <% end %>
 	  </td></tr>
         <% end %>

app/views/layouts/site.html.erb

@@ -7,6 +7,7 @@
     <%= javascript_include_tag 'site' %>
     <!--[if lt IE 7]><%= javascript_include_tag 'pngfix' %><![endif]--> <!-- thanks, microsoft! -->
     <%= stylesheet_link_tag 'common' %>
+    <%= stylesheet_link_tag 'browser-icons' %>
     <!--[if IE]><%= stylesheet_link_tag 'large', :media => "screen" %><![endif]--> <!-- IE is totally broken with CSS media queries -->
     <%= stylesheet_link_tag 'small', :media => "only screen and (max-width: 481px)" %>
     <%= stylesheet_link_tag 'large', :media => "screen and (min-width: 482px)" %> 

public/stylesheets/browser-icons.css

@@ -0,0 +1,107 @@
+.node { padding-left: 25px; }
+.way { padding-left: 25px; }
+
+/* Nodes */
+.aeroway.aerodrome { background: url(/images/browser-icons/aerodrome.p.16.png) no-repeat center left; }
+
+.amenity.atm { background: url(/images/browser-icons/atm2.p.16.png) no-repeat center left; }
+.amenity.bank { background: url(/images/browser-icons/bank2.p.16.png) no-repeat center left; }
+.amenity.bar { background: url(/images/browser-icons/bar.p.16.png) no-repeat center left; }
+.amenity.bicycle_rental { background: url(/images/browser-icons/rental_bicycle.p.20.png) no-repeat center left; }
+.amenity.bus_station { background: url(/images/browser-icons/bus_station.n.16.png) no-repeat center left; }
+.amenity.cafe { background: url(/images/browser-icons/cafe.p.16.png) no-repeat center left; }
+.amenity.car_sharing { background: url(/images/browser-icons/car_share.p.16.png) no-repeat center left; }
+.amenity.cinema { background: url(/images/browser-icons/cinema.p.16.png) no-repeat center left; }
+.amenity.drinking_water { background: url(/images/browser-icons/drinkingtap.p.16.png) no-repeat center left; }
+.amenity.fast_food { background: url(/images/browser-icons/fast_food.p.16.png) no-repeat center left; }
+.amenity.fire_station { background: url(/images/browser-icons/firestation.p.16.png) no-repeat center left; }
+.amenity.fuel { background: url(/images/browser-icons/fuel.p.16.png) no-repeat center left; }
+.amenity.hospital { background: url(/images/browser-icons/hospital.p.16.png) no-repeat center left; }
+.amenity.library { background: url(/images/browser-icons/library.p.16.png) no-repeat center left; }
+.amenity.parking { background: url(/images/browser-icons/parking.p.16.png) no-repeat center left; }
+.amenity.pharmacy { background: url(/images/browser-icons/pharmacy.p.16.png) no-repeat center left; }
+.amenity.place_of_worship { background: url(/images/browser-icons/place_of_worship.png) no-repeat center left; }
+.amenity.police { background: url(/images/browser-icons/police.p.16.png) no-repeat center left; }
+.amenity.post_box { background: url(/images/browser-icons/post_box.p.16.png) no-repeat center left; }
+.amenity.post_office { background: url(/images/browser-icons/post_office.p.16.png) no-repeat center left; }
+.amenity.prison { background: url(/images/browser-icons/prison.p.16.png) no-repeat center left; }
+.amenity.pub { background: url(/images/browser-icons/pub.p.16.png) no-repeat center left; }
+.amenity.restaurant { background: url(/images/browser-icons/restaurant.p.16.png) no-repeat center left; }
+.amenity.recycling { background: url(/images/browser-icons/recycling.p.16.png) no-repeat center left; }
+.amenity.shelter { background: url(/images/browser-icons/shelter2.p.16.png) no-repeat center left; }
+.amenity.telephone { background: url(/images/browser-icons/telephone.p.16.png) no-repeat center left; }
+.amenity.theatre { background: url(/images/browser-icons/theatre.p.16.png) no-repeat center left; }
+.amenity.toilets { background: url(/images/browser-icons/toilets.p.16.png) no-repeat center left; }
+
+.barrier.gate { background: url(/images/browser-icons/gate2.p.16.png) no-repeat center left; }
+
+.highway.bus_stop { background: url(/images/browser-icons/bus_stop.p.16.png) no-repeat center left; }
+.highway.mini_roundabout { background: url(/images/browser-icons/mini_round.p.16.png) no-repeat center left; }
+.highway.traffic_signals { background: url(/images/browser-icons/traffic_light.png) no-repeat center left; }
+.highway.turning_circle { background: url(/images/browser-icons/turning_circle.p.16.png) no-repeat center left; }
+
+.man_made.lighthouse { background: url(/images/browser-icons/lighthouse.p.16.png) no-repeat center left; }
+
+.natural.tree { background: url(/images/browser-icons/tree.p.16.png) no-repeat center left; }
+
+.railway.halt { background: url(/images/browser-icons/halt.p.16.png) no-repeat center left; }
+.railway.station { background: url(/images/browser-icons/station.p.16.png) no-repeat center left; }
+.railway.level_crossing { background: url(/images/browser-icons/level_crossing.p.16.png) no-repeat center left; }
+
+.shop { background: url(/images/browser-icons/shop_convenience.p.16.png) no-repeat center left; }
+.shop.bakery { background: url(/images/browser-icons/shop_bakery.p.16.png) no-repeat center left; }
+.shop.clothes { background: url(/images/browser-icons/shop_clothes.p.16.png) no-repeat center left; }
+.shop.convenience { background: url(/images/browser-icons/shop_convenience.p.16.png) no-repeat center left; }
+.shop.diy { background: url(/images/browser-icons/shop_diy.p.16.png) no-repeat center left; }
+.shop.hairdresser { background: url(/images/browser-icons/shop_hairdresser.p.16.png) no-repeat center left; }
+.shop.supermarket { background: url(/images/browser-icons/shop_supermarket.p.16.png) no-repeat center left; }
+
+.tourism.alpine_hut { background: url(/images/browser-icons/alpinehut.p.16.png) no-repeat center left; }
+.tourism.camp_site { background: url(/images/browser-icons/camping.n.16.png) no-repeat center left; }
+.tourism.caravan_site { background: url(/images/browser-icons/caravan_park.n.16.png) no-repeat center left; }
+.tourism.hostel { background: url(/images/browser-icons/hostel.p.16.png) no-repeat center left; }
+.tourism.hotel { background: url(/images/browser-icons/hotel.p.16.png) no-repeat center left; }
+.tourism.museum { background: url(/images/browser-icons/museum.p.16.png) no-repeat center left; }
+.tourism.viewpoint { background: url(/images/browser-icons/view_point.p.16.png) no-repeat center left; }
+
+/* Ways */
+.aeroway.runway { background: url(/images/browser-icons/runway.20.png) no-repeat center left; }
+.aeroway.taxiway { background: url(/images/browser-icons/taxiway.20.png) no-repeat center left; }
+
+.building { background: url(/images/browser-icons/building.png) no-repeat center left; }
+
+.highway.bridleway { background: url(/images/browser-icons/bridleway.20.png) no-repeat center left; }
+.highway.byway { background: url(/images/browser-icons/byway.20.png) no-repeat center left; }
+.highway.cycleway { background: url(/images/browser-icons/cycleway.20.png) no-repeat center left; }
+.highway.footway { background: url(/images/browser-icons/footway.20.png) no-repeat center left; }
+.highway.motorway { background: url(/images/browser-icons/motorway.20.png) no-repeat center left; }
+.highway.primary { background: url(/images/browser-icons/primary.20.png) no-repeat center left; }
+.highway.residential { background: url(/images/browser-icons/unclassified.20.png) no-repeat center left; }
+.highway.secondary { background: url(/images/browser-icons/secondary.20.png) no-repeat center left; }
+.highway.trunk { background: url(/images/browser-icons/trunk.20.png) no-repeat center left; }
+.highway.unclassified { background: url(/images/browser-icons/unclassified.20.png) no-repeat center left; }
+
+.landuse.brownfield { background: url(/images/browser-icons/brownfield.png) no-repeat center left; }
+.landuse.cemetery { background: url(/images/browser-icons/cemetery.png) no-repeat center left; }
+.landuse.commercial { background: url(/images/browser-icons/commercial.png) no-repeat center left; }
+.landuse.farm { background: url(/images/browser-icons/farm.png) no-repeat center left; }
+.landuse.forest { background: url(/images/browser-icons/forest.png) no-repeat center left; }
+.landuse.industrial { background: url(/images/browser-icons/industrial.png) no-repeat center left; }
+.landuse.military { background: url(/images/browser-icons/military.png) no-repeat center left; }
+.landuse.residential { background: url(/images/browser-icons/residential.png) no-repeat center left; }
+.landuse.retail { background: url(/images/browser-icons/retail.png) no-repeat center left; }
+.landuse.tourism { background: url(/images/browser-icons/tourism.png) no-repeat center left; }
+.landuse.wood { background: url(/images/browser-icons/wood.png) no-repeat center left; }
+
+.leisure.golf_course { background: url(/images/browser-icons/golf.png) no-repeat center left; }
+.leisure.park { background: url(/images/browser-icons/park.png) no-repeat center left; }
+.leisure.pitch { background: url(/images/browser-icons/pitch.png) no-repeat center left; }
+.leisure.nature_reserve { background: url(/images/browser-icons/reserve.png) no-repeat center left; }
+
+.natural.heath { background: url(/images/browser-icons/heathland.png) no-repeat center left; }
+.natural.water { background: url(/images/browser-icons/lake.png) no-repeat center left; }
+
+.railway.light_rail { background: url(/images/browser-icons/light_rail.20.png) no-repeat center left; }
+.railway.rail { background: url(/images/browser-icons/rail.20.png) no-repeat center left; }
+.railway.subway { background: url(/images/browser-icons/subway.20.png) no-repeat center left; }
+.railway.tram { background: url(/images/browser-icons/tram.20.png) no-repeat center left; }