mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-10-04 10:44:30 +08:00
Add keyboard shortcut for collapse/expand section (#1779)
Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
This commit is contained in:
parent
77d03de114
commit
336ae74fb6
4 changed files with 63 additions and 2 deletions
|
@ -65,7 +65,9 @@ solely client-side operations.
|
|||
[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-session]:not([data-js-code-zen])
|
||||
[data-el-section][data-js-collapsed]
|
||||
> [data-el-section-content],
|
||||
[data-el-section]:not([data-js-collapsed])
|
||||
> [data-el-section-subheadline-collapsed] {
|
||||
@apply hidden;
|
||||
|
@ -276,6 +278,7 @@ solely client-side operations.
|
|||
|
||||
[data-el-session][data-js-code-zen] [data-el-section-headline],
|
||||
[data-el-session][data-js-code-zen] [data-el-section-subheadline],
|
||||
[data-el-session][data-js-code-zen] [data-el-section-subheadline-collapsed],
|
||||
[data-el-session][data-js-code-zen] [data-el-cell][data-type="markdown"],
|
||||
[data-el-session][data-js-code-zen] [data-el-actions],
|
||||
[data-el-session][data-js-code-zen] [data-el-insert-buttons] {
|
||||
|
|
|
@ -146,6 +146,11 @@ const Session = {
|
|||
(event) => this.el.toggleAttribute("data-js-no-outputs")
|
||||
);
|
||||
|
||||
this.getElement("section-toggle-collapse-all-button").addEventListener(
|
||||
"click",
|
||||
(event) => this.toggleCollapseAllSections()
|
||||
);
|
||||
|
||||
window.addEventListener(
|
||||
"phx:page-loading-stop",
|
||||
() => {
|
||||
|
@ -419,6 +424,10 @@ const Session = {
|
|||
!this.codeZen && this.insertCellAboveFocused("markdown");
|
||||
} else if (keyBuffer.tryMatch(["z"])) {
|
||||
this.setCodeZen(!this.codeZen);
|
||||
} else if (keyBuffer.tryMatch(["c"])) {
|
||||
!this.codeZen && this.toggleCollapseSection();
|
||||
} else if (keyBuffer.tryMatch(["C"])) {
|
||||
!this.codeZen && this.toggleCollapseAllSections();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -979,6 +988,45 @@ const Session = {
|
|||
}
|
||||
},
|
||||
|
||||
toggleCollapseSection() {
|
||||
if (this.focusedId) {
|
||||
const sectionId = this.getSectionIdByFocusableId(this.focusedId);
|
||||
const section = this.getSectionById(sectionId);
|
||||
|
||||
if (section) {
|
||||
if (section.hasAttribute("data-js-collapsed")) {
|
||||
section.removeAttribute("data-js-collapsed");
|
||||
} else {
|
||||
section.setAttribute("data-js-collapsed", "");
|
||||
this.setFocusedEl(sectionId, { scroll: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toggleCollapseAllSections() {
|
||||
const allCollapsed = this.getSections().every((section) =>
|
||||
section.hasAttribute("data-js-collapsed")
|
||||
);
|
||||
|
||||
if (allCollapsed) {
|
||||
this.getSections().forEach((section) => {
|
||||
section.removeAttribute("data-js-collapsed");
|
||||
});
|
||||
} else {
|
||||
this.getSections().forEach((section) => {
|
||||
section.setAttribute("data-js-collapsed", "");
|
||||
});
|
||||
}
|
||||
if (this.focusedId) {
|
||||
const focusedSectionId = this.getSectionIdByFocusableId(this.focusedId);
|
||||
|
||||
if (focusedSectionId) {
|
||||
this.setFocusedEl(focusedSectionId, { scroll: true });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Server event handlers
|
||||
|
||||
handleCellInserted(cellId) {
|
||||
|
|
|
@ -185,7 +185,7 @@ defmodule LivebookWeb.SessionLive do
|
|||
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 pt-16 md:py-8"
|
||||
data-el-side-panel
|
||||
>
|
||||
<div data-el-sections-list>
|
||||
<div class="flex grow" data-el-sections-list>
|
||||
<.sections_list data_view={@data_view} />
|
||||
</div>
|
||||
<div data-el-clients-list>
|
||||
|
@ -600,6 +600,14 @@ defmodule LivebookWeb.SessionLive do
|
|||
<.remix_icon icon="add-line" class="text-lg align-center" />
|
||||
<span>New section</span>
|
||||
</button>
|
||||
<div class="grow"></div>
|
||||
<button
|
||||
class="inline-flex items-center justify-center p-8 py-1 mt-8 space-x-2 text-sm font-medium text-gray-500 border border-gray-400 border-dashed rounded-xl hover:bg-gray-100"
|
||||
data-el-section-toggle-collapse-all-button
|
||||
>
|
||||
<.remix_icon icon="split-cells-vertical" class="text-lg align-center" />
|
||||
<span>Expand/collapse all</span>
|
||||
</button>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
|
|
@ -92,6 +92,8 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
|
|||
%{seq: ["N"], desc: "Insert Code cell above"},
|
||||
%{seq: ["M"], desc: "Insert Markdown cell above"},
|
||||
%{seq: ["z"], desc: "Toggle code zen"},
|
||||
%{seq: ["c"], desc: "Expand/collapse section"},
|
||||
%{seq: ["C"], desc: "Expand/collapse all sections"},
|
||||
%{seq: ["d", "d"], desc: "Delete cell", basic: true},
|
||||
%{seq: ["e", "e"], desc: "Evaluate cell"},
|
||||
%{seq: ["e", "s"], desc: "Evaluate section"},
|
||||
|
|
Loading…
Add table
Reference in a new issue