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"
/>