Preview colour tag value using svg

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index e45d28321c859c52ff06a50a2893cec8e35f0920..706647ef51ff4415694c1f035cc58febaec42f6a 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -346,10 +346,6 @@ $(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 d598d10e3aa996bc198569d3c8bd37e810056ce5..f0746117d7b53dcd29010e509c1d2225b363835c 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -645,12 +645,6 @@ tr.turn:hover {
     tr:last-child th, tr:last-child td {
       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 {

diff --git a/app/helpers/browse_tags_helper.rb b/app/helpers/browse_tags_helper.rb
index 1bda7dcb7ac8cd08c3f760e132a9faad3c3eb05a..04d9a6c2083a5ed265c77ed0fed7c5c424c8f2a6 100644 (file)
--- a/app/helpers/browse_tags_helper.rb
+++ b/app/helpers/browse_tags_helper.rb
@@ -34,7 +34,11 @@ module BrowseTagsHelper
       end
       safe_join(phones, "; ")
     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
       safe_join(value.split(";", -1).map { |x| linkify(h(x)) }, ";")
     end

diff --git a/test/helpers/browse_tags_helper_test.rb b/test/helpers/browse_tags_helper_test.rb
index 0786af61da03c6952a9b811849934ae371b0edf8..83c397b7de21c9cbb0d99643ec8f9703cc9f7357 100644 (file)
--- a/test/helpers/browse_tags_helper_test.rb
+++ b/test/helpers/browse_tags_helper_test.rb
@@ -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
 
     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")
     assert_dom_equal "<a title=\"Email foo@example.com\" href=\"mailto:foo@example.com\">foo@example.com</a>", html