Migrate more CSS classes to components

This commit is contained in:
Jonatan Kłosko 2024-02-07 00:29:00 +08:00
parent 373e1e888d
commit d3f33a045c
5 changed files with 58 additions and 74 deletions

View file

@ -67,12 +67,6 @@
@apply rounded-full border-2;
}
/* Links */
.link {
@apply font-medium underline text-gray-900 hover:no-underline;
}
/* Form fields */
.input {
@ -104,43 +98,6 @@
@apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl;
}
select.input {
appearance: none;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01Ljk5OTg5IDQuOTc2NzFMMTAuMTI0OSAwLjg1MTcwOEwxMS4zMDMyIDIuMDMwMDRMNS45OTk4OSA3LjMzMzM3TDAuNjk2NTU1IDIuMDMwMDRMMS44NzQ4OSAwLjg1MTcwOEw1Ljk5OTg5IDQuOTc2NzFaIiBmaWxsPSIjNjE3NThBIi8+Cjwvc3ZnPgo=");
background-repeat: no-repeat;
background-position: center right 10px;
background-size: 10px;
padding-right: 28px;
}
.radio {
appearance: none;
width: 20px;
height: 20px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='9.5' stroke='%23CAD5E0' fill='white' /%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='9.5' stroke='%233E64FF' fill='white' /%3e%3ccircle cx='10' cy='10' r='6' fill='%233E64FF' /%3e%3c/svg%3e");
}
.checkbox {
@apply h-5 w-5 appearance-none border border-gray-300 rounded text-blue-600 cursor-pointer;
}
.checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
/* Custom scrollbars */
.tiny-scrollbar::-webkit-scrollbar {

View file

@ -108,12 +108,16 @@ defmodule LivebookWeb.Confirm do
/>
</div>
</div>
<label :if={@opt_out_id} class="mt-6 text-gray-700 flex items-center">
<input class="checkbox mr-3" type="checkbox" name="opt_out_id" value={@opt_out_id} />
<span class="text-sm">
Don't show this message again
</span>
</label>
<div :if={@opt_out_id} class="mt-6">
<.checkbox_field
name="opt_out_id"
value={nil}
checked_value={@opt_out_id}
unchecked_value={nil}
label="Don't show this message again"
small
/>
</div>
<div class="mt-8 flex justify-end">
<div class={["flex gap-2", @danger && "flex-row-reverse"]}>
<button class="button-base button-outlined-gray" type="button" phx-click={hide_modal(@id)}>

View file

@ -236,6 +236,8 @@ defmodule LivebookWeb.FormComponents do
default: "false",
doc: "when set to `nil`, unchecked value is not sent"
attr :small, :boolean, default: false
attr :rest, :global
def checkbox_field(assigns) do
@ -247,14 +249,19 @@ defmodule LivebookWeb.FormComponents do
<input :if={@unchecked_value} type="hidden" value={@unchecked_value} name={@name} />
<input
type="checkbox"
class="checkbox shrink-0"
class="peer hidden"
value={@checked_value}
name={@name}
id={@id || @name}
checked={to_string(@value) == @checked_value}
{@rest}
/>
<span :if={@label} class="text-gray-700 flex gap-1 items-center">
<div class="w-5 h-5 flex items-center justify-center border border-gray-300 peer-checked:border-transparent bg-white peer-checked:bg-blue-600 rounded">
<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg">
<path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" />
</svg>
</div>
<span :if={@label} class={["text-gray-700 flex gap-1 items-center", @small && "text-sm"]}>
<%= @label %>
<.help :if={@help} text={@help} />
</span>
@ -289,12 +296,15 @@ defmodule LivebookWeb.FormComponents do
<label :for={{value, description} <- @options} class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
class="radio"
class="peer hidden"
name={@name}
value={value}
checked={to_string(@value) == value}
{@rest}
/>
<div class="w-5 h-5 flex items-center justify-center border border-gray-300 peer-checked:border-blue-600 text-white peer-checked:text-blue-600 bg-white rounded-full">
<div class="w-3 h-3 rounded-full bg-current"></div>
</div>
<span><%= description %></span>
</label>
</div>
@ -423,10 +433,23 @@ defmodule LivebookWeb.FormComponents do
~H"""
<.field_wrapper id={@id} name={@name} label={@label} errors={@errors} help={@help}>
<select id={@id} name={@name} class={["input", @class]} {@rest}>
<option :if={@prompt} value=""><%= @prompt %></option>
<%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
</select>
<div class="block relative">
<select
id={@id}
name={@name}
class={[
"w-full px-3 py-2 pr-7 appearance-none bg-gray-50 text-sm border border-gray-200 rounded-lg placeholder-gray-400 text-gray-600 phx-form-error:border-red-300",
@class
]}
{@rest}
>
<option :if={@prompt} value=""><%= @prompt %></option>
<%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
<.remix_icon icon="arrow-down-s-line" />
</div>
</div>
</.field_wrapper>
"""
end

View file

@ -112,15 +112,16 @@ defmodule LivebookWeb.HomeLive.SessionListComponent do
data-test-session-id={session.id}
>
<div id={"#{session.id}-checkbox"} phx-update="ignore">
<input
type="checkbox"
name="session_ids[]"
value={session.id}
aria-label={session.notebook_name}
class="checkbox hidden mr-3"
data-el-bulk-edit-member
phx-click={JS.dispatch("lb:session_list:on_selection_change")}
/>
<div class="hidden mr-3" data-el-bulk-edit-member>
<.checkbox_field
name="session_ids[]"
value={nil}
checked_value={session.id}
unchecked_value={nil}
aria-label={session.notebook_name}
phx-click={JS.dispatch("lb:session_list:on_selection_change")}
/>
</div>
</div>
<div class="grow flex flex-col items-start">
<.link

View file

@ -147,15 +147,14 @@ defmodule LivebookWeb.Output.InputComponent do
defp input_output(%{attrs: %{type: :select}} = assigns) do
~H"""
<select data-el-input class="input w-60" name="html_value">
<option
:for={{{key, label}, idx} <- Enum.with_index(@attrs.options)}
value={idx}
selected={@value == key}
>
<%= label %>
</option>
</select>
<div class="w-60">
<.select_field
name="html_value"
value={Enum.find_index(@attrs.options, fn {key, _label} -> key == @value end)}
options={Enum.with_index(@attrs.options, fn {_key, label}, idx -> {label, idx} end)}
data-el-input
/>
</div>
"""
end