From f051a7c1f5d1999558caa9d3cbe8c36f8ac39c9b Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Mon, 25 Nov 2024 06:33:37 +0300 Subject: [PATCH] Write browse element icons as --- app/assets/stylesheets/browse.scss | 180 ----------------- app/assets/stylesheets/common.scss | 33 +--- app/helpers/browse_helper.rb | 51 ++--- .../browse/_containing_relation.html.erb | 15 +- app/views/browse/_node.html.erb | 8 +- app/views/browse/_relation.html.erb | 4 +- app/views/browse/_relation_member.html.erb | 2 +- app/views/browse/_way.html.erb | 11 +- app/views/changesets/_elements.html.erb | 10 +- config/browse_icons.yml | 186 ++++++++++++++++++ config/initializers/browse_icons.rb | 11 ++ test/helpers/browse_helper_test.rb | 77 +++----- 12 files changed, 282 insertions(+), 306 deletions(-) delete mode 100644 app/assets/stylesheets/browse.scss create mode 100644 config/browse_icons.yml create mode 100644 config/initializers/browse_icons.rb diff --git a/app/assets/stylesheets/browse.scss b/app/assets/stylesheets/browse.scss deleted file mode 100644 index 2dac602fe..000000000 --- a/app/assets/stylesheets/browse.scss +++ /dev/null @@ -1,180 +0,0 @@ -$map-sidebar-icons: ( - - /* Nodes (and ways as areas) */ - - ".aeroway.aerodrome": ("filename": "aerodrome.p.16.png"), - - ".amenity.atm": ("filename": "amenity_atm.16.png", "invert": true), - ".amenity.bank": ("filename": "amenity_bank.16.png", "invert": true), - ".amenity.bar": ("filename": "amenity_bar.16.png", "invert": true), - ".amenity.bench": ("filename": "amenity_bench.16.png", "invert": true), - ".amenity.biergarten": ("filename": "amenity_biergarten.16.png", "invert": true), - ".amenity.bicycle_parking": ("filename": "amenity_bicycle_parking.16.png"), - ".amenity.bicycle_rental": ("filename": "transport_rental_bicycle.16.png"), - ".amenity.bus_station": ("filename": "bus_station.n.16.png"), - ".amenity.cafe": ("filename": "amenity_cafe.16.png", "invert": true), - ".amenity.car_rental": ("filename": "transport_rental_car.16.png"), - ".amenity.car_sharing": ("filename": "car_share.p.16.png"), - ".amenity.childcare": ("filename": "amenity_childcare.p.16.png"), - ".amenity.cinema": ("filename": "amenity_cinema.16.png", "invert": true), - ".amenity.courthouse": ("filename": "amenity_courthouse.16.png", "invert": true), - ".amenity.dentist": ("filename": "amenity_dentist.16.png"), - ".amenity.doctors": ("filename": "amenity_doctors.16.png"), - ".amenity.drinking_water": ("filename": "amenity_drinking_water.16.png", "invert": true), - ".amenity.fast_food": ("filename": "amenity_fast_food.16.png", "invert": true), - ".amenity.fire_station": ("filename": "amenity_fire_station.16.png", "invert": true), - ".amenity.fuel": ("filename": "amenity_fuel.16.png"), - ".amenity.hospital": ("filename": "amenity_hospital.16.png"), - ".amenity.kindergarten": ("filename": "amenity_childcare.p.16.png"), - ".amenity.library": ("filename": "library.p.16.png", "invert": true), - ".amenity.nightclub": ("filename": "amenity_nightclub.16.png", "invert": true), - ".amenity.parking": ("filename": "parking.p.16.png"), - ".amenity.pharmacy": ("filename": "amenity_pharmacy.16.png"), - ".amenity.place_of_worship": ("filename": "amenity_place_of_worship.16.png", "invert": true), - ".amenity.police": ("filename": "amenity_police.16.png", "invert": true), - ".amenity.post_box": ("filename": "post_box.p.16.png", "invert": true), - ".amenity.post_office": ("filename": "post_office.p.16.png", "invert": true), - ".amenity.prison": ("filename": "amenity_prison.16.png", "invert": true), - ".amenity.pub": ("filename": "amenity_pub.16.png", "invert": true), - ".amenity.restaurant": ("filename": "amenity_restaurant.16.png", "invert": true), - ".amenity.recycling": ("filename": "amenity_recycling.16.png", "invert": true), - ".amenity.school": ("filename": "education_school.p.16.png"), - ".amenity.shelter": ("filename": "shelter2.p.16.png"), - ".amenity.taxi": ("filename": "amenity_taxi.16.png"), - ".amenity.telephone": ("filename": "telephone.p.16.png", "invert": true), - ".amenity.theatre": ("filename": "amenity_theatre.16.png", "invert": true), - ".amenity.toilets": ("filename": "amenity_toilets.16.png", "invert": true), - ".amenity.townhall": ("filename": "amenity_townhall.16.png", "invert": true), - ".amenity.university": ("filename": "education_university.p.16.png"), - ".amenity.veterinary": ("filename": "health_veterinary.p.16.png"), - ".amenity.waste_basket": ("filename": "amenity_waste_basket.16.png", "invert": true), - - ".barrier.gate": ("filename": "gate2.p.16.png", "invert": true), - - ".highway.bus_stop": ("filename": "highway_bus_stop.16.png"), - ".highway.mini_roundabout": ("filename": "mini_round.p.16.png"), - ".highway.traffic_signals": ("filename": "traffic_light.png", "invert": true), - ".highway.turning_circle": ("filename": "turning_circle.p.16.png"), - - ".historic.archaeological_site": ("filename": "historic_archaeological_site.16.png", "invert": true), - ".historic.castle": ("filename": "tourist_castle.p.16.png", "invert": true), - ".historic.memorial": ("filename": "historic_memorial.16.png", "invert": true), - ".historic.monument": ("filename": "historic_monument.16.png", "invert": true), - ".historic.ruins": ("filename": "tourist_ruins.p.16.png", "invert": true), - ".historic.wreck": ("filename": "tourist_wreck.p.16.png", "invert": true), - - ".man_made.lighthouse": ("filename": "man_made_lighthouse.16.png"), - ".man_made.water_tower": ("filename": "man_made_water_tower.16.png", "invert": true), - ".man_made.windmill": ("filename": "man_made_windmill.16.png", "invert": true), - - ".natural.tree": ("filename": "tree.p.16.png"), - - ".office.diplomatic": ("filename": "office_diplomatic.16.png"), - ".office.estate_agent": ("filename": "shop_estateagent.16.png"), - - ".railway.halt": ("filename": "halt.p.16.png"), - ".railway.station": ("filename": "station.p.16.png"), - ".railway.level_crossing": ("filename": "level_crossing.p.16.png", "invert": true), - - ".shop": ("filename": "shop_convenience.p.16.png"), - ".shop.alcohol": ("filename": "shop_alcohol.16.png"), - ".shop.bakery": ("filename": "shop_bakery.16.png"), - ".shop.bicycle": ("filename": "shop_bicycle.16.png"), - ".shop.books": ("filename": "shop_books.16.png"), - ".shop.butcher": ("filename": "shop_butcher.p.16.png"), - ".shop.clothes": ("filename": "shop_clothes.16.png"), - ".shop.car_parts": ("filename": "shop_car_parts.16.png"), - ".shop.car_repair": ("filename": "shop_car_repair.16.png"), - ".shop.convenience": ("filename": "shop_convenience.p.16.png"), - ".shop.doityourself": ("filename": "shop_doityourself.16.png"), - ".shop.electronics": ("filename": "shop_electronics.16.png"), - ".shop.estate_agent": ("filename": "shop_estateagent.16.png"), - ".shop.fashion": ("filename": "shop_clothes.16.png"), - ".shop.florist": ("filename": "shop_florist.16.png"), - ".shop.furniture": ("filename": "shop_furniture.16.png"), - ".shop.garden_centre": ("filename": "shop_florist.16.png"), - ".shop.gift": ("filename": "shop_gift.16.png"), - ".shop.greengrocer": ("filename": "shop_greengrocer.p.16.png"), - ".shop.hardware": ("filename": "shop_doityourself.16.png"), - ".shop.hairdresser": ("filename": "shop_hairdresser.16.png"), - ".shop.jewelry": ("filename": "shop_jewelry.16.png"), - ".shop.mobile_phone": ("filename": "shop_mobile_phone.16.png"), - ".shop.optician": ("filename": "shop_optician.16.png"), - ".shop.pet": ("filename": "shop_pet.16.png"), - ".shop.seafood": ("filename": "shop_seafood.16.png"), - ".shop.shoes": ("filename": "shop_shoes.16.png"), - ".shop.supermarket": ("filename": "shop_supermarket.p.16.png"), - - ".tourism.alpine_hut": ("filename": "tourism_alpine_hut.16.png"), - ".tourism.camp_site": ("filename": "tourism_camp_site.16.png"), - ".tourism.caravan_site": ("filename": "tourism_caravan_site.16.png"), - ".tourism.hostel": ("filename": "tourism_hostel.16.png"), - ".tourism.hotel": ("filename": "tourism_hotel.16.png"), - ".tourism.motel": ("filename": "tourism_motel.16.png"), - ".tourism.museum": ("filename": "tourism_museum.16.png", "invert": true), - ".tourism.picnic_site": ("filename": "tourism_picnic_site.16.png", "invert": true), - ".tourism.viewpoint": ("filename": "view_point.p.16.png", "invert": true), - ".tourism.wilderness_hut": ("filename": "tourism_wilderness_hut.16.png"), - - /* Ways */ - - ".aeroway.runway": ("filename": "runway.20.png"), - ".aeroway.taxiway": ("filename": "taxiway.20.png"), - - ".barrier.wall": ("filename": "wall.20.png"), - - ".building": ("filename": "building.png"), - - ".highway.bridleway": ("filename": "bridleway.20.png"), - ".highway.cycleway": ("filename": "cycleway.20.png"), - ".highway.footway": ("filename": "footway.20.png"), - ".highway.motorway": ("filename": "motorway.20.png"), - ".highway.motorway_link": ("filename": "motorway.20.png"), - ".highway.path": ("filename": "path.20.png"), - ".highway.pedestrian": ("filename": "service.20.png"), - ".highway.primary": ("filename": "primary.20.png"), - ".highway.primary_link": ("filename": "primary.20.png"), - ".highway.residential": ("filename": "unclassified.20.png"), - ".highway.secondary": ("filename": "secondary.20.png"), - ".highway.secondary_link": ("filename": "secondary.20.png"), - ".highway.service": ("filename": "service.20.png"), - ".highway.tertiary": ("filename": "tertiary.20.png"), - ".highway.track": ("filename": "track.20.png"), - ".highway.trunk": ("filename": "trunk.20.png"), - ".highway.trunk_link": ("filename": "trunk.20.png"), - ".highway.unclassified": ("filename": "unclassified.20.png"), - - ".landuse.brownfield": ("filename": "brownfield.png"), - ".landuse.cemetery": ("filename": "cemetery.png"), - ".landuse.commercial": ("filename": "commercial.png"), - ".landuse.farmland": ("filename": "farmland.png"), - ".landuse.farmyard": ("filename": "farmyard.png"), - ".landuse.forest": ("filename": "forest.png"), - ".landuse.grass": ("filename": "grass.png"), - ".landuse.industrial": ("filename": "industrial.png"), - ".landuse.meadow": ("filename": "meadow.png"), - ".landuse.military": ("filename": "military.png"), - ".landuse.residential": ("filename": "residential.png"), - ".landuse.retail": ("filename": "retail.png"), - ".landuse.tourism": ("filename": "tourism.png"), - - ".leisure.golf_course": ("filename": "golf.png"), - ".leisure.park": ("filename": "park.png"), - ".leisure.picnic_table": ("filename": "tourism_picnic_site.16.png", "invert": true), - ".leisure.playground": ("filename": "leisure_playground.16.png", "invert": true), - ".leisure.pitch": ("filename": "pitch.png"), - ".leisure.nature_reserve": ("filename": "reserve.png"), - ".leisure.water_park": ("filename": "leisure_water_park.16.png", "invert": true), - - ".natural.grassland": ("filename": "grassland.png"), - ".natural.heath": ("filename": "heathland.png"), - ".natural.scrub": ("filename": "scrub.png"), - ".natural.water": ("filename": "lake.png"), - ".natural.wood": ("filename": "wood.png"), - - ".railway.light_rail": ("filename": "light_rail.20.png"), - ".railway.rail": ("filename": "rail.20.png"), - ".railway.subway": ("filename": "subway.20.png"), - ".railway.tram": ("filename": "tram.20.png"), - -) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 668d050d8..34dca8993 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,6 +1,5 @@ @use "sass:map"; @import "parameters"; -@import "browse"; @import "bootstrap"; @import "rails_bootstrap_forms"; @@ -970,34 +969,12 @@ img.trace_image { /* Rules for map sidebar icons */ -.browse-section { - .node::before, - .way::before, - .relation::before { - display: inline-block; - width: 25px; - margin-left: -25px; - } +.browse-section .browse-element-list { + line-height: 20px; - .node, .way, .relation { - margin-left: 25px; - } - - .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) { + .browse-icon-invertible { + filter: invert(.8) hue-rotate(180deg); } } } diff --git a/app/helpers/browse_helper.rb b/app/helpers/browse_helper.rb index 69a8f8fa2..5cc12bb00 100644 --- a/app/helpers/browse_helper.rb +++ b/app/helpers/browse_helper.rb @@ -1,15 +1,38 @@ module BrowseHelper + def element_icon(type, object) + selected_icon_data = { :filename => "#{type}.svg" } + + unless object.redacted? + target_tags = object.tags.find_all { |k, _v| BROWSE_ICONS.key? k }.sort + title = target_tags.map { |k, v| "#{k}=#{v}" }.to_sentence unless target_tags.empty? + + target_tags.each do |k, v| + icon_data = BROWSE_ICONS[k][v] || BROWSE_ICONS[k][:*] + selected_icon_data = icon_data if icon_data + end + end + + image_tag "browse/#{selected_icon_data[:filename]}", + :size => 20, + :class => ["align-bottom object-fit-none", { "browse-icon-invertible" => selected_icon_data[:invert] }], + :title => title + 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 + 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 @@ -52,20 +75,6 @@ module BrowseHelper 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 @@ -107,12 +116,6 @@ module BrowseHelper 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 diff --git a/app/views/browse/_containing_relation.html.erb b/app/views/browse/_containing_relation.html.erb index 2ab0fcf97..2c1072364 100644 --- a/app/views/browse/_containing_relation.html.erb +++ b/app/views/browse/_containing_relation.html.erb @@ -1,7 +1,8 @@ -
  • <%= linked_name = link_to printable_element_name(containing_relation.relation), containing_relation.relation, :class => "relation" - if containing_relation.member_role.blank? - linked_name - else - t ".entry_role_html", :relation_name => linked_name, :relation_role => containing_relation.member_role - end %> -
    • +<%= 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? + linked_name + else + t ".entry_role_html", :relation_name => linked_name, :relation_role => containing_relation.member_role + end %> +<% end %> diff --git a/app/views/browse/_node.html.erb b/app/views/browse/_node.html.erb index 0ffe7c68b..52939d3a1 100644 --- a/app/views/browse/_node.html.erb +++ b/app/views/browse/_node.html.erb @@ -15,9 +15,11 @@ <% unless node.ways.empty? %>
    > <%= t "browse.part_of_ways", :count => node.ways.uniq.count %> -
    @@ -25,7 +27,7 @@ <% unless node.containing_relation_members.empty? %>
    > <%= t "browse.part_of_relations", :count => node.containing_relation_members.uniq.count %> -
    diff --git a/app/views/browse/_relation.html.erb b/app/views/browse/_relation.html.erb index 5dcdffa47..447067900 100644 --- a/app/views/browse/_relation.html.erb +++ b/app/views/browse/_relation.html.erb @@ -14,7 +14,7 @@

    <%= t "browse.part_of" %>

    > <%= t "browse.part_of_relations", :count => relation.containing_relation_members.uniq.count %> -
    @@ -24,7 +24,7 @@

    <%= t ".members" %>

    > <%= t ".members_count", :count => relation.relation_members.count %> -
    diff --git a/app/views/browse/_relation_member.html.erb b/app/views/browse/_relation_member.html.erb index d122f0edf..c00396fbd 100644 --- a/app/views/browse/_relation_member.html.erb +++ b/app/views/browse/_relation_member.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 diff --git a/app/views/browse/_way.html.erb b/app/views/browse/_way.html.erb index d04eff140..9181a3e08 100644 --- a/app/views/browse/_way.html.erb +++ b/app/views/browse/_way.html.erb @@ -14,7 +14,7 @@

    <%= t "browse.part_of" %>

    > <%= t "browse.part_of_relations", :count => way.containing_relation_members.uniq.count %> -
    @@ -24,17 +24,18 @@

    <%= t ".nodes" %>

    > <%= t ".nodes_count", :count => way.way_nodes.count %> -
    diff --git a/app/views/changesets/_elements.html.erb b/app/views/changesets/_elements.html.erb index fd5dd8a26..a95bed6fa 100644 --- a/app/views/changesets/_elements.html.erb +++ b/app/views/changesets/_elements.html.erb @@ -1,12 +1,12 @@ <%= turbo_frame_tag "changeset_#{type.pluralize}" do %> <%= render :partial => "paging_nav", :locals => { :type => type, :pages => pages } %> -