chore(chat): interpolate values using new curly braces syntax
This commit is contained in:
parent
cd45664a63
commit
ada10afa96
@ -80,7 +80,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id={"#{@id}-content"}>
|
<div id={"#{@id}-content"}>
|
||||||
<%= render_slot(@inner_block) %>
|
{render_slot(@inner_block)}
|
||||||
</div>
|
</div>
|
||||||
</.focus_wrap>
|
</.focus_wrap>
|
||||||
</div>
|
</div>
|
||||||
@ -125,9 +125,9 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
<p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
|
<p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
|
||||||
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
|
<.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
|
||||||
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
|
<.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
|
||||||
<%= @title %>
|
{@title}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-2 text-sm leading-5"><%= msg %></p>
|
<p class="mt-2 text-sm leading-5">{msg}</p>
|
||||||
<button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
|
<button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
|
||||||
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
|
<.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
|
||||||
</button>
|
</button>
|
||||||
@ -158,7 +158,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
phx-connected={hide("#client-error")}
|
phx-connected={hide("#client-error")}
|
||||||
hidden
|
hidden
|
||||||
>
|
>
|
||||||
<%= gettext("Attempting to reconnect") %>
|
{gettext("Attempting to reconnect")}
|
||||||
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
|
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
|
||||||
</.flash>
|
</.flash>
|
||||||
|
|
||||||
@ -170,7 +170,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
phx-connected={hide("#server-error")}
|
phx-connected={hide("#server-error")}
|
||||||
hidden
|
hidden
|
||||||
>
|
>
|
||||||
<%= gettext("Hang in there while we get back on track") %>
|
{gettext("Hang in there while we get back on track")}
|
||||||
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
|
<.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
|
||||||
</.flash>
|
</.flash>
|
||||||
</div>
|
</div>
|
||||||
@ -204,9 +204,9 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
~H"""
|
~H"""
|
||||||
<.form :let={f} for={@for} as={@as} {@rest}>
|
<.form :let={f} for={@for} as={@as} {@rest}>
|
||||||
<div class="mt-10 space-y-8 bg-white">
|
<div class="mt-10 space-y-8 bg-white">
|
||||||
<%= render_slot(@inner_block, f) %>
|
{render_slot(@inner_block, f)}
|
||||||
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
|
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
|
||||||
<%= render_slot(action, f) %>
|
{render_slot(action, f)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</.form>
|
</.form>
|
||||||
@ -238,7 +238,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
]}
|
]}
|
||||||
{@rest}
|
{@rest}
|
||||||
>
|
>
|
||||||
<%= render_slot(@inner_block) %>
|
{render_slot(@inner_block)}
|
||||||
</button>
|
</button>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -322,9 +322,9 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
|
class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
|
||||||
{@rest}
|
{@rest}
|
||||||
/>
|
/>
|
||||||
<%= @label %>
|
{@label}
|
||||||
</label>
|
</label>
|
||||||
<.error :for={msg <- @errors}><%= msg %></.error>
|
<.error :for={msg <- @errors}>{msg}</.error>
|
||||||
</div>
|
</div>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -332,7 +332,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
def input(%{type: "select"} = assigns) do
|
def input(%{type: "select"} = assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div>
|
<div>
|
||||||
<.label for={@id}><%= @label %></.label>
|
<.label for={@id}>{@label}</.label>
|
||||||
<select
|
<select
|
||||||
id={@id}
|
id={@id}
|
||||||
name={@name}
|
name={@name}
|
||||||
@ -340,10 +340,10 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
multiple={@multiple}
|
multiple={@multiple}
|
||||||
{@rest}
|
{@rest}
|
||||||
>
|
>
|
||||||
<option :if={@prompt} value=""><%= @prompt %></option>
|
<option :if={@prompt} value="">{@prompt}</option>
|
||||||
<%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
|
{Phoenix.HTML.Form.options_for_select(@options, @value)}
|
||||||
</select>
|
</select>
|
||||||
<.error :for={msg <- @errors}><%= msg %></.error>
|
<.error :for={msg <- @errors}>{msg}</.error>
|
||||||
</div>
|
</div>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -351,7 +351,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
def input(%{type: "textarea"} = assigns) do
|
def input(%{type: "textarea"} = assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div>
|
<div>
|
||||||
<.label for={@id}><%= @label %></.label>
|
<.label for={@id}>{@label}</.label>
|
||||||
<textarea
|
<textarea
|
||||||
id={@id}
|
id={@id}
|
||||||
name={@name}
|
name={@name}
|
||||||
@ -362,7 +362,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
]}
|
]}
|
||||||
{@rest}
|
{@rest}
|
||||||
><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
|
><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
|
||||||
<.error :for={msg <- @errors}><%= msg %></.error>
|
<.error :for={msg <- @errors}>{msg}</.error>
|
||||||
</div>
|
</div>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -371,7 +371,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
def input(assigns) do
|
def input(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div>
|
<div>
|
||||||
<.label for={@id}><%= @label %></.label>
|
<.label for={@id}>{@label}</.label>
|
||||||
<input
|
<input
|
||||||
type={@type}
|
type={@type}
|
||||||
name={@name}
|
name={@name}
|
||||||
@ -384,7 +384,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
]}
|
]}
|
||||||
{@rest}
|
{@rest}
|
||||||
/>
|
/>
|
||||||
<.error :for={msg <- @errors}><%= msg %></.error>
|
<.error :for={msg <- @errors}>{msg}</.error>
|
||||||
</div>
|
</div>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -398,7 +398,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
def label(assigns) do
|
def label(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
|
<label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
|
||||||
<%= render_slot(@inner_block) %>
|
{render_slot(@inner_block)}
|
||||||
</label>
|
</label>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -412,7 +412,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
~H"""
|
~H"""
|
||||||
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
|
<p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
|
||||||
<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
|
<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
|
||||||
<%= render_slot(@inner_block) %>
|
{render_slot(@inner_block)}
|
||||||
</p>
|
</p>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -431,13 +431,13 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
|
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
|
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
|
||||||
<%= render_slot(@inner_block) %>
|
{render_slot(@inner_block)}
|
||||||
</h1>
|
</h1>
|
||||||
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
|
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
|
||||||
<%= render_slot(@subtitle) %>
|
{render_slot(@subtitle)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-none"><%= render_slot(@actions) %></div>
|
<div class="flex-none">{render_slot(@actions)}</div>
|
||||||
</header>
|
</header>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
@ -478,9 +478,9 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
<table class="w-[40rem] mt-11 sm:w-full">
|
<table class="w-[40rem] mt-11 sm:w-full">
|
||||||
<thead class="text-sm text-left leading-6 text-zinc-500">
|
<thead class="text-sm text-left leading-6 text-zinc-500">
|
||||||
<tr>
|
<tr>
|
||||||
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
|
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal">{col[:label]}</th>
|
||||||
<th :if={@action != []} class="relative p-0 pb-4">
|
<th :if={@action != []} class="relative p-0 pb-4">
|
||||||
<span class="sr-only"><%= gettext("Actions") %></span>
|
<span class="sr-only">{gettext("Actions")}</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@ -498,7 +498,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
<div class="block py-4 pr-6">
|
<div class="block py-4 pr-6">
|
||||||
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
|
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
|
||||||
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
|
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
|
||||||
<%= render_slot(col, @row_item.(row)) %>
|
{render_slot(col, @row_item.(row))}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -509,7 +509,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
:for={action <- @action}
|
:for={action <- @action}
|
||||||
class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||||
>
|
>
|
||||||
<%= render_slot(action, @row_item.(row)) %>
|
{render_slot(action, @row_item.(row))}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
@ -539,8 +539,8 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
<div class="mt-14">
|
<div class="mt-14">
|
||||||
<dl class="-my-4 divide-y divide-zinc-100">
|
<dl class="-my-4 divide-y divide-zinc-100">
|
||||||
<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
|
<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
|
||||||
<dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
|
<dt class="w-1/4 flex-none text-zinc-500">{item.title}</dt>
|
||||||
<dd class="text-zinc-700"><%= render_slot(item) %></dd>
|
<dd class="text-zinc-700">{render_slot(item)}</dd>
|
||||||
</div>
|
</div>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
@ -565,7 +565,7 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
|
||||||
>
|
>
|
||||||
<.icon name="hero-arrow-left-solid" class="h-3 w-3" />
|
<.icon name="hero-arrow-left-solid" class="h-3 w-3" />
|
||||||
<%= render_slot(@inner_block) %>
|
{render_slot(@inner_block)}
|
||||||
</.link>
|
</.link>
|
||||||
</div>
|
</div>
|
||||||
"""
|
"""
|
||||||
@ -591,10 +591,12 @@ defmodule SlaxWeb.CoreComponents do
|
|||||||
"""
|
"""
|
||||||
attr :name, :string, required: true
|
attr :name, :string, required: true
|
||||||
attr :class, :string, default: nil
|
attr :class, :string, default: nil
|
||||||
|
attr :id, :string, default: nil
|
||||||
|
attr :style, :string, default: nil
|
||||||
|
|
||||||
def icon(%{name: "hero-" <> _} = assigns) do
|
def icon(%{name: "hero-" <> _} = assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<span class={[@name, @class]} />
|
<span class={[@name, @class]} id={@id} style={@style} />
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<main class="flex w-full h-screen text-gray-700">
|
<main class="flex w-full h-screen text-gray-700">
|
||||||
<.flash_group flash={@flash} />
|
<.flash_group flash={@flash} />
|
||||||
<%= @inner_content %>
|
{@inner_content}
|
||||||
</main>
|
</main>
|
||||||
|
@ -5,13 +5,13 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="csrf-token" content={get_csrf_token()} />
|
<meta name="csrf-token" content={get_csrf_token()} />
|
||||||
<.live_title suffix=" · Slax">
|
<.live_title suffix=" · Slax">
|
||||||
<%= assigns[:page_title] || "Slax" %>
|
{assigns[:page_title] || "Slax"}
|
||||||
</.live_title>
|
</.live_title>
|
||||||
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
||||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-white">
|
<body class="bg-white">
|
||||||
<%= @inner_content %>
|
{@inner_content}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -49,7 +49,7 @@
|
|||||||
<h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
|
<h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
|
||||||
Phoenix Framework
|
Phoenix Framework
|
||||||
<small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
|
<small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
|
||||||
v<%= Application.spec(:phoenix, :vsn) %>
|
v{Application.spec(:phoenix, :vsn)}
|
||||||
</small>
|
</small>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900 text-balance">
|
<p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900 text-balance">
|
||||||
|
@ -9,7 +9,7 @@ defmodule SlaxWeb.ChatRoomLive.Edit do
|
|||||||
~H"""
|
~H"""
|
||||||
<div class="mx-auto w-96 mt-12">
|
<div class="mx-auto w-96 mt-12">
|
||||||
<.header>
|
<.header>
|
||||||
<%= @page_title %>
|
{@page_title}
|
||||||
<:actions>
|
<:actions>
|
||||||
<.link
|
<.link
|
||||||
class="font-normal text-xs text-blue-600 hover:text-blue-700"
|
class="font-normal text-xs text-blue-600 hover:text-blue-700"
|
||||||
|
@ -8,7 +8,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
|
|||||||
~H"""
|
~H"""
|
||||||
<main class="flex-1 p-6 max-w-4xl mx-auto">
|
<main class="flex-1 p-6 max-w-4xl mx-auto">
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<h1 class="text-xl font-semibold"><%= @page_title %></h1>
|
<h1 class="text-xl font-semibold">{@page_title}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-slate-50 border rounded">
|
<div class="bg-slate-50 border rounded">
|
||||||
<div id="rooms" class="divide-y" phx-update="stream">
|
<div id="rooms" class="divide-y" phx-update="stream">
|
||||||
@ -20,7 +20,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div class="font-medium mb-1">
|
<div class="font-medium mb-1">
|
||||||
#<%= room.name %>
|
#{room.name}
|
||||||
<span class="mx-1 text-gray-500 font-light text-sm opacity-0 group-hover:opacity-100">
|
<span class="mx-1 text-gray-500 font-light text-sm opacity-0 group-hover:opacity-100">
|
||||||
View room
|
View room
|
||||||
</span>
|
</span>
|
||||||
@ -33,7 +33,7 @@ defmodule SlaxWeb.ChatRoomLive.Index do
|
|||||||
<span class="mx-1">·</span>
|
<span class="mx-1">·</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
<%= if room.topic do %>
|
<%= if room.topic do %>
|
||||||
<%= room.topic %>
|
{room.topic}
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user