Write browse element icons as <img>

Author: AntonKhorev

app/assets/stylesheets/browse.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @import "parameters";
-@import "browse";
 @import "bootstrap";
 @import "rails_bootstrap_forms";
 
@@ -961,35 +960,12 @@ img.trace_image {
 
 /* Rules for map sidebar icons */
 
-.browse-section {
-  .node::before,
-  .way::before,
-  .relation::before {
-    position: absolute;
-    display: inline-block;
-    width: 25px;
-    margin-left: -25px;
-  }
-
-  .node, .way, .relation {
-    margin-left: 25px;
-  }
+.browse-section .browse-element-list {
+  line-height: 20px;
 
-  .node::before     { content: image-url('browse/node.svg'); }
-  .way::before      { content: image-url('browse/way.svg'); }
-  .relation::before { content: image-url('browse/relation.svg'); }
-}
-
-@each $class, $item in $map-sidebar-icons {
-  .browse-section #{$class}::before {
-    content: image-url('browse/#{map.get($item, "filename")}');
-  }
-
-  @if map.get($item, "invert") {
-    @include color-mode(dark) {
-      .browse-section #{$class}::before {
-        filter: invert(.8) hue-rotate(180deg);
-      }
+  @include color-mode(dark) {
+    img.invert-in-dark-mode {
+      filter: invert(.8) hue-rotate(180deg);
     }
   }
 }

app/assets/stylesheets/common.scss

@@ -29,25 +29,45 @@ def group_way_nodes(way)
     groups
   end
 
-  def element_single_current_link(type, object)
-    link_to object, { :class => element_class(type, object), :title => element_title(object), :rel => (link_follow(object) if type == "node") } do
-      element_strikethrough object do
-        printable_element_name object
+  def element_icon(type, object)
+    icon_data = { :filename => "#{type}.svg" }
+
+    unless object.redacted?
+      target_tags = object.tags.find_all { |k, _v| BROWSE_ICONS.key? k.to_sym }.sort
+      title = target_tags.map { |k, v| "#{k}=#{v}" }.to_sentence unless target_tags.empty?
+
+      target_tags.each do |k, v|
+        k = k.to_sym
+        v = v.to_sym
+        if v != :* && BROWSE_ICONS[k].key?(v)
+          icon_data = BROWSE_ICONS[k][v]
+        elsif BROWSE_ICONS[k].key?(:*)
+          icon_data = BROWSE_ICONS[k][:*]
+        end
       end
     end
+
+    image_tag "browse/#{icon_data[:filename]}",
+              :size => 20,
+              :class => ["object-fit-none", { "invert-in-dark-mode" => icon_data[:invert] }],
+              :title => title
   end
 
-  def element_single_current_link_without_icon(type, object)
-    link_to object, { :title => element_title(object), :rel => (link_follow(object) if type == "node") } do
+  def element_single_current_link(type, object)
+    link_to object, { :rel => (link_follow(object) if type == "node") } do
       element_strikethrough object do
         printable_element_name object
       end
     end
   end
 
-  def element_list_item(type, object, &block)
-    tag.li :class => element_class(type, object), :title => element_title(object) do
-      element_strikethrough object, &block
+  def element_list_item(type, object, &)
+    tag.li(tag.div(element_icon(type, object) + tag.div(&), :class => "d-flex gap-1"))
+  end
+
+  def element_list_item_with_strikethrough(type, object, &)
+    element_list_item type, object do
+      element_strikethrough object, &
     end
   end
 
@@ -90,20 +110,6 @@ def element_strikethrough(object, &)
     end
   end
 
-  def element_class(type, object)
-    classes = [type]
-    classes += icon_tags(object).flatten.map { |t| h(t) } unless object.redacted?
-    classes.join(" ")
-  end
-
-  def element_title(object)
-    if object.redacted?
-      ""
-    else
-      h(icon_tags(object).map { |k, v| "#{k}=#{v}" }.to_sentence)
-    end
-  end
-
   def link_follow(object)
     "nofollow" if object.tags.empty?
   end
@@ -145,20 +151,10 @@ def sidebar_classic_pagination(pages, page_param)
 
   private
 
-  ICON_TAGS = %w[aeroway amenity barrier building highway historic landuse leisure man_made natural office railway shop tourism waterway].freeze
-
-  def icon_tags(object)
-    object.tags.find_all { |k, _v| ICON_TAGS.include? k }.sort
-  end
-
   def name_locales(object)
     object.tags.keys.map { |k| Regexp.last_match(1) if k =~ /^name:(.*)$/ }.flatten
   end
 
-  def same_related_ways(wn1, wn2)
-    wn1.node.ways.uniq.sort == wn2.node.ways.uniq.sort
-  end
-
   def related_ways_of_way_node(way_node)
     way_node.node.ways.uniq.sort.reject { |related_way| related_way.id == way_node.way_id }
   end

app/helpers/browse_helper.rb

@@ -1,7 +1,8 @@
-<li><%= linked_name = link_to printable_element_name(containing_relation.relation), containing_relation.relation
-        if containing_relation.member_role.blank?
-          t ".entry_html", :relation_name => linked_name
-        else
-          t ".entry_role_html", :relation_name => linked_name, :relation_role => containing_relation.member_role
-        end %>
-</li>
+<%= element_list_item "relation", containing_relation.relation do %>
+  <%= linked_name = link_to printable_element_name(containing_relation.relation), containing_relation.relation
+      if containing_relation.member_role.blank?
+        t ".entry_html", :relation_name => linked_name
+      else
+        t ".entry_role_html", :relation_name => linked_name, :relation_role => containing_relation.member_role
+      end %>
+<% end %>

app/views/browse/_containing_relation.html.erb

@@ -15,17 +15,19 @@
       <% unless node.ways.empty? %>
         <details <%= "open" if node.ways.count < 10 %>>
           <summary><%= t "browse.part_of_ways", :count => node.ways.uniq.count %></summary>
-          <ul class="list-unstyled">
+          <ul class="list-unstyled browse-element-list">
             <% node.ways.uniq.each do |way| %>
-              <li><%= element_single_current_link "way", way %></li>
+              <%= element_list_item "way", way do %>
+                <%= element_single_current_link "way", way %>
+              <% end %>
             <% end %>
           </ul>
         </details>
       <% end %>
       <% unless node.containing_relation_members.empty? %>
         <details <%= "open" if node.containing_relation_members.count < 10 %>>
           <summary><%= t "browse.part_of_relations", :count => node.containing_relation_members.uniq.count %></summary>
-          <ul class="list-unstyled">
+          <ul class="list-unstyled browse-element-list">
             <%= render :partial => "browse/containing_relation", :collection => node.containing_relation_members.uniq %>
           </ul>
         </details>

app/views/browse/_node.html.erb

@@ -14,7 +14,7 @@
       <h4><%= t "browse.part_of" %></h4>
       <details <%= "open" if relation.containing_relation_members.count < 10 %>>
         <summary><%= t "browse.part_of_relations", :count => relation.containing_relation_members.uniq.count %></summary>
-        <ul class="list-unstyled">
+        <ul class="list-unstyled browse-element-list">
           <%= render :partial => "browse/containing_relation", :collection => relation.containing_relation_members.uniq %>
         </ul>
       </details>
@@ -24,7 +24,7 @@
       <h4><%= t ".members" %></h4>
       <details <%= "open" if relation.relation_members.count < 10 %>>
         <summary><%= t ".members_count", :count => relation.relation_members.count %></summary>
-        <ul class="list-unstyled">
+        <ul class="list-unstyled browse-element-list">
           <%= render :partial => "browse/relation_member", :collection => relation.relation_members %>
         </ul>
       </details>

app/views/browse/_relation.html.erb

@@ -1,6 +1,6 @@
 <% linked_name = link_to printable_element_name(relation_member.member), relation_member.member, { :rel => link_follow(relation_member.member) }
    type_str = t ".type.#{relation_member.member_type.downcase}" %>
-<%= element_list_item relation_member.member_type.downcase, relation_member.member do %>
+<%= element_list_item_with_strikethrough relation_member.member_type.downcase, relation_member.member do %>
   <%= if relation_member.member_role.blank?
         t ".entry_html", :type => type_str, :name => linked_name
       else