livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-12-17 21:50:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

Organize settings page (#1133)

Browse source 
* Fix indentation in HTML format

* Adds more spacing between items

* Use horizontal lines to better mark the sections,
  unless the header itself is followed by a table.

Those changes are inspired by GitHub's current
settings page.
This commit is contained in:
José Valim 2022-04-19 11:29:26 +02:00 • committed by GitHub
parent 6e66c80120
commit d0a98f88f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 65 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
lib/livebook_web/live/settings_live.ex
View file

@ -30,9 +30,9 @@ defmodule LivebookWeb.SettingsLive do
<SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} /> <SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} />
</SidebarHelpers.sidebar> </SidebarHelpers.sidebar>
<div class="grow px-6 py-8 overflow-y-auto"> <div class="grow px-6 py-8 overflow-y-auto">
<div class="max-w-screen-md w-full mx-auto px-4 pb-8 space-y-16"> <div class="max-w-screen-md w-full mx-auto px-4 pb-8 space-y-20">
<!-- System settings section --> <!-- System settings section -->
<div class="flex flex-col space-y-8"> <div class="flex flex-col space-y-10">
<div> <div>
<PageHelpers.title text="System settings" socket={@socket} /> <PageHelpers.title text="System settings" socket={@socket} />
<p class="mt-4 text-gray-700"> <p class="mt-4 text-gray-700">
@ -43,7 +43,7 @@ defmodule LivebookWeb.SettingsLive do
</div> </div>
<!-- System details --> <!-- System details -->
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-2">
<h2 class="text-xl text-gray-800 font-semibold"> <h2 class="text-xl text-gray-800 font-semibold">
About About
</h2> </h2>
@ -75,44 +75,46 @@ defmodule LivebookWeb.SettingsLive do
<% end %> <% end %>
</div> </div>
</div> </div>
<!-- Preferences --> <!-- Updates -->
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<h2 class="text-xl text-gray-800 font-semibold"> <h2 class="text-xl text-gray-800 font-semibold pb-2 border-b border-gray-200">
Preferences Updates
</h2> </h2>
<form phx-change="save" onsubmit="return false;"> <form class="mt-4" phx-change="save" onsubmit="return false;">
<.switch_checkbox <.switch_checkbox
name="update_check_enabled" name="update_check_enabled"
label="Show available Livebook updates" label="Show banner when a new Livebook version is available"
checked={@update_check_enabled} /> checked={@update_check_enabled} />
</form> </form>
</div> </div>
<!-- Autosave path configuration --> <!-- Autosave path configuration -->
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<div> <h2 class="text-xl text-gray-800 font-semibold pb-2 border-b border-gray-200">
<h2 class="text-xl text-gray-800 font-semibold"> Autosave
Autosave location
</h2> </h2>
<p class="mt-4 text-gray-700"> <p class="text-gray-700">
A directory to temporarily keep notebooks until they are persisted. The directory to keep unsaved notebooks.
</p> </p>
</div>
<.autosave_path_select state={@autosave_path_state} /> <.autosave_path_select state={@autosave_path_state} />
</div> </div>
<!-- File systems configuration --> <!-- File systems configuration -->
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<div class="flex justify-between items-center"> <h2 class="text-xl text-gray-800 font-semibold pb-2 border-b border-gray-200">
<h2 class="text-xl text-gray-800 font-semibold">
File systems File systems
</h2> </h2>
</div> <p class="mt-4 text-gray-700">
File systems are used to store notebooks. The local disk filesystem
is visible only to the current machine, but alternative file systems
are available, such as S3-based storages.
</p>
<LivebookWeb.SettingsLive.FileSystemsComponent.render <LivebookWeb.SettingsLive.FileSystemsComponent.render
file_systems={@file_systems} file_systems={@file_systems}
socket={@socket} /> socket={@socket} />
</div> </div>
</div> </div>
<!-- User settings section --> <!-- User settings section -->
<div class="flex flex-col space-y-8"> <div class="flex flex-col space-y-10">
<div> <div>
<h1 class="text-3xl text-gray-800 font-semibold"> <h1 class="text-3xl text-gray-800 font-semibold">
User settings User settings
@ -124,7 +126,7 @@ defmodule LivebookWeb.SettingsLive do
</div> </div>
<!-- Editor configuration --> <!-- Editor configuration -->
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<h2 class="text-xl text-gray-800 font-semibold"> <h2 class="text-xl text-gray-800 font-semibold pb-2 border-b border-gray-200">
Code editor Code editor
</h2> </h2>
<div class="flex flex-col space-y-3" <div class="flex flex-col space-y-3"