From 4453728a7204f1cbf95355d0280d236a7ae6d94e Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sun, 14 Jan 2024 18:54:33 +0300
Subject: [PATCH] Preview colour tag value using svg

---
 app/assets/javascripts/index.js         | 4 ----
 app/assets/stylesheets/common.scss      | 6 ------
 app/helpers/browse_tags_helper.rb       | 6 +++++-
 test/helpers/browse_tags_helper_test.rb | 4 +++-
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index e45d28321..706647ef5 100644
--- 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 d598d10e3..f0746117d 100644
--- 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 1bda7dcb7..04d9a6c20 100644
--- 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 0786af61d..83c397b7d 100644
--- 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
-- 
2.43.2