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:
		
							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