Use explicit Phoenix 1.8 style layouts
This commit is contained in:
Claudio Ortolina
@@ -1,115 +1,117 @@
|
||||
<header class="mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
||||
{gettext("Scrobble Rules")}
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<.button_group>
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
patch={~p"/scrobble-rules/new"}
|
||||
>
|
||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("New Rule")}
|
||||
</.button>
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
phx-click="apply_all_rules"
|
||||
>
|
||||
<.icon name="hero-play" class="icon" />
|
||||
{gettext("Apply All")}
|
||||
</.button>
|
||||
</.button_group>
|
||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||
<header class="mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
||||
{gettext("Scrobble Rules")}
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<.button_group>
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
patch={~p"/scrobble-rules/new"}
|
||||
>
|
||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||
{gettext("New Rule")}
|
||||
</.button>
|
||||
<.button
|
||||
variant="solid"
|
||||
size="sm"
|
||||
phx-click="apply_all_rules"
|
||||
>
|
||||
<.icon name="hero-play" class="icon" />
|
||||
{gettext("Apply All")}
|
||||
</.button>
|
||||
</.button_group>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="mt-6 space-y-4">
|
||||
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
|
||||
<li
|
||||
:for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
|
||||
id={dom_id}
|
||||
class="flex justify-between"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<.type_badge type={scrobble_rule.type} />
|
||||
</div>
|
||||
<div class="grow p-2">
|
||||
<p class="text-sm text-zinc-900 dark:text-zinc-100">
|
||||
{scrobble_rule.match_value}
|
||||
</p>
|
||||
<p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2">
|
||||
{scrobble_rule.target_musicbrainz_id}
|
||||
</p>
|
||||
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
|
||||
{scrobble_rule.description}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center text-right">
|
||||
<span>
|
||||
<.status_badge enabled={scrobble_rule.enabled} />
|
||||
</span>
|
||||
<span class="text-xs text-zinc-500 dark:text-zinc-400 text-nowrap mt-2">
|
||||
{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
|
||||
<:toggle>
|
||||
<div>
|
||||
<span class="sr-only">{gettext("Actions")}</span>
|
||||
<.icon
|
||||
name="hero-ellipsis-vertical"
|
||||
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</div>
|
||||
</:toggle>
|
||||
<.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
|
||||
{gettext("Apply rule")}
|
||||
</.dropdown_button>
|
||||
<.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
|
||||
{if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
|
||||
</.dropdown_button>
|
||||
<.dropdown_link
|
||||
id={"actions-#{scrobble_rule.id}-edit"}
|
||||
patch={~p"/scrobble-rules/#{scrobble_rule}/edit"}
|
||||
>
|
||||
{gettext("Edit")}
|
||||
</.dropdown_link>
|
||||
<.separator />
|
||||
<.dropdown_button
|
||||
phx-click="delete"
|
||||
phx-value-id={scrobble_rule.id}
|
||||
data-confirm={gettext("Are you sure?")}
|
||||
class={[
|
||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||
]}
|
||||
>
|
||||
{gettext("Delete")}
|
||||
</.dropdown_button>
|
||||
</.dropdown>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="mt-6 space-y-4">
|
||||
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
|
||||
<li
|
||||
:for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
|
||||
id={dom_id}
|
||||
class="flex justify-between"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<.type_badge type={scrobble_rule.type} />
|
||||
</div>
|
||||
<div class="grow p-2">
|
||||
<p class="text-sm text-zinc-900 dark:text-zinc-100">
|
||||
{scrobble_rule.match_value}
|
||||
</p>
|
||||
<p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2">
|
||||
{scrobble_rule.target_musicbrainz_id}
|
||||
</p>
|
||||
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
|
||||
{scrobble_rule.description}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center text-right">
|
||||
<span>
|
||||
<.status_badge enabled={scrobble_rule.enabled} />
|
||||
</span>
|
||||
<span class="text-xs text-zinc-500 dark:text-zinc-400 text-nowrap mt-2">
|
||||
{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
|
||||
<:toggle>
|
||||
<div>
|
||||
<span class="sr-only">{gettext("Actions")}</span>
|
||||
<.icon
|
||||
name="hero-ellipsis-vertical"
|
||||
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
/>
|
||||
</div>
|
||||
</:toggle>
|
||||
<.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
|
||||
{gettext("Apply rule")}
|
||||
</.dropdown_button>
|
||||
<.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
|
||||
{if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
|
||||
</.dropdown_button>
|
||||
<.dropdown_link
|
||||
id={"actions-#{scrobble_rule.id}-edit"}
|
||||
patch={~p"/scrobble-rules/#{scrobble_rule}/edit"}
|
||||
>
|
||||
{gettext("Edit")}
|
||||
</.dropdown_link>
|
||||
<.separator />
|
||||
<.dropdown_button
|
||||
phx-click="delete"
|
||||
phx-value-id={scrobble_rule.id}
|
||||
data-confirm={gettext("Are you sure?")}
|
||||
class={[
|
||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||
]}
|
||||
>
|
||||
{gettext("Delete")}
|
||||
</.dropdown_button>
|
||||
</.dropdown>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<.structured_modal
|
||||
:if={@live_action in [:new, :edit]}
|
||||
id="scrobble_rule-modal"
|
||||
on_close={JS.patch(~p"/scrobble-rules")}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.ScrobbleRulesLive.FormComponent}
|
||||
id={@scrobble_rule.id || :new}
|
||||
title={@page_title}
|
||||
action={@live_action}
|
||||
scrobble_rule={@scrobble_rule}
|
||||
patch={~p"/scrobble-rules"}
|
||||
/>
|
||||
</.structured_modal>
|
||||
<.structured_modal
|
||||
:if={@live_action in [:new, :edit]}
|
||||
id="scrobble_rule-modal"
|
||||
on_close={JS.patch(~p"/scrobble-rules")}
|
||||
>
|
||||
<.live_component
|
||||
module={MusicLibraryWeb.ScrobbleRulesLive.FormComponent}
|
||||
id={@scrobble_rule.id || :new}
|
||||
title={@page_title}
|
||||
action={@live_action}
|
||||
scrobble_rule={@scrobble_rule}
|
||||
patch={~p"/scrobble-rules"}
|
||||
/>
|
||||
</.structured_modal>
|
||||
</Layouts.app>
|
||||
|
||||
Reference in New Issue
Block a user