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.