Use inline svg for notice icons

Allows to set fill to currentColor which adapts to dark mode.
This commit is contained in:
Anton Khorev 2024-05-06 14:33:57 +03:00
parent 0b18937384
commit 29e1336da3
5 changed files with 10 additions and 77 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 B

View file

@ -1,73 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3864"
version="1.1"
inkscape:version="0.48.2 r9819"
width="16"
height="16"
sodipodi:docname="notice.svg"
inkscape:export-filename="/Users/saman/work_repos/openstreetmap-website/app/assets/images/notice.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<metadata
id="metadata3870">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3868" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1405"
inkscape:window-height="1009"
id="namedview3866"
showgrid="false"
inkscape:zoom="21.536424"
inkscape:cx="15.375"
inkscape:cy="1.125"
inkscape:window-x="326"
inkscape:window-y="43"
inkscape:window-maximized="0"
inkscape:current-layer="svg3864"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-bbox="true"
inkscape:snap-nodes="true">
<inkscape:grid
type="xygrid"
id="grid3920"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<path
style="color:#000000;fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:6;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="M 2 0 C 0.892 0 0 0.892 0 2 L 0 14 C 0 15.108 0.892 16 2 16 L 14 16 C 15.108 16 16 15.108 16 14 L 16 2 C 16 0.892 15.108 0 14 0 L 2 0 z M 7 3 L 9 3 L 9 8 L 7 8 L 7 3 z M 7 10 L 9 10 L 9 12 L 7 12 L 7 10 z "
id="rect7131" />
</svg>

Before

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -1,4 +1,10 @@
module SvgHelper
def notice_svg_tag
path_data = "M 2 0 C 0.892 0 0 0.892 0 2 L 0 14 C 0 15.108 0.892 16 2 16 L 14 16 C 15.108 16 16 15.108 16 14 L 16 2 C 16 0.892 15.108 0 14 0 L 2 0 z M 7 3 L 9 3 L 9 8 L 7 8 L 7 3 z M 7 10 L 9 10 L 9 12 L 7 12 L 7 10 z"
path_tag = tag.path :d => path_data, :fill => "currentColor"
tag.svg path_tag, :width => 16, :height => 16
end
def previous_page_svg_tag(**options)
adjacent_page_svg_tag(dir == "rtl" ? 1 : -1, **options)
end

View file

@ -6,7 +6,7 @@
<div class="alert alert-danger row mx-0 p-3 align-items-center">
<div class="col-auto">
<%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
<%= notice_svg_tag %>
</div>
<div class="col">
<p class="mb-0"><%= t ".warning" %></p>

View file

@ -1,7 +1,7 @@
<% if flash[:error] %>
<div class="alert alert-danger row mx-0 mb-0 p-3 rounded-0 align-items-center">
<div class="col-auto">
<%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
<%= notice_svg_tag %>
</div>
<div class="col"><%= render_flash(flash[:error]) %></div>
</div>
@ -10,7 +10,7 @@
<% if flash[:warning] %>
<div class="alert alert-warning row mx-0 mb-0 p-3 rounded-0 align-items-center">
<div class="col-auto">
<%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
<%= notice_svg_tag %>
</div>
<div class="col"><%= render_flash(flash[:warning]) %></div>
</div>
@ -19,7 +19,7 @@
<% if flash[:notice] %>
<div class="alert alert-success row mx-0 mb-0 p-3 rounded-0 align-items-center">
<div class="col-auto">
<%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
<%= notice_svg_tag %>
</div>
<div class="col"><%= render_flash(flash[:notice]) %></div>
</div>