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>
<.icon
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"
data-slot="icon"
/>
lib/music_library_web/components/layouts/app.html.heex
+77 -68
View File
@@ -46,74 +46,83 @@
</.nav_link>
</div>
</div>
<div class="flex space-x-2 md:space-x-4 items-center">
<.universal_search_trigger />
<.dropdown placement="bottom-end">
<:toggle>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
</:toggle>
<.dropdown_link href={~p"/scrobbled-tracks"}>
<.icon
name="hero-musical-note"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobbled Tracks")}
</.dropdown_link>
<.dropdown_link href={~p"/scrobble-rules"}>
<.icon
name="hero-adjustments-horizontal"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobble Rules")}
</.dropdown_link>
<.dropdown_link href={~p"/online-store-templates"}>
<.icon
name="hero-building-storefront"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Online Store Templates")}
</.dropdown_link>
<.dropdown_link href={~p"/backup"}>
<.icon
name="hero-archive-box-arrow-down"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Backup")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/dev/dashboard"}>
<.icon name="hero-chart-bar" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Live Dashboard")}
</.dropdown_link>
<.dropdown_link href={~p"/dev/oban"}>
<.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Oban")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/login"}>
<.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>
<div class="flex items-center">
<.button_group>
<.universal_search_trigger />
<.dropdown 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>
<.dropdown_link href={~p"/scrobbled-tracks"}>
<.icon
name="hero-musical-note"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobbled Tracks")}
</.dropdown_link>
<.dropdown_link href={~p"/scrobble-rules"}>
<.icon
name="hero-adjustments-horizontal"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobble Rules")}
</.dropdown_link>
<.dropdown_link href={~p"/online-store-templates"}>
<.icon
name="hero-building-storefront"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Online Store Templates")}
</.dropdown_link>
<.dropdown_link href={~p"/backup"}>
<.icon
name="hero-archive-box-arrow-down"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Backup")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/dev/dashboard"}>
<.icon
name="hero-chart-bar"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Live Dashboard")}
</.dropdown_link>
<.dropdown_link href={~p"/dev/oban"}>
<.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Oban")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link href={~p"/login"}>
<.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>
lib/music_library_web/components/record_components.ex
+18 -15
View File
@@ -102,7 +102,7 @@ defmodule MusicLibraryWeb.RecordComponents do
</span>
<.icon
name="hero-banknotes"
class="-mt-1 h-4 w-4"
class="h-4 w-4"
aria-hidden="true"
data-slot="icon"
/>
@@ -113,7 +113,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<span class="sr-only">
{gettext("Wishlisted on")}
</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)}
</span>
</p>
@@ -128,31 +128,32 @@ defmodule MusicLibraryWeb.RecordComponents do
<span class="sr-only">
{gettext("Purchased on")}
</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)}
</p>
<p :if={!record.purchased_at} class="text-xs leading-6 text-zinc-900 dark:text-zinc-300">
<span class="sr-only">
{gettext("Wishlisted on")}
</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)}
</p>
</div>
<.dropdown id={"actions-#{record.id}"} placement="bottom-end">
<:toggle>
<div
<.button
variant="ghost"
phx-click={JS.toggle_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>
<.icon
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"
data-slot="icon"
/>
</div>
</.button>
</:toggle>
<.focus_wrap id={"actions-#{record.id}-focus-wrap"} class="pointer-events-auto">
<.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">
{record.title}
</p>
<.dropdown id={"actions-#{record.id}"} placement="bottom-end" class="mt-2">
<.dropdown id={"actions-#{record.id}"} placement="bottom-end">
<:toggle>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<.button variant="ghost" class="mt-2">
<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={@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">
<.icon
name="hero-exclamation-triangle"
class="-mt-1 mr-1 h-5 w-5"
class="h-5 w-5"
aria-hidden="true"
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")}
>
<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>
"""
end
lib/music_library_web/components/stats_components.ex
+1 -1
View File
@@ -186,7 +186,7 @@ defmodule MusicLibraryWeb.StatsComponents do
</span>
<.icon
name="hero-banknotes"
class="-mt-1 h-4 w-4"
class="h-4 w-4"
aria-hidden="true"
data-slot="icon"
/>
lib/music_library_web/live/artist_live/show.html.heex
+9 -7
View File
@@ -22,13 +22,15 @@
</button>
<.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
<:toggle>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<.button variant="ghost">
<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-#{@artist.musicbrainz_id}-focus-wrap"}>
<.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">
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
</h1>
<div class="min-w-12 border-0 space-x-2 md:space-x-0">
<button
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
phx-click={MusicLibraryWeb.Components.Notes.open("record-notes-sheet")}
>
<span class="sr-only">{gettext("Open Notes")}</span>
<.icon
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>
<div class="min-w-12">
<.button_group>
<.button
variant="soft"
phx-click={MusicLibraryWeb.Components.Notes.open("record-notes-sheet")}
>
<span class="sr-only">{gettext("Open Notes")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
name="hero-pencil-square"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</: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>
</.button>
<.button
:if={@record.selected_release_id}
variant="soft"
phx-click={MusicLibraryWeb.Components.Release.open("release-with-tracks-sheet")}
>
<span class="sr-only">{gettext("Show Tracks")}</span>
<.icon
name="hero-numbered-list"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
</.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
id={"actions-#{@record.id}-refresh-cover"}
phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
>
<.icon
name="hero-photo"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Refresh cover")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-refresh-cover"}
phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
>
<.icon
name="hero-photo"
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Refresh cover")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-refresh-mb-data"}
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
>
<.icon
name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Refresh MB data")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-refresh-mb-data"}
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
>
<.icon
name="hero-arrow-path"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Refresh MB data")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-populate-genres"}
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
>
<.icon
name="hero-sparkles"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Populate genres")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-populate-genres"}
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
>
<.icon
name="hero-sparkles"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Populate genres")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-extract-colors-fast"}
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
>
<.icon
name="hero-paint-brush"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Extract colors (fast)")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-extract-colors-fast"}
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
>
<.icon
name="hero-paint-brush"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Extract colors (fast)")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-extract-colors-slow"}
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
>
<.icon
name="hero-paint-brush"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Extract colors (slow)")}
</.dropdown_link>
<.dropdown_link
id={"actions-#{@record.id}-extract-colors-slow"}
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
>
<.icon
name="hero-paint-brush"
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Extract colors (slow)")}
</.dropdown_link>
<.dropdown_separator />
<.dropdown_link
id={"actions-#{@record.id}-delete"}
phx-click={JS.push("delete", value: %{id: @record.id})}
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!"
>
<.icon
name="hero-trash"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Delete")}
</.dropdown_link>
</.focus_wrap>
</.dropdown>
<.dropdown_separator />
<.dropdown_link
id={"actions-#{@record.id}-delete"}
phx-click={JS.push("delete", value: %{id: @record.id})}
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!"
>
<.icon
name="hero-trash"
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Delete")}
</.dropdown_link>
</.focus_wrap>
</.dropdown>
</.button_group>
</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">
<.dropdown id={"actions-#{template.id}"} placement="bottom-end">
<:toggle>
<div>
<.button variant="ghost">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
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"
data-slot="icon"
/>
</div>
</.button>
</:toggle>
<.dropdown_button phx-click="toggle-enabled" phx-value-id={template.id}>
{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")}
</span>
</div>
<div class="flex items-center">
<div class="flex items-center p-2">
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
<:toggle>
<div>
<.button variant="ghost">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
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"
data-slot="icon"
/>
</div>
</.button>
</:toggle>
<.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
{gettext("Apply rule")}
lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+3 -3
View File
@@ -168,15 +168,15 @@
</.dropdown>
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
<:toggle>
<div>
<.button variant="ghost">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
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"
data-slot="icon"
/>
</div>
</.button>
</:toggle>
<.dropdown_link patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}>
{gettext("Edit")}
lib/music_library_web/live/stats_live/index.html.heex
+25 -21
View File
@@ -137,7 +137,7 @@
<.tooltip>
<.icon
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"
data-slot="icon"
/>
@@ -163,7 +163,7 @@
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -190,7 +190,7 @@
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -235,13 +235,15 @@
placement="bottom-end"
>
<:toggle>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-star"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<.button variant="ghost">
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-star"
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-#{album.scrobbled_at_uts}-albums-focus-wrap"}>
<.dropdown_link
@@ -326,7 +328,7 @@
<.tooltip>
<.icon
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"
data-slot="icon"
/>
@@ -352,7 +354,7 @@
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -379,7 +381,7 @@
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -406,7 +408,7 @@
</span>
<.icon
name="hero-clipboard-document"
class="-mt-1 h-5 w-5"
class="h-5 w-5"
aria-hidden="true"
data-slot="icon"
/>
@@ -446,13 +448,15 @@
placement="bottom-end"
>
<:toggle>
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-star"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<.button variant="ghost">
<span class="sr-only">{gettext("Choose which format to import")}</span>
<.icon
name="hero-star"
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-#{track.scrobbled_at_uts}-tracks-focus-wrap"}>
<.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>
<.button
id="universal-search-button"
variant="ghost"
variant="soft"
title={gettext("Search (Cmd/Ctrl+K)")}
phx-click="open_modal"
phx-target="#universal-search"
lib/music_library_web/live/wishlist_live/show.html.heex
+9 -7
View File
@@ -14,13 +14,15 @@
</h1>
<.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
<:toggle class="h-5 block">
<span class="sr-only">{gettext("Actions")}</span>
<.icon
name="hero-ellipsis-vertical"
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
<.button variant="ghost">
<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