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

Standardize and simplify online store templates list markup

Browse Source
This commit is contained in:
Claudio Ortolina
2025-07-15 10:40:39 +01:00
parent 6386e5e20d
commit f89d28fae5
3 changed files with 115 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/online_store_template_live/index.html.heex
+81 -77
View File
@@ -1,87 +1,91 @@
<div class="px-4 py-6 sm:px-6 lg:px-8">
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h1 class="text-base font-semibold text-gray-900 dark:text-white">
<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("Online Store Templates")}
</h1>
<p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
{gettext("Manage templates for generating links to online record stores.")}
</p>
</div>
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
<.button as="link" patch={~p"/online-store-templates/new"}>
{gettext("Add Template")}
</.button>
<div>
<nav class="isolate inline-flex rounded-md shadow-xs">
<.button variant="solid" as="link" size="sm" patch={~p"/online-store-templates/new"}>
<.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("New Template")}
</.button>
</nav>
</div>
</div>
</header>
<div class="mt-8 flow-root">
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<ul
role="list"
class="divide-y divide-gray-200 dark:divide-gray-800"
phx-update="stream"
id="templates"
>
<li
:for={{id, template} <- @streams.templates}
id={id}
class="flex items-center justify-between gap-x-6 py-5"
>
<div class="min-w-0">
<div class="flex items-start gap-x-3">
<p class="text-sm font-semibold text-gray-900 dark:text-white">
{template.name}
</p>
<.badge :if={template.enabled} color="green">
{gettext("Enabled")}
</.badge>
<.badge :if={!template.enabled} color="yellow">
{gettext("Disabled")}
</.badge>
</div>
<div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
<p class="truncate">{template.url_template}</p>
</div>
<p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
{template.description}
</p>
</div>
<div class="flex flex-none items-center gap-x-4">
<.button
phx-click="toggle-enabled"
phx-value-id={template.id}
color={if template.enabled, do: "orange", else: "green"}
variant="ghost"
size="sm"
>
{if template.enabled, do: "Disable", else: "Enable"}
</.button>
<.button
as="link"
patch={~p"/online-store-templates/#{template}/edit"}
variant="ghost"
size="sm"
>
{gettext("Edit")}
</.button>
<.button
as="link"
phx-click={JS.push("delete", value: %{id: template.id})}
data-confirm="Are you sure?"
color="red"
variant="ghost"
size="sm"
>
{gettext("Delete")}
</.button>
</div>
</li>
</ul>
<div class="mt-6 space-y-4">
<ul
role="list"
class="divide-y divide-gray-200 dark:divide-gray-800"
phx-update="stream"
id="templates"
>
<li
:for={{id, template} <- @streams.templates}
id={id}
class="flex items-center justify-between py-5"
>
<div class="min-w-0">
<div class="flex items-start gap-x-3">
<p class="text-sm font-semibold text-gray-900 dark:text-white">
{template.name}
</p>
<.badge :if={template.enabled} color="green">
{gettext("Enabled")}
</.badge>
<.badge :if={!template.enabled} color="yellow">
{gettext("Disabled")}
</.badge>
</div>
<div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
<p class="truncate">{template.url_template}</p>
</div>
<p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
{template.description}
</p>
</div>
</div>
</div>
<div class="flex items-center">
<.dropdown id={"actions-#{template.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="toggle-enabled" phx-value-id={template.id}>
{if template.enabled,
do: gettext("Disable template"),
else: gettext("Enable template")}
</.dropdown_button>
<.dropdown_link
id={"actions-#{template.id}-edit"}
patch={~p"/online-store-templates/#{template}/edit"}
>
{gettext("Edit")}
</.dropdown_link>
<.separator />
<.dropdown_button
phx-click="delete"
phx-value-id={template.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>
<.modal
priv/gettext/default.pot
+17 -10
View File
@@ -13,6 +13,7 @@ msgstr ""
#: lib/music_library_web/components/record_components.ex
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
@@ -921,6 +922,7 @@ msgstr ""
#: lib/music_library_web/components/record_components.ex
#: lib/music_library_web/live/artist_live/show.html.heex
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
@@ -1256,16 +1258,6 @@ msgstr ""
msgid "e.g. https://www.amazon.co.uk/s?k={artist}+{title}+vinyl"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Add Template"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Manage templates for generating links to online record stores."
msgstr ""
#: lib/music_library_web/live/online_store_template_live/form_component.ex
#, elixir-autogen, elixir-format
msgid "Record format"
@@ -1275,3 +1267,18 @@ msgstr ""
#, elixir-autogen, elixir-format
msgid "Preview not available"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Disable template"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Enable template"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "New Template"
msgstr ""
priv/gettext/en/LC_MESSAGES/default.po
+17 -10
View File
@@ -13,6 +13,7 @@ msgstr ""
#: lib/music_library_web/components/record_components.ex
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
@@ -921,6 +922,7 @@ msgstr ""
#: lib/music_library_web/components/record_components.ex
#: lib/music_library_web/live/artist_live/show.html.heex
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
@@ -1256,16 +1258,6 @@ msgstr ""
msgid "e.g. https://www.amazon.co.uk/s?k={artist}+{title}+vinyl"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Add Template"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Manage templates for generating links to online record stores."
msgstr ""
#: lib/music_library_web/live/online_store_template_live/form_component.ex
#, elixir-autogen, elixir-format
msgid "Record format"
@@ -1275,3 +1267,18 @@ msgstr ""
#, elixir-autogen, elixir-format
msgid "Preview not available"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Disable template"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Enable template"
msgstr ""
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "New Template"
msgstr ""