Add keyboard shortcut for collapse/expand section (#1779)

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
This commit is contained in:
Jannik Becher 2023-03-13 22:37:11 +01:00 committed by GitHub
parent 77d03de114
commit 336ae74fb6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 63 additions and 2 deletions

View file

@ -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] {

View file

@ -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) {

View file

@ -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

View file

@ -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"},