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 :name, :string, required: true
attr :class, :string, default: nil attr :class, :string, default: nil
attr :rest, :global
def icon(%{name: "hero-" <> _} = assigns) do def icon(%{name: "hero-" <> _} = assigns) do
~H""" ~H"""
<span class={[@name, @class]} /> <span class={[@name, @class]} {@rest} />
""" """
end end
@@ -67,22 +67,19 @@ defmodule MusicLibraryWeb.RecordLive.ImportComponent do
<div class="relative flex-none"> <div class="relative flex-none">
<button <button
type="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-expanded="false"
aria-haspopup="true" aria-haspopup="true"
phx-click={toggle_actions_menu(@release_group.id)} phx-click={toggle_actions_menu(@release_group.id)}
phx-click-away={close_actions_menu(@release_group.id)} phx-click-away={close_actions_menu(@release_group.id)}
> >
<span class="sr-only"><%= gettext("Open options") %></span> <span class="sr-only"><%= gettext("Open options") %></span>
<svg <.icon
class="h-5 w-5" name="hero-ellipsis-vertical"
viewBox="0 0 20 20" class="-mt-1 h-5 w-5"
fill="currentColor"
aria-hidden="true" aria-hidden="true"
data-slot="icon" 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> </button>
<!-- <!--
Dropdown menu, show/hide based on menu state. Dropdown menu, show/hide based on menu state.
@@ -90,22 +90,19 @@
<div class="relative flex-none"> <div class="relative flex-none">
<button <button
type="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-expanded="false"
aria-haspopup="true" aria-haspopup="true"
phx-click={toggle_actions_menu(record.id)} phx-click={toggle_actions_menu(record.id)}
phx-click-away={close_actions_menu(record.id)} phx-click-away={close_actions_menu(record.id)}
> >
<span class="sr-only"><%= gettext("Open options") %></span> <span class="sr-only"><%= gettext("Open options") %></span>
<svg <.icon
class="h-5 w-5" name="hero-ellipsis-vertical"
viewBox="0 0 20 20" class="-mt-1 h-5 w-5"
fill="currentColor"
aria-hidden="true" aria-hidden="true"
data-slot="icon" 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> </button>
<!-- <!--
Dropdown menu, show/hide based on menu state. Dropdown menu, show/hide based on menu state.
@@ -90,22 +90,19 @@
<div class="relative flex-none"> <div class="relative flex-none">
<button <button
type="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-expanded="false"
aria-haspopup="true" aria-haspopup="true"
phx-click={toggle_actions_menu(record.id)} phx-click={toggle_actions_menu(record.id)}
phx-click-away={close_actions_menu(record.id)} phx-click-away={close_actions_menu(record.id)}
> >
<span class="sr-only"><%= gettext("Open options") %></span> <span class="sr-only"><%= gettext("Open options") %></span>
<svg <.icon
class="h-5 w-5" name="hero-ellipsis-vertical"
viewBox="0 0 20 20" class="-mt-1 h-5 w-5"
fill="currentColor"
aria-hidden="true" aria-hidden="true"
data-slot="icon" 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> </button>
<!-- <!--
Dropdown menu, show/hide based on menu state. Dropdown menu, show/hide based on menu state.
+11 -11
View File
@@ -16,9 +16,9 @@ msgstr ""
msgid "Actions" msgid "Actions"
msgstr "" 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/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 #: lib/music_library_web/live/wishlist_live/show.html.heex:9
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Are you sure?" msgid "Are you sure?"
@@ -61,20 +61,20 @@ msgstr ""
msgid "Cover art" msgid "Cover art"
msgstr "" 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/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 #: lib/music_library_web/live/wishlist_live/show.html.heex:12
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Delete" msgid "Delete"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_live/index.ex:54 #: 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.ex:50
#: lib/music_library_web/live/record_live/show.html.heex:4 #: 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.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.ex:50
#: lib/music_library_web/live/wishlist_live/show.html.heex:4 #: lib/music_library_web/live/wishlist_live/show.html.heex:4
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
@@ -191,7 +191,7 @@ msgstr ""
msgid "Previous" msgid "Previous"
msgstr "" 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 #, elixir-autogen, elixir-format
msgid "Purchase" msgid "Purchase"
msgstr "" msgstr ""
@@ -249,9 +249,9 @@ msgstr ""
msgid "Search for records" msgid "Search for records"
msgstr "" 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/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 #: lib/music_library_web/live/wishlist_live/show.ex:49
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Show" msgid "Show"
@@ -313,8 +313,8 @@ msgstr ""
msgid "Updated at" msgid "Updated at"
msgstr "" msgstr ""
#: lib/music_library_web/live/record_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:147 #: lib/music_library_web/live/wishlist_live/index.html.heex:144
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "View on MusicBrainz" msgid "View on MusicBrainz"
msgstr "" msgstr ""