cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1779 from stefanb/tag-colour-preview

Browse source 
Added color preview box in tag browser sidebar
This commit is contained in:
Andy Allan 2019-09-04 15:15:06 +02:00 • committed by GitHub
commit 374668c7cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 142 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/index.js
View file

@ -347,6 +347,10 @@ $(document).ready(function () {
});
}
});
$(".colour-preview-box").each(function () {
$(this).css("background-color", $(this).data("colour"));
});
}
page.unload = function () {

9
app/assets/stylesheets/common.scss
View file

@ -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: <tag value>;
}
}
.warning {

23
app/helpers/browse_tags_helper.rb
View file

@ -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