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/components/add_record_component.ex
+5 -34
View File
@@ -1,8 +1,7 @@
defmodule MusicLibraryWeb.AddRecordComponent do
use MusicLibraryWeb, :live_component
import MusicLibraryWeb.RecordComponents,
only: [toggle_actions_menu: 1, close_actions_menu: 1, format_label: 1, type_label: 1]
import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
alias MusicBrainz.ReleaseGroupSearchResult
alias MusicLibrary.Records
@@ -88,37 +87,9 @@ defmodule MusicLibraryWeb.AddRecordComponent do
)}
</p>
</div>
<div class="relative flex-none">
<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(@release_group.id)}
phx-click-away={close_actions_menu(@release_group.id)}
>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon name={@icon_name} 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-#{@release_group.id}"}
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"
>
<.actions_menu id={@release_group.id} background_container_target="#records > li">
<: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"
@@ -131,8 +102,8 @@ defmodule MusicLibraryWeb.AddRecordComponent do
>
{format_label(format)}
</.link>
</.focus_wrap>
</div>
</:links>
</.actions_menu>
</div>
</li>
"""
lib/music_library_web/components/core_components.ex
+51
View File
@@ -194,6 +194,57 @@ defmodule MusicLibraryWeb.CoreComponents do
"""
end
attr :id, :string, required: true
attr :class, :string, default: nil
attr :background_container_target, :string, required: true
slot :links, required: true
slot :button, required: false
def actions_menu(assigns) do
~H"""
<div class={["relative flex-none", @class]}>
<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(@id, @background_container_target)}
>
{render_slot(@button) || default_actions_menu_button(%{})}
</button>
<.focus_wrap
id={"actions-#{@id}"}
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"
phx-click-away={close_actions_menu(@id, @background_container_target)}
>
{render_slot(@links)}
</.focus_wrap>
</div>
"""
end
defp default_actions_menu_button(assigns) do
~H"""
<span class="sr-only">{gettext("Open options")}</span>
<.icon name="hero-ellipsis-vertical" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
"""
end
defp toggle_actions_menu(id, background_container_target) do
JS.toggle(to: "#actions-#{id}")
|> JS.toggle_class("pointer-events-none", to: background_container_target)
end
defp close_actions_menu(id, background_container_target) do
JS.hide(to: "#actions-#{id}")
|> JS.remove_class("pointer-events-none", to: background_container_target)
end
## JS Commands
def show(js \\ %JS{}, selector) do
lib/music_library_web/components/record_components.ex
+8 -86
View File
@@ -95,42 +95,8 @@ defmodule MusicLibraryWeb.RecordComponents do
</p>
</div>
<%!-- TODO: replace with OSS version --%>
<div class="relative flex-none">
<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(record.id)}
phx-click-away={close_actions_menu(record.id)}
>
<span class="sr-only">{gettext("Open options")}</span>
<.icon
name="hero-ellipsis-vertical"
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-#{record.id}"}
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"
>
<.actions_menu id={record.id} background_container_target="#records > li">
<:links>
<.link
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"
role="menuitem"
@@ -185,8 +151,8 @@ defmodule MusicLibraryWeb.RecordComponents do
>
{gettext("Delete")}
</.link>
</.focus_wrap>
</div>
</:links>
</.actions_menu>
</div>
</li>
</ul>
@@ -270,42 +236,8 @@ defmodule MusicLibraryWeb.RecordComponents do
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
{record.title}
</p>
<div class="relative flex-none mt-2">
<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(record.id)}
phx-click-away={close_actions_menu(record.id)}
>
<span class="sr-only">{gettext("Open options")}</span>
<.icon
name="hero-ellipsis-vertical"
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-#{record.id}"}
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"
>
<.actions_menu id={record.id} background_container_target="#records > li" class="mt-2">
<:links>
<.link
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"
role="menuitem"
@@ -360,8 +292,8 @@ defmodule MusicLibraryWeb.RecordComponents do
>
{gettext("Delete")}
</.link>
</.focus_wrap>
</div>
</:links>
</.actions_menu>
</div>
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
{format_label(record.format)} · {type_label(record.type)}
@@ -450,14 +382,4 @@ defmodule MusicLibraryWeb.RecordComponents do
country_code
end
end
def toggle_actions_menu(record_id) do
JS.toggle(to: "#actions-#{record_id}")
|> JS.toggle_class("pointer-events-none", to: "#records > li")
end
def close_actions_menu(record_id) do
JS.hide(to: "#actions-#{record_id}")
|> JS.remove_class("pointer-events-none", to: "#records > li")
end
end
lib/music_library_web/live/artist_live/show.ex
+1 -1
View File
@@ -2,7 +2,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
use MusicLibraryWeb, :live_view
import MusicLibraryWeb.RecordComponents,
only: [record_grid: 1, toggle_actions_menu: 1, close_actions_menu: 1, country_label: 1]
only: [record_grid: 1, country_label: 1]
alias MusicLibrary.Artists.ArtistInfo
alias MusicLibrary.{Artists, Records}
lib/music_library_web/live/artist_live/show.html.heex
+4 -28
View File
@@ -6,32 +6,8 @@
<.country_flag country={@country} />
</h1>
<div class="relative flex-none">
<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(@artist.musicbrainz_id)}
>
<span class="sr-only">{gettext("Open options")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
<.focus_wrap
id={"actions-#{@artist.musicbrainz_id}"}
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"
phx-click-away={close_actions_menu(@artist.musicbrainz_id)}
>
<.actions_menu id={@artist.musicbrainz_id} background_container_target="#records > li">
<:links>
<.link
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"
role="menuitem"
@@ -63,8 +39,8 @@
/>
{gettext("Refresh info")}
</.link>
</.focus_wrap>
</div>
</:links>
</.actions_menu>
</div>
<div class="mt-4 flex items-center justify-between">
lib/music_library_web/live/collection_live/show.ex
-2
View File
@@ -3,8 +3,6 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
import MusicLibraryWeb.RecordComponents,
only: [
toggle_actions_menu: 1,
close_actions_menu: 1,
format_label: 1,
type_label: 1,
release_summary: 1
lib/music_library_web/live/collection_live/show.html.heex
+4 -28
View File
@@ -28,32 +28,8 @@
)} · {type_label(@record.type)}
</p>
</div>
<div class="relative flex-none">
<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(@record.id)}
>
<span class="sr-only">{gettext("Open options")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
<.focus_wrap
id={"actions-#{@record.id}"}
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"
phx-click-away={close_actions_menu(@record.id)}
>
<.actions_menu id={@record.id} background_container_target="#records > li">
<:links>
<.link
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"
role="menuitem"
@@ -134,8 +110,8 @@
/>
{gettext("Delete")}
</.link>
</.focus_wrap>
</div>
</:links>
</.actions_menu>
</div>
<div class="mt-4">
<%!-- TODO: replace with OSS version --%>
lib/music_library_web/live/stats_live/index.ex
-10
View File
@@ -216,16 +216,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|> DateTime.to_iso8601()
end
defp toggle_actions_menu(track_id) do
JS.toggle(to: "#actions-#{track_id}")
|> JS.toggle_class("pointer-events-none", to: "#scrobble-activity > li")
end
defp close_actions_menu(track_id) do
JS.hide(to: "#actions-#{track_id}")
|> JS.remove_class("pointer-events-none", to: "#scrobble-activity > li")
end
defp resolve_timezone! do
Application.get_env(:music_library, MusicLibraryWeb)
|> Keyword.fetch!(:timezone)
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>
lib/music_library_web/live/wishlist_live/show.ex
-2
View File
@@ -3,8 +3,6 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
import MusicLibraryWeb.RecordComponents,
only: [
toggle_actions_menu: 1,
close_actions_menu: 1,
format_label: 1,
type_label: 1,
release_summary: 1
lib/music_library_web/live/wishlist_live/show.html.heex
+4 -28
View File
@@ -30,32 +30,8 @@
· {format_label(@record.format)} · {type_label(@record.type)}
</p>
</div>
<div class="relative flex-none">
<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(@record.id)}
>
<span class="sr-only">{gettext("Open options")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
<.focus_wrap
id={"actions-#{@record.id}"}
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"
phx-click-away={close_actions_menu(@record.id)}
>
<.actions_menu id={@record.id} background_container_target="#records > li">
<:links>
<.link
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"
role="menuitem"
@@ -156,8 +132,8 @@
/>
{gettext("Delete")}
</.link>
</.focus_wrap>
</div>
</:links>
</.actions_menu>
</div>
<div class="mt-4">
priv/gettext/default.pot
+1 -5
View File
@@ -123,10 +123,7 @@ msgstr ""
msgid "No results"
msgstr ""
#: lib/music_library_web/components/record_components.ex
#: lib/music_library_web/live/artist_live/show.html.heex
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#: lib/music_library_web/components/core_components.ex
#, elixir-autogen, elixir-format
msgid "Open options"
msgstr ""
@@ -283,7 +280,6 @@ msgstr ""
msgid "Scrobble activity"
msgstr ""
#: lib/music_library_web/components/add_record_component.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Choose which format to import"
priv/gettext/en/LC_MESSAGES/default.po
+1 -5
View File
@@ -123,10 +123,7 @@ msgstr ""
msgid "No results"
msgstr ""
#: lib/music_library_web/components/record_components.ex
#: lib/music_library_web/live/artist_live/show.html.heex
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#: lib/music_library_web/components/core_components.ex
#, elixir-autogen, elixir-format
msgid "Open options"
msgstr ""
@@ -283,7 +280,6 @@ msgstr ""
msgid "Scrobble activity"
msgstr ""
#: lib/music_library_web/components/add_record_component.ex
#: lib/music_library_web/live/stats_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Choose which format to import"