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

Autosize all icon buttons

Browse Source
This commit is contained in:
Claudio Ortolina
2026-03-16 15:09:05 +00:00
parent 62359092d8
commit a459666126
13 changed files with 43 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+13 -8
View File
@@ -19,6 +19,7 @@ defmodule MusicLibraryWeb.CoreComponents do
alias Phoenix.LiveView.JS alias Phoenix.LiveView.JS
import Fluxon.Components.Button
import Fluxon.Components.Input import Fluxon.Components.Input
import Fluxon.Components.Sheet import Fluxon.Components.Sheet
import Fluxon.Components.Tabs import Fluxon.Components.Tabs
@@ -181,7 +182,7 @@ defmodule MusicLibraryWeb.CoreComponents do
{gettext("External Links")} {gettext("External Links")}
</summary> </summary>
<div class="mt-4 space-y-2"> <div class="mt-4 space-y-2">
<Fluxon.Components.Button.button <.button
:for={external_link <- @external_links} :for={external_link <- @external_links}
href={external_link.url} href={external_link.url}
target="_blank" target="_blank"
@@ -199,7 +200,7 @@ defmodule MusicLibraryWeb.CoreComponents do
<span class="text-sm font-medium text-zinc-900 dark:text-white"> <span class="text-sm font-medium text-zinc-900 dark:text-white">
{external_link.name} {external_link.name}
</span> </span>
</Fluxon.Components.Button.button> </.button>
</div> </div>
</details> </details>
""" """
@@ -215,13 +216,17 @@ defmodule MusicLibraryWeb.CoreComponents do
def copy_to_clipboard(assigns) do def copy_to_clipboard(assigns) do
~H""" ~H"""
<button phx-click={ <.button
JS.dispatch("music_library:clipcopy", to: "#" <> @target_id) variant="ghost"
|> JS.transition("animate-shake") size="sm"
}> phx-click={
JS.dispatch("music_library:clipcopy", to: "#" <> @target_id)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">{@label}</span> <span class="sr-only">{@label}</span>
<.icon name="hero-clipboard-document" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" /> <.icon name="hero-clipboard-document" class="icon -mt-1" aria-hidden="true" data-slot="icon" />
</button> </.button>
""" """
end end
lib/music_library_web/components/layouts/app.html.heex
+1 -1
View File
@@ -67,7 +67,7 @@
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon 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/record_components.ex
+6 -6
View File
@@ -162,7 +162,7 @@ defmodule MusicLibraryWeb.RecordComponents do
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -376,7 +376,7 @@ defmodule MusicLibraryWeb.RecordComponents do
~H""" ~H"""
<div class={[ <div class={[
@class, @class,
"grid grid-cols-2 w-full auto-cols-min space-x-1 text-zinc-700 dark:text-zinc-300" "grid grid-cols-2 w-full auto-cols-min items-center space-x-1 text-zinc-700 dark:text-zinc-300"
]}> ]}>
<div class="space-x-1"> <div class="space-x-1">
<.format_badge release={@release} /> <.format_badge release={@release} />
@@ -608,7 +608,7 @@ defmodule MusicLibraryWeb.RecordComponents do
variant="ghost" variant="ghost"
size="xs" size="xs"
> >
<.icon name="hero-arrow-top-right-on-square" class="h-3.5 w-3.5" aria-hidden="true" /> <.icon name="hero-arrow-top-right-on-square" class="icon" aria-hidden="true" />
{gettext("MusicBrainz")} {gettext("MusicBrainz")}
</.button> </.button>
<.button <.button
@@ -619,7 +619,7 @@ defmodule MusicLibraryWeb.RecordComponents do
|> JS.transition("animate-shake") |> JS.transition("animate-shake")
} }
> >
<.icon name="hero-clipboard-document" class="h-3.5 w-3.5" aria-hidden="true" /> <.icon name="hero-clipboard-document" class="icon" aria-hidden="true" />
{gettext("Copy ID")} {gettext("Copy ID")}
</.button> </.button>
<.button <.button
@@ -630,7 +630,7 @@ defmodule MusicLibraryWeb.RecordComponents do
|> JS.transition("animate-shake") |> JS.transition("animate-shake")
} }
> >
<.icon name="hero-clipboard-document" class="h-3.5 w-3.5" aria-hidden="true" /> <.icon name="hero-clipboard-document" class="icon" aria-hidden="true" />
{gettext("Copy MB ID")} {gettext("Copy MB ID")}
</.button> </.button>
</div> </div>
@@ -669,7 +669,7 @@ defmodule MusicLibraryWeb.RecordComponents do
</span> </span>
<.icon <.icon
name="hero-magnifying-glass-plus" name="hero-magnifying-glass-plus"
class="-mt-1 h-5 w-5" class="icon -mt-1"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
lib/music_library_web/components/release.ex
+5 -5
View File
@@ -79,7 +79,7 @@ defmodule MusicLibraryWeb.Components.Release do
phx-target={@myself} phx-target={@myself}
> >
<span class="sr-only">{gettext("Print tracklist")}</span> <span class="sr-only">{gettext("Print tracklist")}</span>
<.icon name="hero-printer" class="h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-printer" class="icon" aria-hidden="true" data-slot="icon" />
</.button> </.button>
<.button <.button
:if={@can_scrobble? && @release_with_tracks.ok?} :if={@can_scrobble? && @release_with_tracks.ok?}
@@ -95,11 +95,11 @@ defmodule MusicLibraryWeb.Components.Release do
phx-disable-with={gettext("Scrobbling...")} phx-disable-with={gettext("Scrobbling...")}
> >
<span class="sr-only">{scrobble_button_label(@selected_tracks)}</span> <span class="sr-only">{scrobble_button_label(@selected_tracks)}</span>
<.icon name="hero-play" class="h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-play" class="icon" aria-hidden="true" data-slot="icon" />
</.button> </.button>
<.button :if={!@can_scrobble?} variant="soft" size="sm" href={LastFm.auth_url()}> <.button :if={!@can_scrobble?} variant="soft" size="sm" href={LastFm.auth_url()}>
<span class="sr-only">{gettext("Connect your Last.fm account")}</span> <span class="sr-only">{gettext("Connect your Last.fm account")}</span>
<.icon name="hero-link" class="h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-link" class="icon" aria-hidden="true" data-slot="icon" />
</.button> </.button>
</.button_group> </.button_group>
</div> </div>
@@ -190,7 +190,7 @@ defmodule MusicLibraryWeb.Components.Release do
phx-target={@myself} phx-target={@myself}
> >
<span class="sr-only">{gettext("Print tracklist")}</span> <span class="sr-only">{gettext("Print tracklist")}</span>
<.icon name="hero-printer" class="h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-printer" class="icon" aria-hidden="true" data-slot="icon" />
</.button> </.button>
<.button <.button
:if={@can_scrobble?} :if={@can_scrobble?}
@@ -203,7 +203,7 @@ defmodule MusicLibraryWeb.Components.Release do
phx-disable-with={gettext("Scrobbling...")} phx-disable-with={gettext("Scrobbling...")}
> >
<span class="sr-only">{medium_scrobble_label(@medium.format)}</span> <span class="sr-only">{medium_scrobble_label(@medium.format)}</span>
<.icon name="hero-play" class="h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-play" class="icon" aria-hidden="true" data-slot="icon" />
</.button> </.button>
</.button_group> </.button_group>
</div> </div>
lib/music_library_web/components/scrobble_components.ex
+1 -1
View File
@@ -162,7 +162,7 @@ defmodule MusicLibraryWeb.ScrobbleComponents 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-star" name="hero-star"
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon 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/live/artist_live/show.ex
+6 -6
View File
@@ -104,7 +104,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<span class="sr-only">{gettext("Open Notes")}</span> <span class="sr-only">{gettext("Open Notes")}</span>
<.icon <.icon
name="hero-pencil" name="hero-pencil"
class="h-5 w-5" class="icon"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -116,7 +116,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<span class="sr-only">{gettext("Chat about artist")}</span> <span class="sr-only">{gettext("Chat about artist")}</span>
<.icon <.icon
name="hero-chat-bubble-left-right" name="hero-chat-bubble-left-right"
class="h-5 w-5" class="icon"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -128,7 +128,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<span class="sr-only">{gettext("Debug data")}</span> <span class="sr-only">{gettext("Debug data")}</span>
<.icon <.icon
name="hero-code-bracket" name="hero-code-bracket"
class="h-5 w-5" class="icon"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -139,7 +139,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -270,7 +270,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
variant="ghost" variant="ghost"
size="xs" size="xs"
> >
<.icon name="hero-arrow-top-right-on-square" class="h-3.5 w-3.5" aria-hidden="true" /> <.icon name="hero-arrow-top-right-on-square" class="icon" aria-hidden="true" />
{gettext("MusicBrainz")} {gettext("MusicBrainz")}
</.button> </.button>
<.button <.button
@@ -281,7 +281,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
|> JS.transition("animate-shake") |> JS.transition("animate-shake")
} }
> >
<.icon name="hero-clipboard-document" class="h-3.5 w-3.5" aria-hidden="true" /> <.icon name="hero-clipboard-document" class="icon" aria-hidden="true" />
{gettext("Copy MB ID")} {gettext("Copy MB ID")}
</.button> </.button>
</div> </div>
lib/music_library_web/live/collection_live/show.ex
+3 -3
View File
@@ -67,7 +67,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<span class="sr-only">{gettext("Chat about album")}</span> <span class="sr-only">{gettext("Chat about album")}</span>
<.icon <.icon
name="hero-chat-bubble-left-right" name="hero-chat-bubble-left-right"
class="h-5 w-5" class="icon"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -80,7 +80,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<span class="sr-only">{gettext("Show Tracks")}</span> <span class="sr-only">{gettext("Show Tracks")}</span>
<.icon <.icon
name="hero-numbered-list" name="hero-numbered-list"
class="h-5 w-5" class="icon"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -91,7 +91,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon 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/live/online_store_template_live/index.ex
+1 -1
View File
@@ -74,7 +74,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon 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/live/record_set_live/show.ex
+2 -2
View File
@@ -29,7 +29,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -118,7 +118,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
<span class="sr-only">{gettext("Remove")}</span> <span class="sr-only">{gettext("Remove")}</span>
<.icon <.icon
name="hero-trash" name="hero-trash"
class="size-3.5 text-zinc-800 hover:text-red-700 dark:text-zinc-200 dark:hover:text-red-400" class="icon text-zinc-800 hover:text-red-700 dark:text-zinc-200 dark:hover:text-red-400"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
lib/music_library_web/live/scrobble_rules_live/index.ex
+1 -1
View File
@@ -117,7 +117,7 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon 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/live/scrobbled_tracks_live/index.ex
+1 -1
View File
@@ -161,7 +161,7 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon 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/live/universal_search_live/index.ex
+1 -1
View File
@@ -182,7 +182,7 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
phx-hook=".SearchGlobalShortcut" phx-hook=".SearchGlobalShortcut"
> >
<span class="sr-only">{gettext("Search (Cmd/Ctrl+K)")}</span> <span class="sr-only">{gettext("Search (Cmd/Ctrl+K)")}</span>
<.icon name="hero-magnifying-glass" class="h-5 w-5" /> <.icon name="hero-magnifying-glass" class="icon" />
</.button> </.button>
""" """
end end
lib/music_library_web/live/wishlist_live/show.ex
+2 -2
View File
@@ -47,7 +47,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
<span class="sr-only">{gettext("Chat about album")}</span> <span class="sr-only">{gettext("Chat about album")}</span>
<.icon <.icon
name="hero-chat-bubble-left-right" name="hero-chat-bubble-left-right"
class="h-5 w-5" class="icon"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />
@@ -58,7 +58,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
<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="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer" class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true" aria-hidden="true"
data-slot="icon" data-slot="icon"
/> />