Reposition tracklist button
This commit is contained in:
Claudio Ortolina
@@ -25,112 +25,127 @@
|
|||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
|
<div>
|
||||||
<:toggle>
|
<button
|
||||||
<span class="sr-only">{gettext("Actions")}</span>
|
:if={@record.selected_release_id}
|
||||||
|
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||||
|
phx-click={MusicLibraryWeb.ReleaseComponent.open("release-with-tracks-sheet")}
|
||||||
|
>
|
||||||
|
<span class="sr-only">{gettext("Show Tracks")}</span>
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-ellipsis-vertical"
|
name="hero-numbered-list"
|
||||||
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
class="-mt-1 h-5 w-5"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
data-slot="icon"
|
data-slot="icon"
|
||||||
/>
|
/>
|
||||||
</:toggle>
|
</button>
|
||||||
<.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
|
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
|
||||||
<.dropdown_link
|
<:toggle>
|
||||||
id={"actions-#{@record.id}-edit"}
|
<span class="sr-only">{gettext("Actions")}</span>
|
||||||
patch={~p"/collection/#{@record}/show/edit"}
|
|
||||||
>
|
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-pencil-square"
|
name="hero-ellipsis-vertical"
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
data-slot="icon"
|
data-slot="icon"
|
||||||
/>
|
/>
|
||||||
{gettext("Edit")}
|
</:toggle>
|
||||||
</.dropdown_link>
|
<.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-edit"}
|
||||||
|
patch={~p"/collection/#{@record}/show/edit"}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-pencil-square"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Edit")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
<.dropdown_link
|
<.dropdown_link
|
||||||
id={"actions-#{@record.id}-refresh-cover"}
|
id={"actions-#{@record.id}-refresh-cover"}
|
||||||
phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
|
phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
|
||||||
>
|
>
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-photo"
|
name="hero-photo"
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
data-slot="icon"
|
data-slot="icon"
|
||||||
/>
|
/>
|
||||||
{gettext("Refresh cover")}
|
{gettext("Refresh cover")}
|
||||||
</.dropdown_link>
|
</.dropdown_link>
|
||||||
|
|
||||||
<.dropdown_link
|
<.dropdown_link
|
||||||
id={"actions-#{@record.id}-refresh-mb-data"}
|
id={"actions-#{@record.id}-refresh-mb-data"}
|
||||||
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
|
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.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 MB data")}
|
{gettext("Refresh MB data")}
|
||||||
</.dropdown_link>
|
</.dropdown_link>
|
||||||
|
|
||||||
<.dropdown_link
|
<.dropdown_link
|
||||||
id={"actions-#{@record.id}-populate-genres"}
|
id={"actions-#{@record.id}-populate-genres"}
|
||||||
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
||||||
>
|
>
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-sparkles"
|
name="hero-sparkles"
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
data-slot="icon"
|
data-slot="icon"
|
||||||
/>
|
/>
|
||||||
{gettext("Populate genres")}
|
{gettext("Populate genres")}
|
||||||
</.dropdown_link>
|
</.dropdown_link>
|
||||||
|
|
||||||
<.dropdown_link
|
<.dropdown_link
|
||||||
id={"actions-#{@record.id}-extract-colors-fast"}
|
id={"actions-#{@record.id}-extract-colors-fast"}
|
||||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
|
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
|
||||||
>
|
>
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-paint-brush"
|
name="hero-paint-brush"
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
data-slot="icon"
|
data-slot="icon"
|
||||||
/>
|
/>
|
||||||
{gettext("Extract colors (fast)")}
|
{gettext("Extract colors (fast)")}
|
||||||
</.dropdown_link>
|
</.dropdown_link>
|
||||||
|
|
||||||
<.dropdown_link
|
<.dropdown_link
|
||||||
id={"actions-#{@record.id}-extract-colors-slow"}
|
id={"actions-#{@record.id}-extract-colors-slow"}
|
||||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
|
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
|
||||||
>
|
>
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-paint-brush"
|
name="hero-paint-brush"
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
data-slot="icon"
|
data-slot="icon"
|
||||||
/>
|
/>
|
||||||
{gettext("Extract colors (slow)")}
|
{gettext("Extract colors (slow)")}
|
||||||
</.dropdown_link>
|
</.dropdown_link>
|
||||||
|
|
||||||
<.dropdown_separator />
|
<.dropdown_separator />
|
||||||
<.dropdown_link
|
<.dropdown_link
|
||||||
id={"actions-#{@record.id}-delete"}
|
id={"actions-#{@record.id}-delete"}
|
||||||
phx-click={JS.push("delete", value: %{id: @record.id})}
|
phx-click={JS.push("delete", value: %{id: @record.id})}
|
||||||
data-confirm={gettext("Are you sure?")}
|
data-confirm={gettext("Are you sure?")}
|
||||||
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
>
|
>
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-trash"
|
name="hero-trash"
|
||||||
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("Delete")}
|
{gettext("Delete")}
|
||||||
</.dropdown_link>
|
</.dropdown_link>
|
||||||
</.focus_wrap>
|
</.focus_wrap>
|
||||||
</.dropdown>
|
</.dropdown>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 md:mt-8">
|
<div class="mt-4 md:mt-8">
|
||||||
<%!-- TODO: replace with OSS version --%>
|
<%!-- TODO: replace with OSS version --%>
|
||||||
@@ -223,20 +238,6 @@
|
|||||||
:if={@record.selected_release_id}
|
:if={@record.selected_release_id}
|
||||||
release={Records.Record.selected_release(@record)}
|
release={Records.Record.selected_release(@record)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button
|
|
||||||
:if={@record.selected_release_id}
|
|
||||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
|
||||||
phx-click={MusicLibraryWeb.ReleaseComponent.open("release-with-tracks-sheet")}
|
|
||||||
>
|
|
||||||
<span class="sr-only">{gettext("Show Tracks")}</span>
|
|
||||||
<.icon
|
|
||||||
name="hero-numbered-list"
|
|
||||||
class="-mt-1 h-5 w-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user