cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve action buttons in wishlist/collection views

Browse Source 
- Consistently use links
- Add icons
This commit is contained in:
Claudio Ortolina
2025-03-05 17:22:38 +00:00
parent a5ec76833c
commit 36707f40e3
3 changed files with 151 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/index.html.heex
+131 -2
View File
@@ -10,10 +10,11 @@
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
"disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
"focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]}
patch={~p"/collection/import"}
>
<.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Import")}
</.link>
<.link
@@ -23,10 +24,138 @@
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
"disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
"focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]}
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="18"
height="18"
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>
{gettext("Scan")}
</.link>
</nav>
lib/music_library_web/live/wishlist_live/index.html.heex
+13 -2
View File
@@ -2,8 +2,19 @@
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} />
<.link patch={~p"/wishlist/import"}>
<.button>{gettext("Import")}</.button>
<.link
class={[
"relative inline-flex items-center rounded-md",
"px-3 py-2 text-xs sm:text-sm font-semibold",
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
"disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]}
patch={~p"/wishlist/import"}
>
<.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Import")}
</.link>
</div>
</header>
priv/gettext/default.pot
+7 -7
View File
@@ -95,8 +95,8 @@ msgstr ""
msgid "Hang in there while we get back on track"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:17
#: lib/music_library_web/live/wishlist_live/index.html.heex:6
#: lib/music_library_web/live/collection_live/index.html.heex:18
#: lib/music_library_web/live/wishlist_live/index.html.heex:17
#, elixir-autogen, elixir-format
msgid "Import"
msgstr ""
@@ -164,7 +164,7 @@ msgstr ""
msgid "Previous"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:67
#: lib/music_library_web/live/collection_live/index.html.heex:196
#, elixir-autogen, elixir-format
msgid "Purchase"
msgstr ""
@@ -230,8 +230,8 @@ msgstr ""
msgid "Show"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:72
#: lib/music_library_web/live/wishlist_live/index.html.heex:12
#: lib/music_library_web/live/collection_live/index.html.heex:201
#: 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"
msgstr ""
@@ -485,7 +485,7 @@ msgstr ""
msgid "Error loading play count"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:49
#: lib/music_library_web/live/collection_live/index.html.heex:178
#, elixir-autogen, elixir-format
msgid "A->Z"
msgstr ""
@@ -611,7 +611,7 @@ msgstr ""
msgid "Published releases"
msgstr ""
#: lib/music_library_web/live/collection_live/index.html.heex:30
#: lib/music_library_web/live/collection_live/index.html.heex:159
#, elixir-autogen, elixir-format
msgid "Scan"
msgstr ""