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

Use a button group for show record actions

Browse Source
This commit is contained in:
Claudio Ortolina
2024-11-16 09:28:52 +00:00
parent 5babccfeb8
commit 67389f6b24
4 changed files with 74 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+1 -1
View File
@@ -242,7 +242,7 @@ defmodule MusicLibraryWeb.CoreComponents do
class={[
"phx-submit-loading:opacity-75 rounded-md py-2 px-3",
"text-sm font-semibold leading-6 ",
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-400",
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
@class
lib/music_library_web/live/record_live/show.html.heex
+24 -21
View File
@@ -1,24 +1,3 @@
<nav class="flex justify-end gap-x-4">
<.link patch={~p"/records/#{@record}/show/edit"} phx-click={JS.push_focus()}>
<.button>
<%= gettext("Edit") %>
</.button>
</.link>
<.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}>
<.button>
<%= gettext("Refresh MB Data") %>
</.button>
</.link>
<.link
phx-click={JS.push("delete", value: %{id: @record.id})}
data-confirm={gettext("Are you sure?")}
>
<.button class="!bg-red-900 hover:!bg-red-700 dark:text-white">
<%= gettext("Delete") %>
</.button>
</.link>
</nav>
<div class="md:columns-2 mt-4 px-4">
<div class="drop-shadow">
<img
@@ -46,6 +25,30 @@
@record.format
) %> · <%= Records.Record.type_long_label(@record.type) %>
</p>
<nav class="mt-5 isolate inline-flex rounded-md shadow-sm">
<.link patch={~p"/records/#{@record}/show/edit"} phx-click={JS.push_focus()}>
<.button type="button" class="relative inline-flex items-center rounded-r-none">
<%= gettext("Edit") %>
</.button>
</.link>
<.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}>
<.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
<%= gettext("Refresh MB Data") %>
</.button>
</.link>
<.link
phx-click={JS.push("delete", value: %{id: @record.id})}
data-confirm={gettext("Are you sure?")}
>
<.button
type="button"
class="relative -ml-px inline-flex items-center rounded-l-none !text-red-600 hover:!text-red-500 dark:!text-red-700 hover:dark:!text-red-500"
>
<%= gettext("Delete") %>
</.button>
</.link>
</nav>
</div>
<div>
<dl class="mt-4 divide-y divide-zinc-100 dark:divide-slate-300/30">
lib/music_library_web/live/wishlist_live/show.html.heex
+24 -21
View File
@@ -1,24 +1,3 @@
<nav class="flex justify-end gap-x-4">
<.link patch={~p"/wishlist/#{@record}/show/edit"} phx-click={JS.push_focus()}>
<.button>
<%= gettext("Edit") %>
</.button>
</.link>
<.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}>
<.button>
<%= gettext("Refresh MB Data") %>
</.button>
</.link>
<.link
phx-click={JS.push("delete", value: %{id: @record.id})}
data-confirm={gettext("Are you sure?")}
>
<.button class="!bg-red-900 hover:!bg-red-700 dark:text-white">
<%= gettext("Delete") %>
</.button>
</.link>
</nav>
<div class="md:columns-2 mt-4 px-4">
<div class="drop-shadow">
<img
@@ -46,6 +25,30 @@
@record.format
) %> · <%= Records.Record.type_long_label(@record.type) %>
</p>
<nav class="mt-5 isolate inline-flex rounded-md shadow-sm">
<.link patch={~p"/wishlist/#{@record}/show/edit"} phx-click={JS.push_focus()}>
<.button type="button" class="relative inline-flex items-center rounded-r-none">
<%= gettext("Edit") %>
</.button>
</.link>
<.link phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}>
<.button type="button" class="relative -ml-px inline-flex items-center rounded-none">
<%= gettext("Refresh MB Data") %>
</.button>
</.link>
<.link
phx-click={JS.push("delete", value: %{id: @record.id})}
data-confirm={gettext("Are you sure?")}
>
<.button
type="button"
class="relative -ml-px inline-flex items-center rounded-l-none !text-red-600 hover:!text-red-500 dark:!text-red-700 hover:dark:!text-red-500"
>
<%= gettext("Delete") %>
</.button>
</.link>
</nav>
</div>
<div>