livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2024-09-20 10:05:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rename sections list references to outline

Browse source
This commit is contained in:
Jonatan Kłosko 2024-08-25 22:27:50 +09:00
parent 0142d4720b
commit 66d3ac6d27
4 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/css/js_interop.css
View file

@ -115,7 +115,7 @@ solely client-side operations.
@apply invisible;
}
[data-el-sections-list-item][data-js-is-viewed] {
[data-el-outline-item][data-js-is-viewed] {
@apply text-gray-900;
}
@ -219,8 +219,8 @@ solely client-side operations.
@apply hidden;
}
[data-el-session]:not([data-js-side-panel-content="sections-list"])
[data-el-sections-list] {
[data-el-session]:not([data-js-side-panel-content="outline"])
[data-el-outline] {
@apply hidden;
}
@ -254,8 +254,8 @@ solely client-side operations.
@apply hidden;
}
[data-el-session][data-js-side-panel-content="sections-list"]
[data-el-sections-list-toggle] {
[data-el-session][data-js-side-panel-content="outline"]
[data-el-outline-toggle] {
@apply text-gray-50 bg-gray-700;
}

26
assets/js/hooks/session.js
View file

@ -107,8 +107,8 @@ const Session = {
document.addEventListener("focus", this._handleDocumentFocus, true);
document.addEventListener("click", this._handleDocumentClick);
this.getElement("sections-list").addEventListener("click", (event) => {
this.handleSectionsListClick(event);
this.getElement("outline").addEventListener("click", (event) => {
this.handleOutlineClick(event);
this.handleCellIndicatorsClick(event);
});
@ -116,8 +116,8 @@ const Session = {
this.handleClientsListClick(event),
);
this.getElement("sections-list-toggle").addEventListener("click", (event) =>
this.toggleSectionsList(),
this.getElement("outline-toggle").addEventListener("click", (event) =>
this.toggleOutline(),
);
this.getElement("clients-list-toggle").addEventListener("click", (event) =>
@ -374,7 +374,7 @@ const Session = {
} else if (keyBuffer.tryMatch(["e", "s"])) {
this.queueFocusedSectionEvaluation();
} else if (keyBuffer.tryMatch(["s", "o"])) {
this.toggleSectionsList();
this.toggleOutline();
} else if (keyBuffer.tryMatch(["s", "e"])) {
this.toggleSecretsList();
} else if (keyBuffer.tryMatch(["s", "a"])) {
@ -575,10 +575,10 @@ const Session = {
},
/**
* Handles section link clicks in the section list.
* Handles link clicks in the outline panel.
*/
handleSectionsListClick(event) {
const sectionButton = event.target.closest(`[data-el-sections-list-item]`);
handleOutlineClick(event) {
const sectionButton = event.target.closest(`[data-el-outline-item]`);
if (sectionButton) {
const sectionId = sectionButton.getAttribute("data-section-id");
@ -587,7 +587,7 @@ const Session = {
}
const sectionDefinitionButton = event.target.closest(
`[data-el-sections-list-definition-item]`,
`[data-el-outline-definition-item]`,
);
if (sectionDefinitionButton) {
@ -695,7 +695,7 @@ const Session = {
*/
updateSectionListHighlight() {
const currentListItem = this.el.querySelector(
`[data-el-sections-list-item][data-js-is-viewed]`,
`[data-el-outline-item][data-js-is-viewed]`,
);
if (currentListItem) {
@ -714,7 +714,7 @@ const Session = {
if (viewedSection) {
const sectionId = viewedSection.getAttribute("data-section-id");
const listItem = this.el.querySelector(
`[data-el-sections-list-item][data-section-id="${sectionId}"]`,
`[data-el-outline-item][data-section-id="${sectionId}"]`,
);
listItem.setAttribute("data-js-is-viewed", "");
}
@ -830,8 +830,8 @@ const Session = {
// User action handlers (mostly keybindings)
toggleSectionsList(force = null) {
this.toggleSidePanelContent("sections-list", force);
toggleOutline(force = null) {
this.toggleSidePanelContent("outline", force);
},
toggleClientsList(force = null) {

8
lib/livebook_web/live/session_live/render.ex
View file

@ -333,7 +333,7 @@ defmodule LivebookWeb.SessionLive.Render do
<.button_item
icon="node-tree"
label="Outline (so)"
button_attrs={["data-el-sections-list-toggle": true]}
button_attrs={["data-el-outline-toggle": true]}
/>
<.button_item
@ -419,7 +419,7 @@ defmodule LivebookWeb.SessionLive.Render 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 class="flex grow" data-el-sections-list>
<div class="flex grow" data-el-outline>
<.outline_list data_view={@data_view} />
</div>
<div data-el-clients-list>
@ -508,7 +508,7 @@ defmodule LivebookWeb.SessionLive.Render do
<div class="flex justify-between items-center">
<button
class="grow flex items-center gap-1 text-gray-500 hover:text-gray-900 text-left"
data-el-sections-list-item
data-el-outline-item
data-section-id={section_item.id}
>
<.remix_icon icon="h-2" class="text-lg font-normal leading-none" />
@ -538,7 +538,7 @@ defmodule LivebookWeb.SessionLive.Render do
<li :for={definition <- section_item.identifier_definitions}>
<button
class="flex items-center max-w-full text-gray-500 hover:text-gray-900 text-sm gap-1"
data-el-sections-list-definition-item
data-el-outline-definition-item
data-file={definition.file}
data-line={definition.line}
title={definition.label}

6
test/livebook_web/live/session_live_test.exs
View file

@ -2653,7 +2653,7 @@ defmodule LivebookWeb.SessionLiveTest do
assert has_element?(
view,
"[data-el-sections-list-definition-item] span",
"[data-el-outline-definition-item] span",
"LivebookWeb.SessionLiveTest.MyBigModuleName"
)
@ -2676,13 +2676,13 @@ defmodule LivebookWeb.SessionLiveTest do
assert has_element?(
view,
"[data-el-sections-list-definition-item] span",
"[data-el-outline-definition-item] span",
"LivebookWeb.SessionLiveTest.AnotherModule"
)
assert has_element?(
view,
"[data-el-sections-list-definition-item] span",
"[data-el-outline-definition-item] span",
"LivebookWeb.SessionLiveTest.Foo"
)