From 76adaa09856c02a022215291c05df3b5eb134e5f Mon Sep 17 00:00:00 2001 From: =?utf8?q?=C5=A0tefan=20Baebler?= Date: Mon, 5 Mar 2018 22:10:30 +0100 Subject: [PATCH] Added color preview box in tag browser sidebar --- app/assets/stylesheets/common.scss | 9 +++ app/helpers/browse_helper.rb | 14 +++++ config/locales/en.yml | 1 + test/helpers/browse_helper_test.rb | 90 ++++++++++++++++++++++++++++++ 4 files changed, 114 insertions(+) diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 4353e5e65..0ec99266e 100644 --- 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: ; + } } .warning { diff --git a/app/helpers/browse_helper.rb b/app/helpers/browse_helper.rb index b99ba9338..802858f74 100644 --- 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) + %(
#{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 54ec7a468..2141e938e 100644 --- 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 bc362fc3f..27e0e7709 100644 --- 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 "Q123", html + + html = format_value("colour", "#f00") + assert_dom_equal %(
#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", -- 2.39.5