feat: add dark mode support, accordion UI, and current combination display
- Update Theme Studio sidebar to use DaisyUI theme-aware classes for dark mode - Convert Customise accordion to native details/summary elements for proper interaction - Add "Current combination" card showing active theme settings - Add SVG recolorer for logo color customization - Add image controller for serving uploaded images - Implement header background image controls (zoom, position) - Add toggle_customise event handler to preserve accordion state across re-renders 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
144
test/simpleshop_theme/media/svg_recolorer_test.exs
Normal file
144
test/simpleshop_theme/media/svg_recolorer_test.exs
Normal file
@@ -0,0 +1,144 @@
|
||||
defmodule SimpleshopTheme.Media.SVGRecolorerTest do
|
||||
use ExUnit.Case, async: true
|
||||
|
||||
alias SimpleshopTheme.Media.SVGRecolorer
|
||||
|
||||
describe "recolor/2" do
|
||||
test "replaces fill attributes" do
|
||||
svg = ~s(<svg><path fill="#000000" d="M0 0"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ ~s(fill="#ff6600")
|
||||
refute result =~ "#000000"
|
||||
end
|
||||
|
||||
test "replaces stroke attributes" do
|
||||
svg = ~s(<svg><path stroke="#000000" d="M0 0"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ ~s(stroke="#ff6600")
|
||||
refute result =~ "#000000"
|
||||
end
|
||||
|
||||
test "preserves fill=none" do
|
||||
svg = ~s(<svg><path fill="none" d="M0 0"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ ~s(fill="none")
|
||||
end
|
||||
|
||||
test "preserves stroke=none" do
|
||||
svg = ~s(<svg><path stroke="none" d="M0 0"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ ~s(stroke="none")
|
||||
end
|
||||
|
||||
test "replaces currentColor" do
|
||||
svg = ~s(<svg><path fill="currentColor" d="M0 0"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ "#ff6600"
|
||||
refute result =~ "currentColor"
|
||||
end
|
||||
|
||||
test "handles multiple elements" do
|
||||
svg = ~s(<svg><circle fill="#000" r="10"/><rect fill="#fff" width="20"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ ~s(fill="#ff6600")
|
||||
refute result =~ "#000"
|
||||
refute result =~ "#fff"
|
||||
end
|
||||
|
||||
test "handles RGB color names" do
|
||||
svg = ~s(<svg><path fill="black" d="M0 0"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ ~s(fill="#ff6600")
|
||||
refute result =~ "black"
|
||||
end
|
||||
|
||||
test "handles inline styles with fill" do
|
||||
svg = ~s(<svg><path style="fill: #000000; opacity: 1" d="M0 0"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ "fill:#ff6600"
|
||||
refute result =~ "#000000"
|
||||
end
|
||||
|
||||
test "handles both fill and stroke in same element" do
|
||||
svg = ~s(<svg><path fill="#000" stroke="#fff" d="M0 0"/></svg>)
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert String.contains?(result, ~s(fill="#ff6600"))
|
||||
assert String.contains?(result, ~s(stroke="#ff6600"))
|
||||
end
|
||||
|
||||
test "handles CSS style blocks with fill" do
|
||||
svg = """
|
||||
<svg><style>.st0{fill:#FFFFFF;}.st1{fill:#EF1D1D;stroke:#000000;}</style><path class="st0"/></svg>
|
||||
"""
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ "fill:#ff6600"
|
||||
refute result =~ "#FFFFFF"
|
||||
refute result =~ "#EF1D1D"
|
||||
end
|
||||
|
||||
test "handles CSS style blocks with stroke" do
|
||||
svg = """
|
||||
<svg><style>.st1{stroke:#000000;stroke-miterlimit:10;}</style><path class="st1"/></svg>
|
||||
"""
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ "stroke:#ff6600"
|
||||
refute result =~ "#000000"
|
||||
end
|
||||
|
||||
test "preserves fill:none in CSS" do
|
||||
svg = """
|
||||
<svg><style>.st0{fill:none;stroke:#000;}</style><path class="st0"/></svg>
|
||||
"""
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ "fill:none"
|
||||
assert result =~ "stroke:#ff6600"
|
||||
end
|
||||
|
||||
test "handles CSS with color names" do
|
||||
svg = """
|
||||
<svg><style>.icon{fill:black;stroke:white;}</style><path class="icon"/></svg>
|
||||
"""
|
||||
result = SVGRecolorer.recolor(svg, "#ff6600")
|
||||
assert result =~ "fill:#ff6600"
|
||||
assert result =~ "stroke:#ff6600"
|
||||
refute result =~ "black"
|
||||
refute result =~ "white"
|
||||
end
|
||||
end
|
||||
|
||||
describe "valid_hex_color?/1" do
|
||||
test "accepts 6-digit hex colors" do
|
||||
assert SVGRecolorer.valid_hex_color?("#ff6600")
|
||||
assert SVGRecolorer.valid_hex_color?("#FFFFFF")
|
||||
assert SVGRecolorer.valid_hex_color?("#000000")
|
||||
end
|
||||
|
||||
test "accepts 3-digit hex colors" do
|
||||
assert SVGRecolorer.valid_hex_color?("#f60")
|
||||
assert SVGRecolorer.valid_hex_color?("#FFF")
|
||||
assert SVGRecolorer.valid_hex_color?("#000")
|
||||
end
|
||||
|
||||
test "rejects invalid colors" do
|
||||
refute SVGRecolorer.valid_hex_color?("ff6600")
|
||||
refute SVGRecolorer.valid_hex_color?("#gg0000")
|
||||
refute SVGRecolorer.valid_hex_color?("#ff")
|
||||
refute SVGRecolorer.valid_hex_color?("red")
|
||||
refute SVGRecolorer.valid_hex_color?(nil)
|
||||
refute SVGRecolorer.valid_hex_color?(123)
|
||||
end
|
||||
end
|
||||
|
||||
describe "normalize_hex_color/1" do
|
||||
test "expands 3-digit hex to 6-digit" do
|
||||
assert SVGRecolorer.normalize_hex_color("#f60") == "#ff6600"
|
||||
assert SVGRecolorer.normalize_hex_color("#FFF") == "#FFFFFF"
|
||||
assert SVGRecolorer.normalize_hex_color("#000") == "#000000"
|
||||
end
|
||||
|
||||
test "leaves 6-digit hex unchanged" do
|
||||
assert SVGRecolorer.normalize_hex_color("#ff6600") == "#ff6600"
|
||||
assert SVGRecolorer.normalize_hex_color("#FFFFFF") == "#FFFFFF"
|
||||
end
|
||||
end
|
||||
end
|
||||
124
test/simpleshop_theme_web/controllers/image_controller_test.exs
Normal file
124
test/simpleshop_theme_web/controllers/image_controller_test.exs
Normal file
@@ -0,0 +1,124 @@
|
||||
defmodule SimpleshopThemeWeb.ImageControllerTest do
|
||||
use SimpleshopThemeWeb.ConnCase
|
||||
|
||||
alias SimpleshopTheme.Media
|
||||
|
||||
@png_binary <<137, 80, 78, 71, 13, 10, 26, 10>>
|
||||
@svg_content ~s(<svg xmlns="http://www.w3.org/2000/svg"><circle fill="#000000" r="10"/></svg>)
|
||||
|
||||
describe "show/2" do
|
||||
test "returns 404 for non-existent image", %{conn: conn} do
|
||||
conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}")
|
||||
assert response(conn, 404) =~ "Image not found"
|
||||
end
|
||||
|
||||
test "serves image with proper content type and caching headers", %{conn: conn} do
|
||||
{:ok, image} =
|
||||
Media.upload_image(%{
|
||||
image_type: "logo",
|
||||
filename: "test.png",
|
||||
content_type: "image/png",
|
||||
file_size: byte_size(@png_binary),
|
||||
data: @png_binary
|
||||
})
|
||||
|
||||
conn = get(conn, ~p"/images/#{image.id}")
|
||||
|
||||
assert response(conn, 200) == @png_binary
|
||||
assert get_resp_header(conn, "content-type") == ["image/png; charset=utf-8"]
|
||||
assert get_resp_header(conn, "cache-control") == ["public, max-age=31536000, immutable"]
|
||||
assert get_resp_header(conn, "etag") == [~s("#{image.id}")]
|
||||
end
|
||||
end
|
||||
|
||||
describe "thumbnail/2" do
|
||||
test "returns 404 for non-existent image", %{conn: conn} do
|
||||
conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}/thumbnail")
|
||||
assert response(conn, 404) =~ "Image not found"
|
||||
end
|
||||
|
||||
test "falls back to full image when no thumbnail available", %{conn: conn} do
|
||||
{:ok, image} =
|
||||
Media.upload_image(%{
|
||||
image_type: "logo",
|
||||
filename: "test.png",
|
||||
content_type: "image/png",
|
||||
file_size: byte_size(@png_binary),
|
||||
data: @png_binary
|
||||
})
|
||||
|
||||
conn = get(conn, ~p"/images/#{image.id}/thumbnail")
|
||||
|
||||
assert response(conn, 200) == @png_binary
|
||||
assert get_resp_header(conn, "content-type") == ["image/png; charset=utf-8"]
|
||||
end
|
||||
end
|
||||
|
||||
describe "recolored_svg/2" do
|
||||
test "returns 404 for non-existent image", %{conn: conn} do
|
||||
conn = get(conn, ~p"/images/#{Ecto.UUID.generate()}/recolored/ff6600")
|
||||
assert response(conn, 404) =~ "Image not found"
|
||||
end
|
||||
|
||||
test "returns 400 for non-SVG image", %{conn: conn} do
|
||||
{:ok, image} =
|
||||
Media.upload_image(%{
|
||||
image_type: "logo",
|
||||
filename: "test.png",
|
||||
content_type: "image/png",
|
||||
file_size: byte_size(@png_binary),
|
||||
data: @png_binary
|
||||
})
|
||||
|
||||
conn = get(conn, ~p"/images/#{image.id}/recolored/ff6600")
|
||||
assert response(conn, 400) =~ "not an SVG"
|
||||
end
|
||||
|
||||
test "returns 400 for invalid color", %{conn: conn} do
|
||||
{:ok, image} =
|
||||
Media.upload_image(%{
|
||||
image_type: "logo",
|
||||
filename: "test.svg",
|
||||
content_type: "image/svg+xml",
|
||||
file_size: byte_size(@svg_content),
|
||||
data: @svg_content
|
||||
})
|
||||
|
||||
conn = get(conn, ~p"/images/#{image.id}/recolored/invalid")
|
||||
assert response(conn, 400) =~ "Invalid color"
|
||||
end
|
||||
|
||||
test "recolors SVG with valid hex color", %{conn: conn} do
|
||||
{:ok, image} =
|
||||
Media.upload_image(%{
|
||||
image_type: "logo",
|
||||
filename: "test.svg",
|
||||
content_type: "image/svg+xml",
|
||||
file_size: byte_size(@svg_content),
|
||||
data: @svg_content
|
||||
})
|
||||
|
||||
conn = get(conn, ~p"/images/#{image.id}/recolored/ff6600")
|
||||
|
||||
assert response(conn, 200) =~ ~s(fill="#ff6600")
|
||||
assert get_resp_header(conn, "content-type") == ["image/svg+xml; charset=utf-8"]
|
||||
assert get_resp_header(conn, "cache-control") == ["public, max-age=3600"]
|
||||
end
|
||||
|
||||
test "handles color with leading hash", %{conn: conn} do
|
||||
{:ok, image} =
|
||||
Media.upload_image(%{
|
||||
image_type: "logo",
|
||||
filename: "test.svg",
|
||||
content_type: "image/svg+xml",
|
||||
file_size: byte_size(@svg_content),
|
||||
data: @svg_content
|
||||
})
|
||||
|
||||
# URL encodes # as %23
|
||||
conn = get(conn, "/images/#{image.id}/recolored/%23ff6600")
|
||||
|
||||
assert response(conn, 200) =~ ~s(fill="#ff6600")
|
||||
end
|
||||
end
|
||||
end
|
||||
Reference in New Issue
Block a user