Make artist buttons consistent with record buttons

This commit is contained in:
Claudio Ortolina
2025-12-15 10:03:27 +03:00
parent a62e3809a4
commit df4d5ad02f
@@ -8,70 +8,74 @@
</h1> </h1>
<div class="flex items-center"> <div class="flex items-center">
<button <.button_group>
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300" <.button
phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")} variant="soft"
> phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")}
<span class="sr-only">{gettext("Open Notes")}</span> >
<.icon <span class="sr-only">{gettext("Open Notes")}</span>
name="hero-pencil-square" <.icon
class="-mt-1 h-5 w-5" name="hero-pencil"
aria-hidden="true" class="h-5 w-5"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
</button> />
<.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end"> </.button>
<:toggle> <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
<.button variant="ghost"> <:toggle>
<span class="sr-only">{gettext("Actions")}</span> <.button variant="soft">
<.icon <span class="sr-only">{gettext("Actions")}</span>
name="hero-ellipsis-vertical" <.icon
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" name="hero-ellipsis-vertical"
aria-hidden="true" class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
</.button> />
</:toggle> </.button>
<.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}> </:toggle>
<.dropdown_link <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
id={"actions-#{@artist.musicbrainz_id}-edit"} <.dropdown_link
patch={~p"/artists/#{@artist.musicbrainz_id}/edit"} id={"actions-#{@artist.musicbrainz_id}-edit"}
> patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
<.icon >
name="hero-pencil-square" <.icon
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce" name="hero-pencil-square"
aria-hidden="true" class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
{gettext("Edit")} />
</.dropdown_link> {gettext("Edit")}
<.dropdown_link </.dropdown_link>
id={"actions-#{@artist.musicbrainz_id}-refresh-image"} <.dropdown_link
phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})} id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
> phx-click={
<.icon JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})
name="hero-photo" }
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce" >
aria-hidden="true" <.icon
data-slot="icon" name="hero-photo"
/> class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
{gettext("Refresh image")} aria-hidden="true"
</.dropdown_link> data-slot="icon"
/>
{gettext("Refresh image")}
</.dropdown_link>
<.dropdown_link <.dropdown_link
id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"} id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})} phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
> >
<.icon <.icon
name="hero-arrow-path" name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin" class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
{gettext("Refresh info")} {gettext("Refresh info")}
</.dropdown_link> </.dropdown_link>
</.focus_wrap> </.focus_wrap>
</.dropdown> </.dropdown>
</.button_group>
</div> </div>
</div> </div>