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

Extract actions_menu

Browse Source
This commit is contained in:
Claudio Ortolina
2025-05-29 21:50:32 +01:00
parent b72bee709e
commit 9100c6c04a
13 changed files with 95 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/stats_live/index.html.heex
+16 -64
View File
@@ -220,7 +220,7 @@
</.link>
</div>
<div
<.actions_menu
:if={
album.metadata.musicbrainz_id !== "" and
!tracked_record?(
@@ -228,38 +228,14 @@
album.metadata.musicbrainz_id
)
}
class="relative flex-none"
id={album.scrobbled_at_uts}
background_container_target="#records > li"
>
<button
type="button"
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(album.scrobbled_at_uts)}
phx-click-away={close_actions_menu(album.scrobbled_at_uts)}
>
<:button>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon name="hero-star" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
</button>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<.focus_wrap
id={"actions-#{album.scrobbled_at_uts}"}
class={[
"hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
]}
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu-0-button"
>
</:button>
<:links>
<.link
:for={format <- Records.Record.formats()}
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
@@ -275,8 +251,8 @@
>
{format_label(format)}
</.link>
</.focus_wrap>
</div>
</:links>
</.actions_menu>
</div>
</div>
</li>
@@ -345,7 +321,7 @@
</.link>
</div>
<div
<.actions_menu
:if={
track.album.musicbrainz_id !== "" and
!tracked_record?(
@@ -353,38 +329,14 @@
track.album.musicbrainz_id
)
}
class="relative flex-none"
id={track.scrobbled_at_uts}
background_container_target="#records > li"
>
<button
type="button"
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(track.scrobbled_at_uts)}
phx-click-away={close_actions_menu(track.scrobbled_at_uts)}
>
<:button>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon name="hero-star" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
</button>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<.focus_wrap
id={"actions-#{track.scrobbled_at_uts}"}
class={[
"hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
]}
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu-0-button"
>
</:button>
<:links>
<.link
:for={format <- Records.Record.formats()}
class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
@@ -400,8 +352,8 @@
>
{format_label(format)}
</.link>
</.focus_wrap>
</div>
</:links>
</.actions_menu>
</div>
</div>
</li>