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

Preview colour tag value using svg

Browse source
This commit is contained in:
Anton Khorev 2024-01-14 18:54:33 +03:00
parent 6d48655a71
commit 4453728a72
4 changed files with 8 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -645,12 +645,6 @@ tr.turn:hover {
tr:last-child th, tr:last-child td { tr:last-child th, tr:last-child td {
border-bottom: 0; border-bottom: 0;
} }
.colour-preview-box {
width: 14px;
height: 14px;
// add color via inline css on element: background-color: <tag value>;
}
} }
span.action-button:hover { span.action-button:hover {

6
app/helpers/browse_tags_helper.rb
View file

@ -34,7 +34,11 @@ module BrowseTagsHelper
end end
safe_join(phones, "; ") safe_join(phones, "; ")
elsif colour_value = colour_preview(key, value) elsif colour_value = colour_preview(key, value)
tag.span("", :class => "colour-preview-box float-end m-1 border border-dark border-opacity-10", :"data-colour" => colour_value, :title => t("browse.tag_details.colour_preview", :colour_value => colour_value)) + colour_value svg = tag.svg :width => 14, :height => 14, :class => "float-end m-1" do
concat tag.title t("browse.tag_details.colour_preview", :colour_value => colour_value)
concat tag.rect :x => 0.5, :y => 0.5, :width => 13, :height => 13, :fill => colour_value, :stroke => "#2222"
end
svg + colour_value
else else
safe_join(value.split(";", -1).map { |x| linkify(h(x)) }, ";") safe_join(value.split(";", -1).map { |x| linkify(h(x)) }, ";")
end end

4
test/helpers/browse_tags_helper_test.rb
View file

@ -54,7 +54,9 @@ class BrowseTagsHelperTest < ActionView::TestCase
assert_dom_equal "<a title=\"The File:Test.jpg item on Wikimedia Commons\" href=\"//commons.wikimedia.org/wiki/File:Test.jpg?uselang=en\">File:Test.jpg</a>", html assert_dom_equal "<a title=\"The File:Test.jpg item on Wikimedia Commons\" href=\"//commons.wikimedia.org/wiki/File:Test.jpg?uselang=en\">File:Test.jpg</a>", html
html = format_value("colour", "#f00") html = format_value("colour", "#f00")
assert_dom_equal %(<span class="colour-preview-box float-end m-1 border border-dark border-opacity-10" data-colour="#f00" title="Colour #f00 preview"></span>#f00), html dom = Rails::Dom::Testing.html_document_fragment.parse html
assert_select dom, "svg>rect>@fill", "#f00"
assert_match(/#f00$/, html)
html = format_value("email", "foo@example.com") html = format_value("email", "foo@example.com")
assert_dom_equal "<a title=\"Email foo@example.com\" href=\"mailto:foo@example.com\">foo@example.com</a>", html assert_dom_equal "<a title=\"Email foo@example.com\" href=\"mailto:foo@example.com\">foo@example.com</a>", html