Simplify user modals (#1034)

* Simplify user modals

* Naming
This commit is contained in:
Jonatan Kłosko 2022-03-02 00:43:06 +01:00 committed by GitHub
parent 2e1f6774f4
commit 1dc7c43b70
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 28 additions and 51 deletions

View file

@ -27,10 +27,7 @@ defmodule LivebookWeb.ExploreLive do
<div class="flex grow h-full">
<SidebarHelpers.sidebar>
<SidebarHelpers.logo_item socket={@socket} />
<SidebarHelpers.shared_home_footer
socket={@socket}
current_user={@current_user}
user_path={Routes.explore_path(@socket, :user)} />
<SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} />
</SidebarHelpers.sidebar>
<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-8">
@ -73,11 +70,7 @@ defmodule LivebookWeb.ExploreLive do
</div>
</div>
<%= if @live_action == :user do %>
<.current_user_modal
return_to={Routes.explore_path(@socket, :page)}
current_user={@current_user} />
<% end %>
<.current_user_modal current_user={@current_user} />
"""
end

View file

@ -35,10 +35,7 @@ defmodule LivebookWeb.HomeLive do
<div class="flex grow h-full">
<.live_region role="alert" />
<SidebarHelpers.sidebar>
<SidebarHelpers.shared_home_footer
socket={@socket}
current_user={@current_user}
user_path={Routes.home_path(@socket, :user)} />
<SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} />
</SidebarHelpers.sidebar>
<div class="grow px-6 py-8 overflow-y-auto">
<div class="max-w-screen-lg w-full mx-auto px-4 pb-8 space-y-4">
@ -116,11 +113,7 @@ defmodule LivebookWeb.HomeLive do
</div>
</div>
<%= if @live_action == :user do %>
<.current_user_modal
return_to={@self_path}
current_user={@current_user} />
<% end %>
<.current_user_modal current_user={@current_user} />
<%= if @live_action == :close_session do %>
<.modal id="close-session-modal" show class="w-full max-w-xl" patch={@self_path}>

View file

@ -120,9 +120,7 @@ defmodule LivebookWeb.SessionLive do
label="Keyboard shortcuts (?)"
path={Routes.session_path(@socket, :shortcuts, @session.id)}
active={@live_action == :shortcuts} />
<SidebarHelpers.user_item
current_user={@current_user}
path={Routes.session_path(@socket, :user, @session.id)} />
<SidebarHelpers.user_item current_user={@current_user} />
</SidebarHelpers.sidebar>
<div class="flex flex-col h-full w-full max-w-xs absolute z-30 top-0 left-[64px] overflow-y-auto shadow-xl md:static md:shadow-none bg-gray-50 border-r border-gray-100 px-6 py-10"
data-element="side-panel">
@ -226,11 +224,7 @@ defmodule LivebookWeb.SessionLive do
</div>
</div>
<%= if @live_action == :user do %>
<.current_user_modal
return_to={@self_path}
current_user={@current_user} />
<% end %>
<.current_user_modal return_to={@self_path} current_user={@current_user} />
<%= if @live_action == :runtime_settings do %>
<.modal id="runtime-settings-modal" show class="w-full max-w-4xl" patch={@self_path}>

View file

@ -24,10 +24,7 @@ defmodule LivebookWeb.SettingsLive do
<div class="flex grow h-full">
<SidebarHelpers.sidebar>
<SidebarHelpers.logo_item socket={@socket} />
<SidebarHelpers.shared_home_footer
socket={@socket}
current_user={@current_user}
user_path={Routes.settings_path(@socket, :user)} />
<SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} />
</SidebarHelpers.sidebar>
<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">
@ -115,11 +112,7 @@ defmodule LivebookWeb.SettingsLive do
</div>
</div>
<%= if @live_action == :user do %>
<.current_user_modal
return_to={Routes.settings_path(@socket, :page)}
current_user={@current_user} />
<% end %>
<.current_user_modal current_user={@current_user} />
<%= if @live_action == :add_file_system do %>
<.modal id="add-file-system-modal" show class="w-full max-w-3xl" patch={Routes.settings_path(@socket, :page)}>

View file

@ -89,11 +89,11 @@ defmodule LivebookWeb.SidebarHelpers do
def user_item(assigns) do
~H"""
<span class="tooltip right distant" data-tooltip="User profile">
<%= live_patch to: @path,
class: "text-gray-400 rounded-xl h-8 w-8 flex items-center justify-center mt-2",
aria_label: "user profile" do %>
<button class="text-gray-400 rounded-xl h-8 w-8 flex items-center justify-center mt-2"
aria_label="user profile"
phx-click={show_current_user_modal()}>
<.user_avatar user={@current_user} text_class="text-xs" />
<% end %>
</button>
</span>
"""
end
@ -114,7 +114,7 @@ defmodule LivebookWeb.SidebarHelpers do
label="Settings"
path={Routes.settings_path(@socket, :page)}
active={false} />
<.user_item current_user={@current_user} path={@user_path} />
<.user_item current_user={@current_user} />
"""
end

