mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-10-30 23:36:39 +08:00
Migrate more CSS classes to components
This commit is contained in:
Jonatan Kłosko
parent
373e1e888d
commit
d3f33a045c
5 changed files with 58 additions and 74 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)}>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue