Use icon instead of custom svg in options menu

This commit is contained in:
Claudio Ortolina
2024-11-01 09:30:06 +00:00
parent 9f2acc4e5d
commit c0f039f2ee
5 changed files with 28 additions and 36 deletions
@@ -624,10 +624,11 @@ defmodule MusicLibraryWeb.CoreComponents do
"""
attr :name, :string, required: true
attr :class, :string, default: nil
attr :rest, :global
def icon(%{name: "hero-" <> _} = assigns) do
~H"""
<span class={[@name, @class]} />
<span class={[@name, @class]} {@rest} />
"""
end
@@ -67,22 +67,19 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
<div class="relative flex-none">
<button
type="button"
class="-m-2.5 block p-2.5 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
aria-expanded="false"
aria-haspopup="true"
phx-click={toggle_actions_menu(@release_group.id)}
phx-click-away={close_actions_menu(@release_group.id)}
>
<span class="sr-only"><%= gettext("Open options") %></span>
<svg
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
>
<path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" />
</svg>
/>
</button>
<!--
Dropdown menu, show/hide based on menu state.
@@ -90,22 +90,19 @@
<div class="relative flex-none">
<button
type="button"
class="-m-2.5 block p-2.5 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
aria-expanded="false"
aria-haspopup="true"
phx-click={toggle_actions_menu(record.id)}
phx-click-away={close_actions_menu(record.id)}
>
<span class="sr-only"><%= gettext("Open options") %></span>
<svg
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
>
<path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" />
</svg>
/>
</button>
<!--
Dropdown menu, show/hide based on menu state.
@@ -90,22 +90,19 @@
<div class="relative flex-none">
<button
type="button"
class="-m-2.5 block p-2.5 text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
aria-expanded="false"
aria-haspopup="true"
phx-click={toggle_actions_menu(record.id)}
phx-click-away={close_actions_menu(record.id)}
>
<span class="sr-only"><%= gettext("Open options") %></span>
<svg
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
>
<path d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z" />
</svg>
/>
</button>
<!--
Dropdown menu, show/hide based on menu state.
+11 -11
View File
@@ -16,9 +16,9 @@ msgstr ""
msgid "Actions"
msgstr ""
#: lib/music_library_web/live/record_live/index.html.heex:166
#: lib/music_library_web/live/record_live/index.html.heex:163
#: lib/music_library_web/live/record_live/show.html.heex:9
#: lib/music_library_web/live/wishlist_live/index.html.heex:176
#: lib/music_library_web/live/wishlist_live/index.html.heex:173
#: lib/music_library_web/live/wishlist_live/show.html.heex:9
#, elixir-autogen, elixir-format
msgid "Are you sure?"
@@ -61,20 +61,20 @@ msgstr ""
msgid "Cover art"
msgstr ""
#: lib/music_library_web/live/record_live/index.html.heex:168
#: lib/music_library_web/live/record_live/index.html.heex:165
#: lib/music_library_web/live/record_live/show.html.heex:12
#: lib/music_library_web/live/wishlist_live/index.html.heex:178
#: lib/music_library_web/live/wishlist_live/index.html.heex:175
#: lib/music_library_web/live/wishlist_live/show.html.heex:12
#, elixir-autogen, elixir-format
msgid "Delete"
msgstr ""
#: lib/music_library_web/live/record_live/index.ex:54
#: lib/music_library_web/live/record_live/index.html.heex:157
#: lib/music_library_web/live/record_live/index.html.heex:154
#: lib/music_library_web/live/record_live/show.ex:50
#: lib/music_library_web/live/record_live/show.html.heex:4
#: lib/music_library_web/live/wishlist_live/index.ex:55
#: lib/music_library_web/live/wishlist_live/index.html.heex:157
#: lib/music_library_web/live/wishlist_live/index.html.heex:154
#: lib/music_library_web/live/wishlist_live/show.ex:50
#: lib/music_library_web/live/wishlist_live/show.html.heex:4
#, elixir-autogen, elixir-format
@@ -191,7 +191,7 @@ msgstr ""
msgid "Previous"
msgstr ""
#: lib/music_library_web/live/wishlist_live/index.html.heex:167
#: lib/music_library_web/live/wishlist_live/index.html.heex:164
#, elixir-autogen, elixir-format
msgid "Purchase"
msgstr ""
@@ -249,9 +249,9 @@ msgstr ""
msgid "Search for records"
msgstr ""
#: lib/music_library_web/live/record_live/index.html.heex:137
#: lib/music_library_web/live/record_live/index.html.heex:134
#: lib/music_library_web/live/record_live/show.ex:49
#: lib/music_library_web/live/wishlist_live/index.html.heex:137
#: lib/music_library_web/live/wishlist_live/index.html.heex:134
#: lib/music_library_web/live/wishlist_live/show.ex:49
#, elixir-autogen, elixir-format
msgid "Show"
@@ -313,8 +313,8 @@ msgstr ""
msgid "Updated at"
msgstr ""
#: lib/music_library_web/live/record_live/index.html.heex:147
#: lib/music_library_web/live/wishlist_live/index.html.heex:147
#: lib/music_library_web/live/record_live/index.html.heex:144
#: lib/music_library_web/live/wishlist_live/index.html.heex:144
#, elixir-autogen, elixir-format
msgid "View on MusicBrainz"
msgstr ""