livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-06 19:46:00 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add section collapse functionality (#1772)

Browse source 
Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
Co-authored-by: José Valim <jose.valim@gmail.com>
This commit is contained in:
Jannik Becher 2023-03-13 14:52:26 +01:00 • committed by GitHub
parent 42bc98a42d
commit cea3246766
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/css/js_interop.css
View file

@ -60,6 +60,17 @@ solely client-side operations.
@apply hidden;
}
[data-el-section][data-js-collapsed] [data-el-section-collapse-button],
[data-el-section]:not([data-js-collapsed])
[data-el-section-headline]:not(:hover):not([data-js-focused])
[data-el-section-collapse-button],
[data-el-section]:not([data-js-collapsed]) [data-el-section-expand-button],
[data-el-section][data-js-collapsed] > [data-el-section-content],
[data-el-section]:not([data-js-collapsed])
> [data-el-section-subheadline-collapsed] {
@apply hidden;
}
[data-el-cell][data-js-focused] {
@apply border-blue-300 border-opacity-100;
}

41
lib/livebook_web/live/session_live/section_component.ex
View file

@ -1,11 +1,13 @@
defmodule LivebookWeb.SessionLive.SectionComponent do
use LivebookWeb, :live_component
alias Phoenix.LiveView.JS
def render(assigns) do
~H"""
<section data-el-section data-section-id={@section_view.id}>
<div
class="flex space-x-4 items-center"
class="flex items-center relative"
data-el-section-headline
id={@section_view.id}
data-focusable-id={@section_view.id}
@ -13,6 +15,32 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
data-on-value-change="set_section_name"
data-metadata={@section_view.id}
>
<div class="absolute left-0 top-0 bottom-0 transform -translate-x-full w-10 flex justify-end items-center pr-2">
<button
class="icon-button"
aria-label="collapse section"
data-el-section-collapse-button
phx-click={
JS.set_attribute({"data-js-collapsed", ""},
to: ~s/section[data-section-id="#{@section_view.id}"]/
)
}
>
<.remix_icon icon="arrow-down-s-line" class="text-xl" />
</button>
<button
class="icon-button"
aria-label="expand section"
data-el-section-expand-button
phx-click={
JS.remove_attribute("data-js-collapsed",
to: ~s/section[data-section-id="#{@section_view.id}"]/
)
}
>
<.remix_icon icon="arrow-right-s-line" class="text-xl" />
</button>
</div>
<h2
class="grow text-gray-800 font-semibold text-2xl px-1 -ml-1 rounded-lg border border-transparent whitespace-pre-wrap cursor-text"
tabindex="0"
@ -22,7 +50,7 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
phx-no-format
><%= @section_view.name %></h2>
<div
class="flex space-x-2 items-center"
class="ml-4 flex space-x-2 items-center"
data-el-section-actions
role="toolbar"
aria-label="section actions"
@ -123,7 +151,14 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
</span>
<span class="leading-none">from ”<%= @section_view.parent.name %>”</span>
</h3>
<div class="container">
<h3
class="mt-2 text-sm text-gray-500 cursor-default select-none"
data-el-section-subheadline-collapsed
>
<%= pluralize(length(@section_view.cell_views), "cell", "cells") %> collapsed
</h3>
<div class="container" data-el-section-content>
<div class="flex flex-col space-y-1">
<.live_component
module={LivebookWeb.SessionLive.InsertButtonsComponent}