Extract Barcode icon

This commit is contained in:
Claudio Ortolina
2025-03-10 12:23:52 +00:00
parent 3d0eec3bff
commit 3063155349
4 changed files with 155 additions and 146 deletions
@@ -95,6 +95,141 @@ defmodule MusicLibraryWeb.BarcodeScannerComponent do
"""
end
attr :class, :string, required: true
def barcode_icon(assigns) do
~H"""
<svg
class={@class}
aria-hidden="true"
data-slot="icon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="16"
height="16"
viewBox="0 0 256 256"
xml:space="preserve"
>
<g
style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
>
<polygon
points="90,79.14 56.12,79.14 56.12,73.14 84,73.14 84,54.67 90,54.67 "
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<polygon
points="33.88,79.14 0,79.14 0,54.67 6,54.67 6,73.14 33.88,73.14 "
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<polygon
points="6,35.33 0,35.33 0,10.86 33.88,10.86 33.88,16.86 6,16.86 "
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<polygon
points="90,35.33 84,35.33 84,16.86 56.12,16.86 56.12,10.86 90,10.86 "
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="36.27"
y="26.31"
rx="0"
ry="0"
width="6"
height="37.39"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="13.36"
y="26.31"
rx="0"
ry="0"
width="6"
height="37.39"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="59.18"
y="26.31"
rx="0"
ry="0"
width="6"
height="24.02"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="59.18"
y="56.85"
rx="0"
ry="0"
width="6"
height="6.84"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="24.82"
y="26.31"
rx="0"
ry="0"
width="6"
height="24.02"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="24.82"
y="56.85"
rx="0"
ry="0"
width="6"
height="6.84"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="70.64"
y="26.31"
rx="0"
ry="0"
width="6"
height="24.02"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="70.64"
y="56.85"
rx="0"
ry="0"
width="6"
height="6.84"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="47.73"
y="26.31"
rx="0"
ry="0"
width="6"
height="37.39"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
</g>
</svg>
"""
end
attr :scan_result, BarcodeScan.Result, required: true
defp scan_result(assigns) do
@@ -2,6 +2,7 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
use MusicLibraryWeb, :live_view
import MusicLibraryWeb.Pagination
import MusicLibraryWeb.RecordComponents
import MusicLibraryWeb.BarcodeScannerComponent, only: [barcode_icon: 1]
alias MusicLibrary.Collection
alias MusicLibrary.Records
@@ -28,134 +28,7 @@
]}
patch={~p"/collection/scan"}
>
<svg
class="mr-2 fill-current"
aria-hidden="true"
data-slot="icon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="16"
height="16"
viewBox="0 0 256 256"
xml:space="preserve"
>
<g
style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
>
<polygon
points="90,79.14 56.12,79.14 56.12,73.14 84,73.14 84,54.67 90,54.67 "
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<polygon
points="33.88,79.14 0,79.14 0,54.67 6,54.67 6,73.14 33.88,73.14 "
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<polygon
points="6,35.33 0,35.33 0,10.86 33.88,10.86 33.88,16.86 6,16.86 "
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<polygon
points="90,35.33 84,35.33 84,16.86 56.12,16.86 56.12,10.86 90,10.86 "
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="36.27"
y="26.31"
rx="0"
ry="0"
width="6"
height="37.39"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="13.36"
y="26.31"
rx="0"
ry="0"
width="6"
height="37.39"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="59.18"
y="26.31"
rx="0"
ry="0"
width="6"
height="24.02"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="59.18"
y="56.85"
rx="0"
ry="0"
width="6"
height="6.84"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="24.82"
y="26.31"
rx="0"
ry="0"
width="6"
height="24.02"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="24.82"
y="56.85"
rx="0"
ry="0"
width="6"
height="6.84"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="70.64"
y="26.31"
rx="0"
ry="0"
width="6"
height="24.02"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="70.64"
y="56.85"
rx="0"
ry="0"
width="6"
height="6.84"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
<rect
x="47.73"
y="26.31"
rx="0"
ry="0"
width="6"
height="37.39"
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
transform=" matrix(1 0 0 1 0 0) "
/>
</g>
</svg>
<.barcode_icon class="mr-2 fill-current" />
{gettext("Scan")}
</.link>
</nav>
+18 -18
View File
@@ -31,7 +31,7 @@ msgstr ""
#: lib/music_library_web/components/layouts/app.html.heex:26
#: lib/music_library_web/live/artist_live/show.html.heex:105
#: lib/music_library_web/live/collection_live/index.ex:157
#: lib/music_library_web/live/collection_live/index.ex:158
#: lib/music_library_web/live/collection_live/show.ex:117
#: lib/music_library_web/live/collection_live/show.ex:134
#, elixir-autogen, elixir-format
@@ -59,8 +59,8 @@ msgstr ""
msgid "Edit"
msgstr ""
#: lib/music_library_web/live/collection_live/index.ex:132
#: lib/music_library_web/live/collection_live/index.ex:139
#: lib/music_library_web/live/collection_live/index.ex:133
#: lib/music_library_web/live/collection_live/index.ex:140
#: lib/music_library_web/live/stats_live/index.ex:53
#: lib/music_library_web/live/stats_live/index.ex:59
#: lib/music_library_web/live/wishlist_live/index.ex:120
@@ -158,7 +158,7 @@ msgstr ""
msgid "Previous"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:196
#: lib/music_library_web/live/collection_live/index.html.heex:69
#, elixir-autogen, elixir-format
msgid "Purchase"
msgstr ""
@@ -175,7 +175,7 @@ msgstr ""
msgid "Purchased on"
msgstr ""
#: lib/music_library_web/live/collection_live/index.ex:124
#: lib/music_library_web/live/collection_live/index.ex:125
#: lib/music_library_web/live/stats_live/index.ex:45
#: lib/music_library_web/live/wishlist_live/index.ex:112
#, elixir-autogen, elixir-format
@@ -214,7 +214,7 @@ msgstr ""
msgid "Show"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:201
#: lib/music_library_web/live/collection_live/index.html.heex:74
#: lib/music_library_web/live/wishlist_live/index.html.heex:23
#, elixir-autogen, elixir-format
msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
@@ -236,7 +236,7 @@ msgstr ""
msgid "Success!"
msgstr ""
#: lib/music_library_web/live/collection_live/index.ex:21
#: lib/music_library_web/live/collection_live/index.ex:22
#: lib/music_library_web/live/collection_live/show.ex:14
#: lib/music_library_web/live/wishlist_live/index.ex:21
#: lib/music_library_web/live/wishlist_live/show.ex:13
@@ -322,13 +322,13 @@ msgstr ""
msgid "Choose which format to import"
msgstr ""
#: lib/music_library_web/components/barcode_scanner_component.ex:158
#: lib/music_library_web/components/barcode_scanner_component.ex:293
#: lib/music_library_web/live/stats_live/index.html.heex:141
#, elixir-autogen, elixir-format
msgid "Collected"
msgstr ""
#: lib/music_library_web/components/barcode_scanner_component.ex:155
#: lib/music_library_web/components/barcode_scanner_component.ex:290
#: lib/music_library_web/live/stats_live/index.html.heex:147
#, elixir-autogen, elixir-format
msgid "Wishlisted"
@@ -454,7 +454,7 @@ msgstr ""
msgid "Error loading play count"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:178
#: lib/music_library_web/live/collection_live/index.html.heex:51
#, elixir-autogen, elixir-format
msgid "A->Z"
msgstr ""
@@ -580,12 +580,12 @@ msgstr ""
msgid "Published releases"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:159
#: lib/music_library_web/live/collection_live/index.html.heex:32
#, elixir-autogen, elixir-format
msgid "Scan"
msgstr ""
#: lib/music_library_web/live/collection_live/index.ex:58
#: lib/music_library_web/live/collection_live/index.ex:59
#, elixir-autogen, elixir-format
msgid "Scan barcodes · Collection"
msgstr ""
@@ -600,17 +600,17 @@ msgstr ""
msgid "Open camera"
msgstr ""
#: lib/music_library_web/components/barcode_scanner_component.ex:187
#: lib/music_library_web/components/barcode_scanner_component.ex:322
#, elixir-autogen, elixir-format
msgid "Failed to search release for barcode %{number}"
msgstr ""
#: lib/music_library_web/components/barcode_scanner_component.ex:200
#: lib/music_library_web/components/barcode_scanner_component.ex:335
#, elixir-autogen, elixir-format
msgid "Records imported successfully"
msgstr ""
#: lib/music_library_web/components/barcode_scanner_component.ex:153
#: lib/music_library_web/components/barcode_scanner_component.ex:288
#, elixir-autogen, elixir-format
msgid "New"
msgstr ""
@@ -650,12 +650,12 @@ msgstr ""
msgid "Live Dashboard"
msgstr ""
#: lib/music_library_web/components/barcode_scanner_component.ex:118
#: lib/music_library_web/components/barcode_scanner_component.ex:253
#, elixir-autogen, elixir-format
msgid "Barcode not found"
msgstr ""
#: lib/music_library_web/components/barcode_scanner_component.ex:211
#: lib/music_library_web/components/barcode_scanner_component.ex:346
#, elixir-autogen, elixir-format
msgid "Some records could not be imported: %{summary}"
msgstr ""
@@ -666,7 +666,7 @@ msgstr ""
msgid "Add"
msgstr ""
#: lib/music_library_web/live/collection_live/index.ex:44
#: lib/music_library_web/live/collection_live/index.ex:45
#, elixir-autogen, elixir-format
msgid "Add new Record · Collection"
msgstr ""