From 4837f35487e949239d9af412f58f6dbfffbf6acd Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 28 May 2022 22:43:27 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/5011

---
 app/src/assets/scss/base.scss        |  6 ++++++
 app/src/editor/util.ts               |  1 +
 app/src/layout/dock/Outline.ts       | 18 ++++++++++++------
 app/src/mobile/util/MobileOutline.ts |  2 +-
 app/src/util/Tree.ts                 | 14 +++-----------
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index 0f1b70ee5..4e948c4eb 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -62,6 +62,12 @@ progressLoading: 400 // 需大于 .b3-dialog
   }
 }
 
+.outline__title {
+  padding: 0 8px;
+  white-space: nowrap;
+  line-height: 30px;
+}
+
 .fullscreen {
   position: fixed;
   top: 0;
diff --git a/app/src/editor/util.ts b/app/src/editor/util.ts
index 41d371ae3..caa451f6f 100644
--- a/app/src/editor/util.ts
+++ b/app/src/editor/util.ts
@@ -439,6 +439,7 @@ const updateOutline = (models: IModels, protyle: IProtyle, reload = false) => {
             fetchPost("/api/outline/getDocOutline", {
                 id: blockId,
             }, response => {
+                item.updateDocTitle(protyle.title.editElement.textContent);
                 item.update(response, blockId);
                 if (protyle && getSelection().rangeCount > 0) {
                     const startContainer = getSelection().getRangeAt(0).startContainer;
diff --git a/app/src/layout/dock/Outline.ts b/app/src/layout/dock/Outline.ts
index 73c068aea..15a2c8c95 100644
--- a/app/src/layout/dock/Outline.ts
+++ b/app/src/layout/dock/Outline.ts
@@ -10,6 +10,7 @@ import {openFileById, updateBacklinkGraph} from "../../editor/util";
 import {Constants} from "../../constants";
 import {focusBlock} from "../../protyle/util/selection";
 import {pushBack} from "../../util/backForward";
+import {escapeHtml} from "../../util/escape";
 
 export class Outline extends Model {
     private tree: Tree;
@@ -45,11 +46,7 @@ export class Outline extends Model {
                             if (this.type === "local" && this.blockId === data.data.id) {
                                 this.parent.updateTitle(data.data.title);
                             } else {
-                                fetchPost("/api/outline/getDocOutline", {
-                                    id: this.blockId,
-                                }, response => {
-                                    this.update(response);
-                                });
+                                this.updateDocTitle(data.data.title);
                             }
                             break;
                         case "unmount":
@@ -84,6 +81,7 @@ export class Outline extends Model {
     <span class="${this.type === "local" ? "fn__none " : ""}fn__space"></span>
     <span data-type="min" class="${this.type === "local" ? "fn__none " : ""}block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
 </div>
+<div class="fn__ellipsis outline__title"></div>
 <div class="fn__flex-1"></div>`;
         this.element = options.tab.panelElement.lastElementChild as HTMLElement;
         this.headerElement = options.tab.panelElement.firstElementChild as HTMLElement;
@@ -117,7 +115,7 @@ export class Outline extends Model {
         });
         // 为了快捷键的 dispatch
         options.tab.panelElement.querySelector('[data-type="collapse"]').addEventListener("click", () => {
-            this.tree.collapseAll(true);
+            this.tree.collapseAll();
         });
         options.tab.panelElement.querySelector('[data-type="expand"]').addEventListener("click", (event: MouseEvent & { target: Element }) => {
             const iconElement = hasClosestByClassName(event.target, "block__icon");
@@ -154,6 +152,7 @@ export class Outline extends Model {
         fetchPost("/api/outline/getDocOutline", {
             id: this.blockId,
         }, response => {
+            this.updateDocTitle();
             this.update(response);
         });
 
@@ -162,6 +161,13 @@ export class Outline extends Model {
         }
     }
 
+    public updateDocTitle(title = "") {
+        if (this.type === "pin") {
+            this.headerElement.nextElementSibling.innerHTML = escapeHtml(title);
+            this.headerElement.nextElementSibling.setAttribute("title", title);
+        }
+    }
+
     private onTransaction(data: IWebSocketData) {
         let needReload = false;
         data.data[0].doOperations.forEach((item: IOperation) => {
diff --git a/app/src/mobile/util/MobileOutline.ts b/app/src/mobile/util/MobileOutline.ts
index 6b2a48bc9..2f96de306 100644
--- a/app/src/mobile/util/MobileOutline.ts
+++ b/app/src/mobile/util/MobileOutline.ts
@@ -45,7 +45,7 @@ export class MobileOutline {
             }
         });
         this.element.firstElementChild.querySelector('[data-type="collapse"]').addEventListener(getEventName(), () => {
-            this.tree.collapseAll(true);
+            this.tree.collapseAll();
         });
         const expandElement = this.element.firstElementChild.querySelector('[data-type="expand"]');
         expandElement.addEventListener(getEventName(), () => {
diff --git a/app/src/util/Tree.ts b/app/src/util/Tree.ts
index be1039a23..14d767d81 100644
--- a/app/src/util/Tree.ts
+++ b/app/src/util/Tree.ts
@@ -226,22 +226,14 @@ data-def-path="${item.defPath}">
         });
     }
 
-    public collapseAll(isFirst = false) {
+    public collapseAll() {
         this.element.querySelectorAll("ul").forEach(item => {
             if (!item.classList.contains("b3-list")) {
-                if (isFirst && item.parentElement.classList.contains("b3-list")) {
-                    // 第一层级不进行缩放
-                } else {
-                    item.classList.add("fn__none");
-                }
+                item.classList.add("fn__none");
             }
         });
         this.element.querySelectorAll(".b3-list-item__arrow").forEach(item => {
-            if (isFirst && item.parentElement.parentElement.parentElement.classList.contains("b3-list")) {
-                // 第一层级不进行缩放
-            } else {
-                item.classList.remove("b3-list-item__arrow--open");
-            }
+            item.classList.remove("b3-list-item__arrow--open");
         });
     }