Rename sections list references to outline

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

View file

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

View file

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

View file

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

View file

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