From f5ddff696aea9007134d31fa84f92549bdb590ea Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 18 Feb 2023 09:52:26 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/7375

---
 app/src/assets/scss/_layout.scss |  9 +++++++
 app/src/layout/dock/index.ts     | 40 ++++++++++++++++++++++++++++----
 app/src/layout/status.ts         |  2 +-
 app/src/menus/workspace.ts       | 20 +---------------
 4 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/app/src/assets/scss/_layout.scss b/app/src/assets/scss/_layout.scss
index a2183ed65..323001e27 100644
--- a/app/src/assets/scss/_layout.scss
+++ b/app/src/assets/scss/_layout.scss
@@ -310,6 +310,10 @@
   background-color: var(--b3-theme-surface);
   box-sizing: border-box;
 
+  &:hover .dock__item--pin {
+    opacity: 1;
+  }
+
   &#dockLeft {
     border-right: .5px solid var(--b3-border-color);
   }
@@ -356,6 +360,11 @@
     border-radius: 6px;
     margin: 5px;
 
+    &--pin {
+      opacity: 0;
+      transition: var(--b3-transition);
+    }
+
     &:hover,
     &--active {
       background-color: var(--b3-theme-background-light);
diff --git a/app/src/layout/dock/index.ts b/app/src/layout/dock/index.ts
index 1345dab38..7e9c01a2e 100644
--- a/app/src/layout/dock/index.ts
+++ b/app/src/layout/dock/index.ts
@@ -53,6 +53,9 @@ export class Dock {
         this.pin = options.data.pin;
         this.data = {};
         if (options.data.data.length === 0) {
+            this.element.firstElementChild.innerHTML = `<span class="dock__item dock__item--pin b3-tooltips b3-tooltips__${this.getClassDirect(0)}" aria-label="${this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin}">
+    <svg><use xlink:href="#iconPin"></use></svg>
+</span>`;
             this.element.classList.add("fn__none");
         } else {
             this.genButton(options.data.data[0], 0);
@@ -85,6 +88,11 @@ export class Dock {
                     this.toggleModel(type, false, true);
                     event.preventDefault();
                     break;
+                } else if (target.classList.contains("dock__item")) {
+                    this.togglePin();
+                    target.setAttribute("aria-label", this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin);
+                    event.preventDefault();
+                    break;
                 }
                 target = target.parentElement;
             }
@@ -120,6 +128,28 @@ export class Dock {
         }
     }
 
+    public togglePin() {
+        this.pin = !this.pin;
+        const hasActive = this.element.querySelector(".dock__item--active");
+        if (!this.pin) {
+            this.resetDockPosition(hasActive ? true : false);
+            this.resizeElement.classList.add("fn__none");
+            if (hasActive) {
+                this.showDock(true);
+            } else {
+                this.hideDock(true);
+            }
+        } else {
+            this.layout.element.style.opacity = "";
+            this.layout.element.style.transform = "";
+            if (hasActive) {
+                this.resizeElement.classList.remove("fn__none");
+            }
+        }
+        this.layout.element.classList.toggle("layout--float");
+        resizeTabs();
+    }
+
     public resetDockPosition(show: boolean) {
         if (this.position === "Left") {
             this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;
@@ -414,7 +444,7 @@ ${this.position === "Top" ? "top" : "bottom"}:0`);
         sourceElement.setAttribute("data-width", "");
         const type = sourceElement.getAttribute("data-type") as TDockType;
         const sourceDock = getDockByType(type);
-        if (sourceDock.element.querySelectorAll(".dock__item").length === 1) {
+        if (sourceDock.element.querySelectorAll(".dock__item").length === 2) {
             sourceDock.element.classList.add("fn__none");
         }
         const sourceWnd = sourceDock.layout.children[parseInt(sourceElement.getAttribute("data-index"))] as Wnd;
@@ -434,9 +464,9 @@ ${this.position === "Top" ? "top" : "bottom"}:0`);
         sourceElement.classList.add(`b3-tooltips__${this.getClassDirect(index)}`);
         sourceElement.setAttribute("data-index", index.toString());
         if (index === 0) {
-            this.element.firstElementChild.insertAdjacentElement("beforeend", sourceElement);
+            this.element.firstElementChild.insertAdjacentElement("afterbegin", sourceElement);
         } else {
-            this.element.lastElementChild.insertAdjacentElement("beforeend", sourceElement);
+            this.element.lastElementChild.insertAdjacentElement("afterbegin", sourceElement);
         }
         this.element.classList.remove("fn__none");
         resetFloatDockSize();
@@ -512,7 +542,9 @@ ${this.position === "Top" ? "top" : "bottom"}:0`);
             this.data[item.type] = true;
         });
         if (index === 0) {
-            this.element.firstElementChild.innerHTML = html;
+            this.element.firstElementChild.innerHTML = `${html}<span class="dock__item dock__item--pin b3-tooltips b3-tooltips__${this.getClassDirect(index)}" aria-label="${this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin}">
+    <svg><use xlink:href="#iconPin"></use></svg>
+</span>`;
         } else {
             this.element.lastElementChild.innerHTML = html;
         }
diff --git a/app/src/layout/status.ts b/app/src/layout/status.ts
index ec5ab7bca..2e802a0c4 100644
--- a/app/src/layout/status.ts
+++ b/app/src/layout/status.ts
@@ -45,7 +45,7 @@ export const initStatus = (isWindow = false) => {
                 document.querySelectorAll(".dock").forEach(item => {
                     if (dockIsShow) {
                         item.classList.add("fn__none");
-                    } else if (item.querySelectorAll(".dock__item").length > 0) {
+                    } else if (item.querySelectorAll(".dock__item").length > 1) {
                         item.classList.remove("fn__none");
                     }
                 });
diff --git a/app/src/menus/workspace.ts b/app/src/menus/workspace.ts
index 89c6772d6..1a1a63fa5 100644
--- a/app/src/menus/workspace.ts
+++ b/app/src/menus/workspace.ts
@@ -24,25 +24,7 @@ const togglePinDock = (dock: Dock, icon: string) => {
         icon,
         current: !dock.pin,
         click() {
-            dock.pin = !dock.pin;
-            const hasActive = dock.element.querySelector(".dock__item--active");
-            if (!dock.pin) {
-                dock.resetDockPosition(hasActive ? true : false);
-                dock.resizeElement.classList.add("fn__none");
-                if (hasActive) {
-                    dock.showDock(true);
-                } else {
-                    dock.hideDock(true);
-                }
-            } else {
-                dock.layout.element.style.opacity = "";
-                dock.layout.element.style.transform = "";
-                if (hasActive) {
-                    dock.resizeElement.classList.remove("fn__none");
-                }
-            }
-            dock.layout.element.classList.toggle("layout--float");
-            resizeTabs();
+            dock.togglePin();
         }
     };
 };