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

Standardize all icon-based actions to buttons

Browse Source 
Use a combination of ghost and soft, with button groups where
appropriate. Also remove unnecessary negative margins, and pad around
for ease of use on mobile.
This commit is contained in:
Claudio Ortolina
2025-10-17 20:02:04 +01:00
parent 8d01980c87
commit f4727bdcbd
14 changed files with 279 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/add_record.ex
+1 -1
View File
@@ -95,7 +95,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
<span class="sr-only">{gettext("Choose which format to import")}</span> <span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon <.icon
name="hero-plus" name="hero-plus"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="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"
/> />
lib/music_library_web/components/layouts/app.html.heex
+77 -68
View File
@@ -46,74 +46,83 @@
</.nav_link> </.nav_link>
</div> </div>
</div> </div>
<div class="flex space-x-2 md:space-x-4 items-center"> <div class="flex items-center">
<.universal_search_trigger /> <.button_group>
<.dropdown placement="bottom-end"> <.universal_search_trigger />
<:toggle> <.dropdown placement="bottom-end">
<span class="sr-only">{gettext("Actions")}</span> <:toggle>
<.icon <.button variant="soft">
name="hero-ellipsis-vertical" <span class="sr-only">{gettext("Actions")}</span>
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" <.icon
aria-hidden="true" name="hero-ellipsis-vertical"
data-slot="icon" class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
/> aria-hidden="true"
</:toggle> data-slot="icon"
<.dropdown_link href={~p"/scrobbled-tracks"}> />
<.icon </.button>
name="hero-musical-note" </:toggle>
class="h-4 w-4 mr-2" <.dropdown_link href={~p"/scrobbled-tracks"}>
aria-hidden="true" <.icon
data-slot="icon" name="hero-musical-note"
/> class="h-4 w-4 mr-2"
{gettext("Scrobbled Tracks")} aria-hidden="true"
</.dropdown_link> data-slot="icon"
<.dropdown_link href={~p"/scrobble-rules"}> />
<.icon {gettext("Scrobbled Tracks")}
name="hero-adjustments-horizontal" </.dropdown_link>
class="h-4 w-4 mr-2" <.dropdown_link href={~p"/scrobble-rules"}>
aria-hidden="true" <.icon
data-slot="icon" name="hero-adjustments-horizontal"
/> class="h-4 w-4 mr-2"
{gettext("Scrobble Rules")} aria-hidden="true"
</.dropdown_link> data-slot="icon"
<.dropdown_link href={~p"/online-store-templates"}> />
<.icon {gettext("Scrobble Rules")}
name="hero-building-storefront" </.dropdown_link>
class="h-4 w-4 mr-2" <.dropdown_link href={~p"/online-store-templates"}>
aria-hidden="true" <.icon
data-slot="icon" name="hero-building-storefront"
/> class="h-4 w-4 mr-2"
{gettext("Online Store Templates")} aria-hidden="true"
</.dropdown_link> data-slot="icon"
<.dropdown_link href={~p"/backup"}> />
<.icon {gettext("Online Store Templates")}
name="hero-archive-box-arrow-down" </.dropdown_link>
class="h-4 w-4 mr-2" <.dropdown_link href={~p"/backup"}>
aria-hidden="true" <.icon
data-slot="icon" name="hero-archive-box-arrow-down"
/> class="h-4 w-4 mr-2"
{gettext("Backup")} aria-hidden="true"
</.dropdown_link> data-slot="icon"
<.dropdown_separator /> />
<.dropdown_link href={~p"/dev/dashboard"}> {gettext("Backup")}
<.icon name="hero-chart-bar" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" /> </.dropdown_link>
{gettext("Live Dashboard")} <.dropdown_separator />
</.dropdown_link> <.dropdown_link href={~p"/dev/dashboard"}>
<.dropdown_link href={~p"/dev/oban"}> <.icon
<.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" /> name="hero-chart-bar"
{gettext("Oban")} class="h-4 w-4 mr-2"
</.dropdown_link> aria-hidden="true"
<.dropdown_separator /> data-slot="icon"
<.dropdown_link href={~p"/login"}> />
<.icon {gettext("Live Dashboard")}
name="hero-arrow-left-start-on-rectangle" </.dropdown_link>
class="h-4 w-4 mr-2" <.dropdown_link href={~p"/dev/oban"}>
aria-hidden="true" <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
data-slot="icon" {gettext("Oban")}
/> </.dropdown_link>
{gettext("Logout")} <.dropdown_separator />
</.dropdown_link> <.dropdown_link href={~p"/login"}>
</.dropdown> <.icon
name="hero-arrow-left-start-on-rectangle"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Logout")}
</.dropdown_link>
</.dropdown>
</.button_group>
</div> </div>
</div> </div>
</div> </div>
lib/music_library_web/components/record_components.ex
+18 -15
View File
@@ -102,7 +102,7 @@ defmodule MusicLibraryWeb.RecordComponents do
</span> </span>
<.icon <.icon
name="hero-banknotes" name="hero-banknotes"
class="-mt-1 h-4 w-4" class="h-4 w-4"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -113,7 +113,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<span class="sr-only"> <span class="sr-only">
{gettext("Wishlisted on")} {gettext("Wishlisted on")}
</span> </span>
<.icon name="hero-star" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-star" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.inserted_at)} {Records.Record.format_as_date(record.inserted_at)}
</span> </span>
</p> </p>
@@ -128,31 +128,32 @@ defmodule MusicLibraryWeb.RecordComponents do
<span class="sr-only"> <span class="sr-only">
{gettext("Purchased on")} {gettext("Purchased on")}
</span> </span>
<.icon name="hero-banknotes" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-banknotes" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.purchased_at)} {Records.Record.format_as_date(record.purchased_at)}
</p> </p>
<p :if={!record.purchased_at} class="text-xs leading-6 text-zinc-900 dark:text-zinc-300"> <p :if={!record.purchased_at} class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
<span class="sr-only"> <span class="sr-only">
{gettext("Wishlisted on")} {gettext("Wishlisted on")}
</span> </span>
<.icon name="hero-star" class="-mt-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-star" class="h-4 w-4" aria-hidden="true" data-slot="icon" />
{Records.Record.format_as_date(record.inserted_at)} {Records.Record.format_as_date(record.inserted_at)}
</p> </p>
</div> </div>
<.dropdown id={"actions-#{record.id}"} placement="bottom-end"> <.dropdown id={"actions-#{record.id}"} placement="bottom-end">
<:toggle> <:toggle>
<div <.button
variant="ghost"
phx-click={JS.toggle_class("pointer-events-none", to: "#records > li")} phx-click={JS.toggle_class("pointer-events-none", to: "#records > li")}
phx-click-away={JS.remove_class("pointer-events-none", to: "#records > li")} phx-click-away={JS.remove_class("pointer-events-none", to: "#records > li")}
> >
<span class="sr-only">{gettext("Actions")}</span> <span class="sr-only">{gettext("Actions")}</span>
<.icon <.icon
name="hero-ellipsis-vertical" name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="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"
/> />
</div> </.button>
</:toggle> </:toggle>
<.focus_wrap id={"actions-#{record.id}-focus-wrap"} class="pointer-events-auto"> <.focus_wrap id={"actions-#{record.id}-focus-wrap"} class="pointer-events-auto">
<.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}> <.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}>
@@ -246,15 +247,17 @@ defmodule MusicLibraryWeb.RecordComponents do
<p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300"> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
{record.title} {record.title}
</p> </p>
<.dropdown id={"actions-#{record.id}"} placement="bottom-end" class="mt-2"> <.dropdown id={"actions-#{record.id}"} placement="bottom-end">
<:toggle> <:toggle>
<span class="sr-only">{gettext("Actions")}</span> <.button variant="ghost" class="mt-2">
<.icon <span class="sr-only">{gettext("Actions")}</span>
name="hero-ellipsis-vertical" <.icon
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" name="hero-ellipsis-vertical"
aria-hidden="true" class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
/>
</.button>
</:toggle> </:toggle>
<.focus_wrap id={"actions-#{record.id}-focus-wrap"}> <.focus_wrap id={"actions-#{record.id}-focus-wrap"}>
<.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}> <.dropdown_link id={"actions-#{record.id}-edit"} patch={@record_edit_path.(record)}>
lib/music_library_web/components/release.ex
+1 -1
View File
@@ -69,7 +69,7 @@ defmodule MusicLibraryWeb.Components.Release do
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"> <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
<.icon <.icon
name="hero-exclamation-triangle" name="hero-exclamation-triangle"
class="-mt-1 mr-1 h-5 w-5" class="h-5 w-5"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
lib/music_library_web/components/scrobble_components.ex
+1 -1
View File
@@ -13,7 +13,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents do
phx-click={JS.push("refresh_lastfm_feed")} phx-click={JS.push("refresh_lastfm_feed")}
> >
<span class="sr-only">{gettext("Refresh LastFm Feed")}</span> <span class="sr-only">{gettext("Refresh LastFm Feed")}</span>
<.icon name="hero-arrow-path" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" /> <.icon name="hero-arrow-path" class="h-5 w-5" aria-hidden="true" data-slot="icon" />
</button> </button>
""" """
end end
lib/music_library_web/components/stats_components.ex
+1 -1
View File
@@ -186,7 +186,7 @@ defmodule MusicLibraryWeb.StatsComponents do
</span> </span>
<.icon <.icon
name="hero-banknotes" name="hero-banknotes"
class="-mt-1 h-4 w-4" class="h-4 w-4"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
lib/music_library_web/live/artist_live/show.html.heex
+9 -7
View File
@@ -22,13 +22,15 @@
</button> </button>
<.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end"> <.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
<:toggle> <:toggle>
<span class="sr-only">{gettext("Actions")}</span> <.button variant="ghost">
<.icon <span class="sr-only">{gettext("Actions")}</span>
name="hero-ellipsis-vertical" <.icon
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" name="hero-ellipsis-vertical"
aria-hidden="true" class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
/>
</.button>
</:toggle> </:toggle>
<.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}> <.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
<.dropdown_link <.dropdown_link
lib/music_library_web/live/collection_live/show.html.heex
+126 -122
View File
@@ -12,138 +12,142 @@
<h1 class="text-base font-medium leading-6 text-zinc-700"> <h1 class="text-base font-medium leading-6 text-zinc-700">
<.artist_links joinphrase_class="text-sm" artists={@record.artists} /> <.artist_links joinphrase_class="text-sm" artists={@record.artists} />
</h1> </h1>
<div class="min-w-12 border-0 space-x-2 md:space-x-0"> <div class="min-w-12">
<button <.button_group>
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300" <.button
phx-click={MusicLibraryWeb.Components.Notes.open("record-notes-sheet")} variant="soft"
> phx-click={MusicLibraryWeb.Components.Notes.open("record-notes-sheet")}
<span class="sr-only">{gettext("Open Notes")}</span> >
<.icon <span class="sr-only">{gettext("Open Notes")}</span>
name="hero-pencil-square"
class="-mt-1 h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</button>
<button
:if={@record.selected_release_id}
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
phx-click={MusicLibraryWeb.Components.Release.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>
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
<:toggle class="h-5 block">
<span class="sr-only">{gettext("Actions")}</span>
<.icon <.icon
name="hero-ellipsis-vertical" name="hero-pencil-square"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="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"}> <.button
<.dropdown_link :if={@record.selected_release_id}
id={"actions-#{@record.id}-edit"} variant="soft"
patch={~p"/collection/#{@record}/show/edit"} phx-click={MusicLibraryWeb.Components.Release.open("release-with-tracks-sheet")}
> >
<.icon <span class="sr-only">{gettext("Show Tracks")}</span>
name="hero-pencil-square" <.icon
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce" name="hero-numbered-list"
aria-hidden="true" class="h-5 w-5"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
{gettext("Edit")} />
</.dropdown_link> </.button>
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
<:toggle>
<.button variant="soft">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</.button>
</:toggle>
<.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>
</.button_group>
</div> </div>
</div> </div>
<div> <div>
lib/music_library_web/live/online_store_template_live/index.html.heex
+3 -3
View File
@@ -53,15 +53,15 @@
<div class="flex items-center"> <div class="flex items-center">
<.dropdown id={"actions-#{template.id}"} placement="bottom-end"> <.dropdown id={"actions-#{template.id}"} placement="bottom-end">
<:toggle> <:toggle>
<div> <.button variant="ghost">
<span class="sr-only">{gettext("Actions")}</span> <span class="sr-only">{gettext("Actions")}</span>
<.icon <.icon
name="hero-ellipsis-vertical" name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="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"
/> />
</div> </.button>
</:toggle> </:toggle>
<.dropdown_button phx-click="toggle-enabled" phx-value-id={template.id}> <.dropdown_button phx-click="toggle-enabled" phx-value-id={template.id}>
{if template.enabled, {if template.enabled,
lib/music_library_web/live/scrobble_rules_live/index.html.heex
+4 -4
View File
@@ -58,18 +58,18 @@
{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")} {Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
</span> </span>
</div> </div>
<div class="flex items-center"> <div class="flex items-center p-2">
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end"> <.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
<:toggle> <:toggle>
<div> <.button variant="ghost">
<span class="sr-only">{gettext("Actions")}</span> <span class="sr-only">{gettext("Actions")}</span>
<.icon <.icon
name="hero-ellipsis-vertical" name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="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"
/> />
</div> </.button>
</:toggle> </:toggle>
<.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}> <.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
{gettext("Apply rule")} {gettext("Apply rule")}
lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+3 -3
View File
@@ -168,15 +168,15 @@
</.dropdown> </.dropdown>
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end"> <.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
<:toggle> <:toggle>
<div> <.button variant="ghost">
<span class="sr-only">{gettext("Actions")}</span> <span class="sr-only">{gettext("Actions")}</span>
<.icon <.icon
name="hero-ellipsis-vertical" name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="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"
/> />
</div> </.button>
</:toggle> </:toggle>
<.dropdown_link patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}> <.dropdown_link patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}>
{gettext("Edit")} {gettext("Edit")}
lib/music_library_web/live/stats_live/index.html.heex
+25 -21
View File
@@ -137,7 +137,7 @@
<.tooltip> <.tooltip>
<.icon <.icon
name="hero-information-circle" name="hero-information-circle"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="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"
/> />
@@ -163,7 +163,7 @@
</span> </span>
<.icon <.icon
name="hero-clipboard-document" name="hero-clipboard-document"
class="-mt-1 h-5 w-5" class="h-5 w-5"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -190,7 +190,7 @@
</span> </span>
<.icon <.icon
name="hero-clipboard-document" name="hero-clipboard-document"
class="-mt-1 h-5 w-5" class="h-5 w-5"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -235,13 +235,15 @@
placement="bottom-end" placement="bottom-end"
> >
<:toggle> <:toggle>
<span class="sr-only">{gettext("Choose which format to import")}</span> <.button variant="ghost">
<.icon <span class="sr-only">{gettext("Choose which format to import")}</span>
name="hero-star" <.icon
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" name="hero-star"
aria-hidden="true" class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
/>
</.button>
</:toggle> </:toggle>
<.focus_wrap id={"actions-#{album.scrobbled_at_uts}-albums-focus-wrap"}> <.focus_wrap id={"actions-#{album.scrobbled_at_uts}-albums-focus-wrap"}>
<.dropdown_link <.dropdown_link
@@ -326,7 +328,7 @@
<.tooltip> <.tooltip>
<.icon <.icon
name="hero-information-circle" name="hero-information-circle"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="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"
/> />
@@ -352,7 +354,7 @@
</span> </span>
<.icon <.icon
name="hero-clipboard-document" name="hero-clipboard-document"
class="-mt-1 h-5 w-5" class="h-5 w-5"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -379,7 +381,7 @@
</span> </span>
<.icon <.icon
name="hero-clipboard-document" name="hero-clipboard-document"
class="-mt-1 h-5 w-5" class="h-5 w-5"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -406,7 +408,7 @@
</span> </span>
<.icon <.icon
name="hero-clipboard-document" name="hero-clipboard-document"
class="-mt-1 h-5 w-5" class="h-5 w-5"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -446,13 +448,15 @@
placement="bottom-end" placement="bottom-end"
> >
<:toggle> <:toggle>
<span class="sr-only">{gettext("Choose which format to import")}</span> <.button variant="ghost">
<.icon <span class="sr-only">{gettext("Choose which format to import")}</span>
name="hero-star" <.icon
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" name="hero-star"
aria-hidden="true" class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
/>
</.button>
</:toggle> </:toggle>
<.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}> <.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}>
<.dropdown_link <.dropdown_link
lib/music_library_web/live/universal_search_live/index.ex
+1 -1
View File
@@ -30,7 +30,7 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
</script> </script>
<.button <.button
id="universal-search-button" id="universal-search-button"
variant="ghost" variant="soft"
title={gettext("Search (Cmd/Ctrl+K)")} title={gettext("Search (Cmd/Ctrl+K)")}
phx-click="open_modal" phx-click="open_modal"
phx-target="#universal-search" phx-target="#universal-search"
lib/music_library_web/live/wishlist_live/show.html.heex
+9 -7
View File
@@ -14,13 +14,15 @@
</h1> </h1>
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end"> <.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
<:toggle class="h-5 block"> <:toggle class="h-5 block">
<span class="sr-only">{gettext("Actions")}</span> <.button variant="ghost">
<.icon <span class="sr-only">{gettext("Actions")}</span>
name="hero-ellipsis-vertical" <.icon
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" name="hero-ellipsis-vertical"
aria-hidden="true" class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
data-slot="icon" aria-hidden="true"
/> data-slot="icon"
/>
</.button>
</:toggle> </:toggle>
<.focus_wrap id={"actions-#{@record.id}-focus-wrap"}> <.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
<.dropdown_link <.dropdown_link