View file

@ -28,7 +28,7 @@ defmodule LivebookWeb.UserComponent do
<.user_avatar user={@preview_user} class="h-20 w-20" text_class="text-3xl" />
</div>
<.form let={f} for={:data}
phx-submit="save"
phx-submit={@on_save |> JS.push("save")}
phx-change="validate"
phx-target={@myself}
id="user_form"
@ -95,6 +95,6 @@ defmodule LivebookWeb.UserComponent do
def handle_event("save", %{"data" => data}, socket) do
{:ok, user} = User.change(socket.assigns.user, data)
Livebook.Users.broadcast_change(user)
{:noreply, push_patch(socket, to: socket.assigns.return_to)}
{:noreply, socket}
end
end

View file

@ -1,6 +1,10 @@
defmodule LivebookWeb.UserHelpers do
use Phoenix.Component
import LivebookWeb.Helpers
alias Phoenix.LiveView.JS
@doc """
Renders user avatar.
@ -43,16 +47,20 @@ defmodule LivebookWeb.UserHelpers do
## Examples
<.current_user_modal return_to={...} current_user={@current_user} />
<.current_user_modal current_user={@current_user} />
"""
def current_user_modal(assigns) do
~H"""
<LivebookWeb.Helpers.modal id="user-modal" show class="w-full max-w-sm" patch={@return_to}>
<.modal id="user-modal" class="w-full max-w-sm">
<.live_component module={LivebookWeb.UserComponent}
id="user"
return_to={@return_to}
user={@current_user} />
</LivebookWeb.Helpers.modal>
user={@current_user}
on_save={hide_current_user_modal()} />
</.modal>
"""
end
def show_current_user_modal(js \\ %JS{}), do: show_modal(js, "user-modal")
def hide_current_user_modal(js \\ %JS{}), do: hide_modal(js, "user-modal")
end

View file

@ -44,21 +44,17 @@ defmodule LivebookWeb.Router do
pipe_through [:browser, :auth]
live "/", HomeLive, :page
live "/home/user-profile", HomeLive, :user
live "/home/import/:tab", HomeLive, :import
live "/home/sessions/:session_id/close", HomeLive, :close_session
live "/home/sessions/edit_sessions/:action", HomeLive, :edit_sessions
live "/settings", SettingsLive, :page
live "/settings/user-profile", SettingsLive, :user
live "/settings/add-file-system", SettingsLive, :add_file_system
live "/explore", ExploreLive, :page
live "/explore/user-profile", ExploreLive, :user
live "/explore/notebooks/:slug", ExploreLive, :notebook
live "/sessions/:id", SessionLive, :page
live "/sessions/:id/user-profile", SessionLive, :user
live "/sessions/:id/shortcuts", SessionLive, :shortcuts
live "/sessions/:id/settings/runtime", SessionLive, :runtime_settings
live "/sessions/:id/settings/file", SessionLive, :file_settings