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

Use Fluxon buttons in collection index

Browse Source
This commit is contained in:
Claudio Ortolina
2025-05-12 12:52:55 +01:00
parent 0083220e3f
commit b51f7c5960
1 changed files with 22 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/index.html.heex
+22 -32
View File
@@ -3,47 +3,38 @@
<div class="flex items-center justify-between gap-6 mb-2 mt-2"> <div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} /> <.search_form query={@record_list_params.query} />
<nav class="isolate inline-flex rounded-md shadow-xs"> <nav class="isolate inline-flex rounded-md shadow-xs">
<.link <Fluxon.Components.Button.button
class={[ class="rounded-l-md rounded-r-none"
"relative inline-flex items-center rounded-l-md", variant="solid"
"px-3 py-2 text-xs sm:text-sm font-semibold", as="link"
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200", size="sm"
"disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]}
patch={~p"/collection/import"} patch={~p"/collection/import"}
> >
<.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" /> <.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Add")} {gettext("Add")}
</.link> </Fluxon.Components.Button.button>
<.link <Fluxon.Components.Button.button
class={[ class="-ml-px rounded-r-md rounded-l-none"
"relative -ml-px inline-flex items-center rounded-r-md", variant="solid"
"px-3 py-2 text-xs sm:text-sm font-semibold", as="link"
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200", size="sm"
"disabled:bg-zinc-300 dark:disabled:bg-zinc-300 disabled:active:text-white",
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
"focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
]}
patch={~p"/collection/scan"} patch={~p"/collection/scan"}
> >
<.barcode_icon class="mr-2 fill-current" /> <.barcode_icon class="mr-2 fill-current" />
{gettext("Scan")} {gettext("Scan")}
</.link> </Fluxon.Components.Button.button>
</nav> </nav>
</div> </div>
</header> </header>
<div class="flex items-end justify-between gap-6 mt-8"> <div class="flex items-end justify-between gap-6 mt-8">
<span class="isolate inline-flex rounded-md shadow-xs"> <span class="isolate inline-flex rounded-md shadow-xs">
<.link <Fluxon.Components.Button.button
patch={order_path(@record_list_params, :purchase)} patch={order_path(@record_list_params, :purchase)}
as="link"
size="sm"
class={[ class={[
"relative inline-flex items-center rounded-l-md", "rounded-l-md rounded-r-none",
"px-3 py-2 text-sm font-semibold",
"ring-1 ring-inset focus:z-10",
"bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 ring-zinc-300",
@record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700" @record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
]} ]}
> >
@@ -54,20 +45,19 @@
data-slot="icon" data-slot="icon"
/> />
{gettext("Purchase")} {gettext("Purchase")}
</.link> </Fluxon.Components.Button.button>
<.link <Fluxon.Components.Button.button
patch={order_path(@record_list_params, :alphabetical)} patch={order_path(@record_list_params, :alphabetical)}
as="link"
size="sm"
class={[ class={[
"relative -ml-px inline-flex items-center rounded-r-md", "-ml-px rounded-r-md rounded-l-none",
"px-3 py-2 text-xs sm:text-sm font-semibold",
"ring-1 ring-inset focus:z-10",
"bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 ring-zinc-300",
@record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700" @record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
]} ]}
> >
<.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" /> <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
{gettext("A->Z")} {gettext("A->Z")}
</.link> </Fluxon.Components.Button.button>
</span> </span>
<p class="text-right text-sm max-sm:text-xs text-zinc-900 dark:text-zinc-400"> <p class="text-right text-sm max-sm:text-xs text-zinc-900 dark:text-zinc-400">