Use a button group for show record actions

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
@@ -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
@@ -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">
@@ -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>
+25 -25
View File
@@ -17,9 +17,9 @@ msgid "Actions"
msgstr ""
#: lib/music_library_web/live/record_live/index.html.heex:185
#: lib/music_library_web/live/record_live/show.html.heex:14
#: lib/music_library_web/live/record_live/show.html.heex:42
#: lib/music_library_web/live/wishlist_live/index.html.heex:195
#: lib/music_library_web/live/wishlist_live/show.html.heex:14
#: lib/music_library_web/live/wishlist_live/show.html.heex:42
#, elixir-autogen, elixir-format
msgid "Are you sure?"
msgstr ""
@@ -29,12 +29,12 @@ msgstr ""
msgid "Attempting to reconnect"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:132
#: lib/music_library_web/live/record_live/show.html.heex:135
#, elixir-autogen, elixir-format
msgid "Back to records"
msgstr ""
#: lib/music_library_web/live/wishlist_live/show.html.heex:125
#: lib/music_library_web/live/wishlist_live/show.html.heex:128
#, elixir-autogen, elixir-format
msgid "Back to wishlist"
msgstr ""
@@ -62,9 +62,9 @@ msgid "Cover art"
msgstr ""
#: lib/music_library_web/live/record_live/index.html.heex:187
#: lib/music_library_web/live/record_live/show.html.heex:17
#: lib/music_library_web/live/record_live/show.html.heex:48
#: lib/music_library_web/live/wishlist_live/index.html.heex:197
#: lib/music_library_web/live/wishlist_live/show.html.heex:17
#: lib/music_library_web/live/wishlist_live/show.html.heex:48
#, elixir-autogen, elixir-format
msgid "Delete"
msgstr ""
@@ -72,11 +72,11 @@ msgstr ""
#: lib/music_library_web/live/record_live/index.ex:55
#: lib/music_library_web/live/record_live/index.html.heex:176
#: lib/music_library_web/live/record_live/show.ex:72
#: lib/music_library_web/live/record_live/show.html.heex:4
#: lib/music_library_web/live/record_live/show.html.heex:32
#: lib/music_library_web/live/wishlist_live/index.ex:55
#: lib/music_library_web/live/wishlist_live/index.html.heex:176
#: lib/music_library_web/live/wishlist_live/show.ex:70
#: lib/music_library_web/live/wishlist_live/show.html.heex:4
#: lib/music_library_web/live/wishlist_live/show.html.heex:32
#, elixir-autogen, elixir-format
msgid "Edit"
msgstr ""
@@ -105,8 +105,8 @@ msgstr ""
msgid "Formats"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:54
#: lib/music_library_web/live/wishlist_live/show.html.heex:55
#: lib/music_library_web/live/record_live/show.html.heex:57
#: lib/music_library_web/live/wishlist_live/show.html.heex:58
#, elixir-autogen, elixir-format
msgid "Genres"
msgstr ""
@@ -128,8 +128,8 @@ msgstr ""
msgid "Import from MusicBrainz"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:107
#: lib/music_library_web/live/wishlist_live/show.html.heex:100
#: lib/music_library_web/live/record_live/show.html.heex:110
#: lib/music_library_web/live/wishlist_live/show.html.heex:103
#, elixir-autogen, elixir-format
msgid "Inserted at"
msgstr ""
@@ -154,8 +154,8 @@ msgstr ""
msgid "Logout"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:62
#: lib/music_library_web/live/wishlist_live/show.html.heex:63
#: lib/music_library_web/live/record_live/show.html.heex:65
#: lib/music_library_web/live/wishlist_live/show.html.heex:66
#, elixir-autogen, elixir-format
msgid "MusicBrainz ID"
msgstr ""
@@ -204,7 +204,7 @@ msgstr ""
msgid "Purchased at"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:84
#: lib/music_library_web/live/record_live/show.html.heex:87
#, elixir-autogen, elixir-format
msgid "Purchased on"
msgstr ""
@@ -311,8 +311,8 @@ msgstr ""
msgid "Types"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:115
#: lib/music_library_web/live/wishlist_live/show.html.heex:108
#: lib/music_library_web/live/record_live/show.html.heex:118
#: lib/music_library_web/live/wishlist_live/show.html.heex:111
#, elixir-autogen, elixir-format
msgid "Updated at"
msgstr ""
@@ -350,14 +350,14 @@ msgstr ""
msgid "close"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:72
#: lib/music_library_web/live/wishlist_live/show.html.heex:73
#: lib/music_library_web/live/record_live/show.html.heex:75
#: lib/music_library_web/live/wishlist_live/show.html.heex:76
#, elixir-autogen, elixir-format
msgid "Copy MusicBrainz ID to clipboard"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:126
#: lib/music_library_web/live/wishlist_live/show.html.heex:119
#: lib/music_library_web/live/record_live/show.html.heex:129
#: lib/music_library_web/live/wishlist_live/show.html.heex:122
#, elixir-autogen, elixir-format
msgid "MusicBrainz data"
msgstr ""
@@ -390,8 +390,8 @@ msgstr ""
msgid "Number of included records"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:95
#: lib/music_library_web/live/wishlist_live/show.html.heex:88
#: lib/music_library_web/live/record_live/show.html.heex:98
#: lib/music_library_web/live/wishlist_live/show.html.heex:91
#, elixir-autogen, elixir-format
msgid "Includes"
msgstr ""
@@ -408,8 +408,8 @@ msgstr ""
msgid "MusicBrainz data refreshed successfully"
msgstr ""
#: lib/music_library_web/live/record_live/show.html.heex:9
#: lib/music_library_web/live/wishlist_live/show.html.heex:9
#: lib/music_library_web/live/record_live/show.html.heex:37
#: lib/music_library_web/live/wishlist_live/show.html.heex:37
#, elixir-autogen, elixir-format
msgid "Refresh MB Data"
msgstr ""