From: Andy Allan Date: Wed, 4 Sep 2019 13:15:06 +0000 (+0200) Subject: Merge pull request #1779 from stefanb/tag-colour-preview X-Git-Tag: live~2442 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/374668c7cc06da7e76f5d447056d13022947886c?hp=5dfa747823e0940b86d8c70423269b57cffe10ed Merge pull request #1779 from stefanb/tag-colour-preview Added color preview box in tag browser sidebar --- diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 2c7d70e11..039cc0ef6 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -347,6 +347,10 @@ $(document).ready(function () { }); } }); + + $(".colour-preview-box").each(function () { + $(this).css("background-color", $(this).data("colour")); + }); } page.unload = function () { diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index d3488fe73..40c5eaa2a 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1230,6 +1230,15 @@ tr.turn:hover { border-left: 1px solid #ddd; background-color: #fff; } + + .colour-preview-box { + float: right; + width: 12px; + height: 12px; + margin: 4px 0px; + border: 1px solid rgba(0, 0, 0, .1); + // add color via inline css on element: background-color: ; + } } .warning { diff --git a/app/helpers/browse_tags_helper.rb b/app/helpers/browse_tags_helper.rb index 90e75e90a..375300e14 100644 --- a/app/helpers/browse_tags_helper.rb +++ b/app/helpers/browse_tags_helper.rb @@ -25,6 +25,8 @@ module BrowseTagsHelper link_to(h(p[:phone_number]), p[:url], :title => t("browse.tag_details.telephone_link", :phone_number => p[:phone_number])) end safe_join(phones, "; ") + elsif colour_value = colour_preview(key, value) + content_tag(:span, "", :class => "colour-preview-box", :"data-colour" => colour_value, :title => t("browse.tag_details.colour_preview", :colour_value => colour_value)) + colour_value else linkify h(value) end @@ -133,4 +135,25 @@ module BrowseTagsHelper end nil end + + def colour_preview(key, value) + return nil unless key =~ /^(?>.+:)?colour$/ && !value.nil? # see discussion at https://github.com/openstreetmap/openstreetmap-website/pull/1779 + + # does value look like a colour? ( 3 or 6 digit hex code or w3c colour name) + w3c_colors = + %w[aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate + coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgrey darkgreen darkkhaki darkmagenta darkolivegreen + darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue + dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray grey green greenyellow honeydew + hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray + lightgrey lightgreen lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen + linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise + mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod + palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon + sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise + violet wheat white whitesmoke yellow yellowgreen] + return nil unless value =~ /^#([0-9a-fA-F]{3}){1,2}$/ || w3c_colors.include?(value.downcase) + + value + end end diff --git a/config/locales/en.yml b/config/locales/en.yml index e8a36f945..c6ed0f628 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -279,6 +279,7 @@ en: wikidata_link: "The %{page} item on Wikidata" wikipedia_link: "The %{page} article on Wikipedia" telephone_link: "Call %{phone_number}" + colour_preview: "Colour %{colour_value} preview" note: title: "Note: %{id}" new_note: "New Note" diff --git a/test/helpers/browse_tags_helper_test.rb b/test/helpers/browse_tags_helper_test.rb index 195bd69de..222c7c669 100644 --- a/test/helpers/browse_tags_helper_test.rb +++ b/test/helpers/browse_tags_helper_test.rb @@ -47,6 +47,9 @@ class BrowseTagsHelperTest < ActionView::TestCase html = format_value("name:etymology:wikidata", "Q123") assert_dom_equal "Q123", html + + html = format_value("colour", "#f00") + assert_dom_equal %(#f00), html end def test_wiki_link @@ -260,4 +263,106 @@ class BrowseTagsHelperTest < ActionView::TestCase assert_equal "+22(33)4455.66.7788", links[1][:phone_number] assert_equal "tel:+22(33)4455.66.7788", links[1][:url] end + + def test_colour_preview + # basic positive tests + colour = colour_preview("colour", "red") + assert_equal "red", colour + + colour = colour_preview("colour", "Red") + assert_equal "Red", colour + + colour = colour_preview("colour", "darkRed") + assert_equal "darkRed", colour + + colour = colour_preview("colour", "#f00") + assert_equal "#f00", colour + + colour = colour_preview("colour", "#fF0000") + assert_equal "#fF0000", colour + + # other tag variants: + colour = colour_preview("building:colour", "#f00") + assert_equal "#f00", colour + + colour = colour_preview("ref:colour", "#f00") + assert_equal "#f00", colour + + colour = colour_preview("int_ref:colour", "green") + assert_equal "green", colour + + colour = colour_preview("roof:colour", "#f00") + assert_equal "#f00", colour + + colour = colour_preview("seamark:beacon_lateral:colour", "#f00") + assert_equal "#f00", colour + + # negative tests: + colour = colour_preview("colour", "") + assert_nil colour + + colour = colour_preview("colour", " ") + assert_nil colour + + colour = colour_preview("colour", nil) + assert_nil colour + + # ignore US spelling variant + colour = colour_preview("color", "red") + assert_nil colour + + # irrelevant tag names + colour = colour_preview("building", "red") + assert_nil colour + + colour = colour_preview("ref:colour_no", "red") + assert_nil colour + + colour = colour_preview("ref:colour-bg", "red") + assert_nil colour + + colour = colour_preview("int_ref", "red") + assert_nil colour + + # invalid hex codes + colour = colour_preview("colour", "#") + assert_nil colour + + colour = colour_preview("colour", "#ff") + assert_nil colour + + colour = colour_preview("colour", "#ffff") + assert_nil colour + + colour = colour_preview("colour", "#fffffff") + assert_nil colour + + colour = colour_preview("colour", "#ggg") + assert_nil colour + + colour = colour_preview("colour", "#ff 00 00") + assert_nil colour + + # invalid w3c color names: + colour = colour_preview("colour", "r") + assert_nil colour + + colour = colour_preview("colour", "ffffff") + assert_nil colour + + colour = colour_preview("colour", "f00") + assert_nil colour + + colour = colour_preview("colour", "xxxred") + assert_nil colour + + colour = colour_preview("colour", "dark red") + assert_nil colour + + colour = colour_preview("colour", "dark_red") + assert_nil colour + + colour = colour_preview("colour", "ADarkDummyLongColourNameWithAPurpleUndertone") + assert_nil colour + end end