Added color preview box in tag browser sidebar

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 4353e5e659d85628ff9a8f175d291ffdd4465652..0ec99266e1a6a6b728ad9b3f1b3c8b277a3f25d4 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1211,6 +1211,15 @@ tr.turn:hover {
       border-left: 1px solid #ddd;
       background-color: #fff;
     }
+
+    .colour-preview-box {
+      float: right;
+      width: 20px;
+      height: 20px;
+      margin: 0px;
+      border: 1px solid rgba(0, 0, 0, .1); 
+      // add color via inline css on element: background-color: <tag value>;
+    }
   }
 
   .warning {

diff --git a/app/helpers/browse_helper.rb b/app/helpers/browse_helper.rb
index b99ba93384b603efd3ea9de115a77b31d2bb87dc..802858f74b7170e2d175bcb2f6f5e593526cd79f 100644 (file)
--- a/app/helpers/browse_helper.rb
+++ b/app/helpers/browse_helper.rb
@@ -76,6 +76,8 @@ module BrowseHelper
       link_to h(value), url, :title => t("browse.tag_details.wiki_link.tag", :key => key, :value => value)
     elsif url = telephone_link(key, value)
       link_to h(value), url, :title => t("browse.tag_details.telephone_link", :phone_number => value)
+    elsif colour_value = colour_preview(key, value)
+      %( <div class="colour-preview-box" style="background-color:#{h(value)}" title="#{h(t('browse.tag_details.colour_preview', :colour_value => colour_value))}"></div>#{h(value)} )
     else
       linkify h(value)
     end
@@ -188,4 +190,16 @@ module BrowseHelper
 
     "tel:#{value_no_whitespace}"
   end
+
+  def colour_preview(key, value)
+    return nil unless key =~ /^(|building:|ref:|roof:)colour$/ && !value.nil?
+    # 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 54ec7a4682e5b3848bd15de0ac14138fee87587a..2141e938e77bae6cda6df7d6f66f8042f95833b6 100644 (file)
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -191,6 +191,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_helper_test.rb b/test/helpers/browse_helper_test.rb
index bc362fc3f069c2f0a65ba499be397310d616cc4b..27e0e77095487854e6ff28c7bb296374f0750dc2 100644 (file)
--- a/test/helpers/browse_helper_test.rb
+++ b/test/helpers/browse_helper_test.rb
@@ -134,6 +134,9 @@ class BrowseHelperTest < ActionView::TestCase
 
     html = format_value("name:etymology:wikidata", "Q123")
     assert_dom_equal "<a title=\"The Q123 item on Wikidata\" href=\"//www.wikidata.org/wiki/Q123?uselang=en\">Q123</a>", html
+
+    html = format_value("colour", "#f00")
+    assert_dom_equal %( <div class="colour-preview-box" style="background-color:#f00" title="Colour #f00 preview"></div>#f00 ), html
   end
 
   def test_icon_tags
@@ -348,6 +351,93 @@ class BrowseHelperTest < ActionView::TestCase
     assert_equal "tel:+1(234)567-890", link
   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("roof:colour", "#f00")
+    assert_equal "#f00", colour
+
+    # negative tests:
+    colour = colour_preview("color", "")
+    assert_nil colour
+
+    colour = colour_preview("color", "   ")
+    assert_nil colour
+
+    colour = colour_preview("color", 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
+
+    # 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
+
   def add_old_tags_selection(old_node)
     { "building" => "yes",
       "shop" => "gift",