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

Use Fluxon badges

Browse Source
This commit is contained in:
Claudio Ortolina
2025-05-13 09:48:28 +01:00
parent ec28fcf65e
commit 354c0d8dfb
4 changed files with 26 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/barcode_scanner_component.ex
+9 -3
View File
@@ -286,12 +286,18 @@ defmodule MusicLibraryWeb.BarcodeScannerComponent do
)}
</p>
</div>
<.badge :if={@status == :new} color={:gray} text={gettext("New")} />
<.badge :if={@status == :new}>
{gettext("New")}
</.badge>
<.link :if={@status == :wishlisted} navigate={~p"/wishlist/#{@record_id}"}>
<.badge color={:yellow} text={gettext("Wishlisted")} />
<.badge color="yellow">
{gettext("Wishlisted")}
</.badge>
</.link>
<.link :if={@status == :collected} navigate={~p"/collection/#{@record_id}"}>
<.badge color={:green} text={gettext("Collected")} />
<.badge color="green">
{gettext("Collected")}
</.badge>
</.link>
</div>
"""
lib/music_library_web/components/core_components.ex
+1 -71
View File
@@ -19,6 +19,7 @@ defmodule MusicLibraryWeb.CoreComponents do
alias Phoenix.LiveView.JS
use Gettext, backend: MusicLibraryWeb.Gettext
defdelegate badge(assigns), to: Fluxon.Components.Badge
defdelegate button(assigns), to: Fluxon.Components.Button
defdelegate date_time_picker(assigns), to: Fluxon.Components.DatePicker
defdelegate input(assigns), to: Fluxon.Components.Input
@@ -272,77 +273,6 @@ defmodule MusicLibraryWeb.CoreComponents do
"""
end
@doc """
Renders a round badge.
"""
attr :text, :string, required: true
attr :class, :string, default: nil
def round_badge(assigns) do
~H"""
<span class={[
"inline-flex items-center rounded-full",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-zinc-50 dark:bg-zinc-500/10",
"text-zinc-700 dark:text-zinc-400",
"ring-zinc-600/20 dark:ring-zinc-500/20",
@class
]}>
{assigns.text}
</span>
"""
end
attr :color, :atom, values: [:green, :yellow, :gray], required: true
attr :text, :string, required: true
def badge(assigns) do
case assigns.color do
:green ->
~H"""
<span class={[
"inline-flex items-center rounded-md whitespace-nowrap",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-green-50 dark:bg-green-500/10",
"text-green-700 dark:text-green-400",
"ring-green-600/20 dark:ring-green-500/20"
]}>
{@text}
</span>
"""
:yellow ->
~H"""
<span class={[
"inline-flex items-center rounded-md whitespace-nowrap",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-yellow-50 dark:bg-yellow-400/10",
"text-yellow-800 dark:text-yellow-500",
"ring-yellow-600/20 dark:ring-yellow-400/20"
]}>
{@text}
</span>
"""
:gray ->
~H"""
<span class={[
"inline-flex items-center rounded-md whitespace-nowrap",
"px-2 py-1 text-xs font-medium",
"ring-1 ring-inset",
"bg-zinc-50 dark:bg-zinc-500/10",
"text-zinc-700 dark:text-zinc-400",
"ring-zinc-600/20 dark:ring-zinc-500/20"
]}>
{@text}
</span>
"""
end
end
## JS Commands
def show(js \\ %JS{}, selector) do
lib/music_library_web/live/artist_live/show.html.heex
+2 -1
View File
@@ -24,10 +24,11 @@
</:failed>
<a
:if={lastfm_artist_info.on_tour}
class="flex items-center"
href={LastFm.Artist.events_url(lastfm_artist_info)}
target="_blank"
>
<.round_badge text={gettext("On Tour")} class="mr-2" />
<.badge variant="pill" class="mr-2">{gettext("On Tour")}</.badge>
</a>
<span
:if={lastfm_artist_info.play_count > 0}
lib/music_library_web/live/stats_live/index.html.heex
+14 -14
View File
@@ -201,18 +201,18 @@
</div>
<div class="flex gap-1 flex-col text-right">
<.badge
:if={album.metadata.musicbrainz_id == ""}
color={:gray}
text={gettext("No MB ID")}
/>
<.badge :if={album.metadata.musicbrainz_id == ""}>
{gettext("No MB ID")}
</.badge>
<.link
:if={
record_id = tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
}
navigate={~p"/collection/#{record_id}"}
>
<.badge color={:green} text={gettext("Collected")} />
<.badge color="green">
{gettext("Collected")}
</.badge>
</.link>
<.link
:if={
@@ -220,7 +220,9 @@
}
navigate={~p"/wishlist/#{record_id}"}
>
<.badge color={:yellow} text={gettext("Wishlisted")} />
<.badge color="yellow">
{gettext("Wishlisted")}
</.badge>
</.link>
</div>
@@ -332,22 +334,20 @@
</div>
<div class="flex gap-1 flex-col text-right">
<.badge
:if={track.album.musicbrainz_id == ""}
color={:gray}
text={gettext("No MB ID")}
/>
<.badge :if={track.album.musicbrainz_id == ""}>
{gettext("No MB ID")}
</.badge>
<.link
:if={record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)}
navigate={~p"/collection/#{record_id}"}
>
<.badge color={:green} text={gettext("Collected")} />
<.badge color="green">{gettext("Collected")}</.badge>
</.link>
<.link
:if={record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)}
navigate={~p"/wishlist/#{record_id}"}
>
<.badge color={:yellow} text={gettext("Wishlisted")} />
<.badge color="yellow">{gettext("Wishlisted")}</.badge>
</.link>
</div>