mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-10-06 19:46:00 +08:00
Add sidebar toggle on mobile (#1183)
Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com> Co-authored-by: José Valim <jose.valim@gmail.com>
This commit is contained in:
ByeongUk Choi
GitHub
parent
b1bd411199
commit
0a87fee7b6
3 changed files with 126 additions and 73 deletions
|
|
@ -137,7 +137,15 @@ defmodule LivebookWeb.SessionLive do
|
|||
</div>
|
||||
<div class="grow overflow-y-auto relative" data-el-notebook>
|
||||
<div data-el-js-view-iframes phx-update="ignore" id="js-view-iframes"></div>
|
||||
<div class="w-full max-w-screen-lg pl-8 md:pl-16 pr-16 mx-auto py-7" data-el-notebook-content>
|
||||
<LivebookWeb.SessionLive.IndicatorsComponent.render
|
||||
socket={@socket}
|
||||
session_id={@session.id}
|
||||
file={@data_view.file}
|
||||
dirty={@data_view.dirty}
|
||||
autosave_interval_s={@data_view.autosave_interval_s}
|
||||
runtime={@data_view.runtime}
|
||||
global_status={@data_view.global_status} />
|
||||
<div class="w-full max-w-screen-lg px-4 sm:pl-8 sm:pr-16 md:pl-16 pt-4 sm:py-7 mx-auto" data-el-notebook-content>
|
||||
<div class="flex items-center pb-4 mb-2 space-x-4 border-b border-gray-200"
|
||||
data-el-notebook-headline
|
||||
data-focusable-id="notebook"
|
||||
|
|
@ -222,16 +230,6 @@ defmodule LivebookWeb.SessionLive do
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fixed bottom-[0.4rem] right-[1.5rem]">
|
||||
<LivebookWeb.SessionLive.IndicatorsComponent.render
|
||||
socket={@socket}
|
||||
session_id={@session.id}
|
||||
file={@data_view.file}
|
||||
dirty={@data_view.dirty}
|
||||
autosave_interval_s={@data_view.autosave_interval_s}
|
||||
runtime={@data_view.runtime}
|
||||
global_status={@data_view.global_status} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<.current_user_modal return_to={@self_path} current_user={@current_user} />
|
||||
|
|
|
|||
|
|
@ -1,69 +1,47 @@
|
|||
defmodule LivebookWeb.SessionLive.IndicatorsComponent do
|
||||
use LivebookWeb, :live_component
|
||||
use Phoenix.Component
|
||||
|
||||
alias Phoenix.LiveView.JS
|
||||
alias LivebookWeb.Router.Helpers, as: Routes
|
||||
|
||||
import LivebookWeb.LiveHelpers
|
||||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<div class="flex flex-col items-center space-y-2" data-el-notebook-indicators>
|
||||
<.code_zen_indicator />
|
||||
<%= if @file do %>
|
||||
<%= if @dirty do %>
|
||||
<%= if @autosave_interval_s do %>
|
||||
<span class="tooltip left" data-tooltip="Autosave pending">
|
||||
<%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-blue-400 hover:bg-blue-50 focus:bg-blue-50",
|
||||
aria_label: "autosave pending, click to open file settings" do %>
|
||||
<.remix_icon icon="save-line" class="text-xl text-blue-500" />
|
||||
<% end %>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="tooltip left" data-tooltip="No autosave configured, make sure to save manually">
|
||||
<%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-yellow-bright-200 hover:bg-red-50 focus:bg-red-50",
|
||||
aria_label: "no autosave configured, click to open file settings" do %>
|
||||
<.remix_icon icon="save-line" class="text-xl text-yellow-bright-300" />
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="tooltip left" data-tooltip="Notebook saved">
|
||||
<%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-green-bright-300 hover:bg-green-bright-50 focus:bg-green-bright-50",
|
||||
aria_label: "notebook saved, click to open file settings" do %>
|
||||
<.remix_icon icon="save-line" class="text-xl text-green-bright-400" />
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="tooltip left" data-tooltip="Choose a file to save the notebook">
|
||||
<%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100",
|
||||
aria_label: "choose a file to save the notebook" do %>
|
||||
<.remix_icon icon="save-line" class="text-xl text-gray-400" />
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
<div class="flex items-center justify-between sticky px-2 top-0 left-0 right-0 z-[500] bg-white border-b border-gray-200">
|
||||
<div class="sm:hidden text-2xl text-gray-400 hover:text-gray-600 focus:text-gray-600 rounded-xl h-10 w-10 flex items-center justify-center">
|
||||
<button
|
||||
aria-label="hide sidebar"
|
||||
data-el-toggle-sidebar
|
||||
phx-click={JS.add_class("hidden sm:flex", to: "[data-el-sidebar]") |> JS.toggle(to: "[data-el-toggle-sidebar]", display: "flex")}>
|
||||
<.remix_icon icon="menu-fold-line" />
|
||||
</button>
|
||||
|
||||
<%= if Livebook.Runtime.connected?(@runtime) do %>
|
||||
<.global_status
|
||||
status={elem(@global_status, 0)}
|
||||
cell_id={elem(@global_status, 1)} />
|
||||
<% else %>
|
||||
<span class="tooltip left" data-tooltip="Choose a runtime to run the notebook in">
|
||||
<%= live_patch to: Routes.session_path(@socket, :runtime_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100",
|
||||
aria_label: "choose a runtime to run the notebook in" do %>
|
||||
<.remix_icon icon="loader-3-line" class="text-xl text-gray-400" />
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
|
||||
<%# Note: this indicator is shown/hidden using CSS based on the current mode %>
|
||||
<span class="tooltip left" data-tooltip="Insert mode" data-el-insert-mode-indicator>
|
||||
<span class="text-sm font-medium text-gray-400 cursor-default">
|
||||
ins
|
||||
</span>
|
||||
</span>
|
||||
<button
|
||||
class="hidden"
|
||||
aria-label="show sidebar"
|
||||
data-el-toggle-sidebar
|
||||
phx-click={JS.remove_class("hidden sm:flex", to: "[data-el-sidebar]") |> JS.toggle(to: "[data-el-toggle-sidebar]", display: "flex")}>
|
||||
<.remix_icon icon="menu-unfold-line" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="sm:fixed bottom-[0.4rem] right-[1.5rem]">
|
||||
<div class="flex flex-row-reverse sm:flex-col items-center justify-end p-2 sm:p-0 space-x-2 space-x-reverse sm:space-x-0 sm:space-y-2" data-el-notebook-indicators>
|
||||
<.code_zen_indicator />
|
||||
<.persistence_indicator
|
||||
file={@file}
|
||||
dirty={@dirty}
|
||||
autosave_interval_s={@autosave_interval_s}
|
||||
socket={@socket}
|
||||
session_id={@session_id} />
|
||||
<.runtime_indicator
|
||||
runtime={@runtime}
|
||||
global_status={@global_status}
|
||||
socket={@socket}
|
||||
session_id={@session_id} />
|
||||
<.insert_mode_indicator />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
|
@ -105,6 +83,72 @@ defmodule LivebookWeb.SessionLive.IndicatorsComponent do
|
|||
"""
|
||||
end
|
||||
|
||||
defp persistence_indicator(%{file: nil} = assigns) do
|
||||
~H"""
|
||||
<span class="tooltip left" data-tooltip="Choose a file to save the notebook">
|
||||
<%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100",
|
||||
aria_label: "choose a file to save the notebook" do %>
|
||||
<.remix_icon icon="save-line" class="text-xl text-gray-400" />
|
||||
<% end %>
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp persistence_indicator(%{dirty: false} = assigns) do
|
||||
~H"""
|
||||
<span class="tooltip left" data-tooltip="Notebook saved">
|
||||
<%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-green-bright-300 hover:bg-green-bright-50 focus:bg-green-bright-50",
|
||||
aria_label: "notebook saved, click to open file settings" do %>
|
||||
<.remix_icon icon="save-line" class="text-xl text-green-bright-400" />
|
||||
<% end %>
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp persistence_indicator(%{autosave_interval_s: nil} = assigns) do
|
||||
~H"""
|
||||
<span class="tooltip left" data-tooltip="No autosave configured, make sure to save manually">
|
||||
<%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-yellow-bright-200 hover:bg-red-50 focus:bg-red-50",
|
||||
aria_label: "no autosave configured, click to open file settings" do %>
|
||||
<.remix_icon icon="save-line" class="text-xl text-yellow-bright-300" />
|
||||
<% end %>
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp persistence_indicator(assigns) do
|
||||
~H"""
|
||||
<span class="tooltip left" data-tooltip="Autosave pending">
|
||||
<%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-blue-400 hover:bg-blue-50 focus:bg-blue-50",
|
||||
aria_label: "autosave pending, click to open file settings" do %>
|
||||
<.remix_icon icon="save-line" class="text-xl text-blue-500" />
|
||||
<% end %>
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp runtime_indicator(assigns) do
|
||||
~H"""
|
||||
<%= if Livebook.Runtime.connected?(@runtime) do %>
|
||||
<.global_status
|
||||
status={elem(@global_status, 0)}
|
||||
cell_id={elem(@global_status, 1)} />
|
||||
<% else %>
|
||||
<span class="tooltip left" data-tooltip="Choose a runtime to run the notebook in">
|
||||
<%= live_patch to: Routes.session_path(@socket, :runtime_settings, @session_id),
|
||||
class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100",
|
||||
aria_label: "choose a runtime to run the notebook in" do %>
|
||||
<.remix_icon icon="loader-3-line" class="text-xl text-gray-400" />
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
"""
|
||||
end
|
||||
|
||||
defp global_status(%{status: :evaluating} = assigns) do
|
||||
~H"""
|
||||
<span class="tooltip left" data-tooltip="Go to evaluating cell">
|
||||
|
|
@ -154,4 +198,15 @@ defmodule LivebookWeb.SessionLive.IndicatorsComponent do
|
|||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp insert_mode_indicator(assigns) do
|
||||
~H"""
|
||||
<%# Note: this indicator is shown/hidden using CSS based on the current mode %>
|
||||
<span class="tooltip left" data-tooltip="Insert mode" data-el-insert-mode-indicator>
|
||||
<span class="text-sm font-medium text-gray-400 cursor-default">
|
||||
ins
|
||||
</span>
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ defmodule LivebookWeb.SidebarHelpers do
|
|||
"""
|
||||
def sidebar(assigns) do
|
||||
~H"""
|
||||
<nav class="w-16 flex flex-col items-center space-y-4 px-3 py-7 bg-gray-900" aria-label="sidebar">
|
||||
<nav class="w-16 flex flex-col items-center px-3 py-1 space-y-2 sm:space-y-4 sm:py-7 bg-gray-900" aria-label="sidebar" data-el-sidebar>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</nav>
|
||||
"""
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue