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
import Fluxon.Components.Button
import Fluxon.Components.Input
import Fluxon.Components.Sheet
import Fluxon.Components.Tabs
@@ -181,7 +182,7 @@ defmodule MusicLibraryWeb.CoreComponents do
{gettext("External Links")}
</summary>
<div class="mt-4 space-y-2">
<Fluxon.Components.Button.button
<.button
:for={external_link <- @external_links}
href={external_link.url}
target="_blank"
@@ -199,7 +200,7 @@ defmodule MusicLibraryWeb.CoreComponents do
<span class="text-sm font-medium text-zinc-900 dark:text-white">
{external_link.name}
</span>
</Fluxon.Components.Button.button>
</.button>
</div>
</details>
"""
@@ -215,13 +216,17 @@ defmodule MusicLibraryWeb.CoreComponents do
def copy_to_clipboard(assigns) do
~H"""
<button phx-click={
JS.dispatch("music_library:clipcopy", to: "#" <> @target_id)
|> JS.transition("animate-shake")
}>
<.button
variant="ghost"
size="sm"
phx-click={
JS.dispatch("music_library:clipcopy", to: "#" <> @target_id)
|> JS.transition("animate-shake")
}
>
<span class="sr-only">{@label}</span>
<.icon name="hero-clipboard-document" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
</button>
<.icon name="hero-clipboard-document" class="icon -mt-1" aria-hidden="true" data-slot="icon" />
</.button>
"""
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>
<.icon
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"
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>
<.icon
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"
data-slot="icon"
/>
@@ -376,7 +376,7 @@ defmodule MusicLibraryWeb.RecordComponents do
~H"""
<div 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">
<.format_badge release={@release} />
@@ -608,7 +608,7 @@ defmodule MusicLibraryWeb.RecordComponents do
variant="ghost"
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")}
</.button>
<.button
@@ -619,7 +619,7 @@ defmodule MusicLibraryWeb.RecordComponents do
|> 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")}
</.button>
<.button
@@ -630,7 +630,7 @@ defmodule MusicLibraryWeb.RecordComponents do
|> 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")}
</.button>
</div>
@@ -669,7 +669,7 @@ defmodule MusicLibraryWeb.RecordComponents do
</span>
<.icon
name="hero-magnifying-glass-plus"
class="-mt-1 h-5 w-5"
class="icon -mt-1"
aria-hidden="true"
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}
>
<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
:if={@can_scrobble? && @release_with_tracks.ok?}
@@ -95,11 +95,11 @@ defmodule MusicLibraryWeb.Components.Release do
phx-disable-with={gettext("Scrobbling...")}
>
<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 :if={!@can_scrobble?} variant="soft" size="sm" href={LastFm.auth_url()}>
<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_group>
</div>
@@ -190,7 +190,7 @@ defmodule MusicLibraryWeb.Components.Release do
phx-target={@myself}
>
<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
:if={@can_scrobble?}
@@ -203,7 +203,7 @@ defmodule MusicLibraryWeb.Components.Release do
phx-disable-with={gettext("Scrobbling...")}
>
<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_group>
</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>
<.icon
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"
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>
<.icon
name="hero-pencil"
class="h-5 w-5"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
@@ -116,7 +116,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<span class="sr-only">{gettext("Chat about artist")}</span>
<.icon
name="hero-chat-bubble-left-right"
class="h-5 w-5"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
@@ -128,7 +128,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<span class="sr-only">{gettext("Debug data")}</span>
<.icon
name="hero-code-bracket"
class="h-5 w-5"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
@@ -139,7 +139,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
<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"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>
@@ -270,7 +270,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
variant="ghost"
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")}
</.button>
<.button
@@ -281,7 +281,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
|> 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")}
</.button>
</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>
<.icon
name="hero-chat-bubble-left-right"
class="h-5 w-5"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
@@ -80,7 +80,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<span class="sr-only">{gettext("Show Tracks")}</span>
<.icon
name="hero-numbered-list"
class="h-5 w-5"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
@@ -91,7 +91,7 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
<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"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
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>
<.icon
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"
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>
<.icon
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"
data-slot="icon"
/>
@@ -118,7 +118,7 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
<span class="sr-only">{gettext("Remove")}</span>
<.icon
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"
/>
</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>
<.icon
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"
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>
<.icon
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"
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"
>
<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>
"""
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>
<.icon
name="hero-chat-bubble-left-right"
class="h-5 w-5"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
@@ -58,7 +58,7 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
<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"
class="icon text-zinc-500 dark:text-zinc-400 cursor-pointer"
aria-hidden="true"
data-slot="icon"
/>