From ffdd7a1e111487631f4e27e05821cc64ef6c04b4 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 16 Feb 2023 10:08:19 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/7375

---
 app/src/assets/scss/_layout.scss |  3 +--
 app/src/layout/dock/index.ts     | 32 +-------------------------
 app/src/menus/workspace.ts       | 39 +++++++++++++++++++++++++++++++-
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/app/src/assets/scss/_layout.scss b/app/src/assets/scss/_layout.scss
index 207b804de..a2183ed65 100644
--- a/app/src/assets/scss/_layout.scss
+++ b/app/src/assets/scss/_layout.scss
@@ -357,8 +357,7 @@
     margin: 5px;
 
     &:hover,
-    &--active,
-    &--pin {
+    &--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 9488a656a..33a497e28 100644
--- a/app/src/layout/dock/index.ts
+++ b/app/src/layout/dock/index.ts
@@ -53,9 +53,6 @@ export class Dock {
         this.pin = options.data.pin;
         this.data = {};
         if (options.data.data.length === 0) {
-            this.element.firstElementChild.innerHTML = `<span class="dock__item ${this.pin ? "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);
@@ -88,31 +85,6 @@ export class Dock {
                     this.toggleModel(type, false, true);
                     event.preventDefault();
                     break;
-                } else if (target.classList.contains("dock__item")) {
-                    this.pin = !target.classList.contains("dock__item--pin");
-                    const hasActive = this.element.querySelector(".dock__item--active");
-                    if (!this.pin) {
-                        this.resetDockPosition(hasActive ? true : false);
-                        target.setAttribute("aria-label", window.siyuan.languages.pin);
-                        this.resizeElement.classList.add("fn__none");
-                        if (hasActive) {
-                            this.showDock(true);
-                        } else {
-                            this.hideDock(true);
-                        }
-                    } else {
-                        target.setAttribute("aria-label", window.siyuan.languages.unpin);
-                        this.layout.element.style.opacity = "";
-                        this.layout.element.style.transform = "";
-                        if (hasActive) {
-                            this.resizeElement.classList.remove("fn__none");
-                        }
-                    }
-                    target.classList.toggle("dock__item--pin");
-                    this.layout.element.classList.toggle("layout--float");
-                    resizeTabs();
-                    event.preventDefault();
-                    break;
                 }
                 target = target.parentElement;
             }
@@ -528,9 +500,7 @@ ${this.position === "Top" ? "top" : "bottom"}:0`);
     }
 
     private genButton(data: IDockTab[], index: number) {
-        let html = index ? "" : `<span class="dock__item ${this.pin ? "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>`;
+        let html = ""
         data.forEach(item => {
             html += `<span data-height="${item.size.height}" data-width="${item.size.width}" data-type="${item.type}" data-index="${index}" data-hotkeylangid="${item.hotkeyLangId}" class="dock__item${item.show ? " dock__item--active" : ""} b3-tooltips b3-tooltips__${this.getClassDirect(index)}" aria-label="${window.siyuan.languages[item.hotkeyLangId] + " " + updateHotkeyTip(window.siyuan.config.keymap.general[item.hotkeyLangId].custom)}${window.siyuan.languages.dockTip}">
     <svg><use xlink:href="#${item.icon}"></use></svg>
diff --git a/app/src/menus/workspace.ts b/app/src/menus/workspace.ts
index 5ebb21f8f..d10410121 100644
--- a/app/src/menus/workspace.ts
+++ b/app/src/menus/workspace.ts
@@ -12,10 +12,40 @@ import {setStorageVal, writeText} from "../protyle/util/compatibility";
 import {openCard} from "../card/openCard";
 import {openSetting} from "../config";
 import {getAllDocks} from "../layout/getAll";
-import {getDockByType} from "../layout/util";
+import {getDockByType, resizeTabs} from "../layout/util";
 import {lockScreen} from "../dialog/processSystem";
 import {showMessage} from "../dialog/message";
 import {unicode2Emoji} from "../emoji";
+import {Dock} from "../layout/dock";
+
+const togglePinDock = (dock: Dock, icon: string) => {
+    return {
+        label: `${dock.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin}`,
+        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();
+        }
+    }
+}
 
 export const workspaceMenu = (rect: DOMRect) => {
     if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
@@ -47,6 +77,13 @@ export const workspaceMenu = (rect: DOMRect) => {
                 }
             });
         });
+        if (!window.siyuan.config.readonly) {
+            dockMenu.push({type: "separator"});
+            dockMenu.push(togglePinDock(window.siyuan.layout.leftDock, "iconLeftTop"));
+            dockMenu.push(togglePinDock(window.siyuan.layout.rightDock, "iconRightTop"));
+            dockMenu.push(togglePinDock(window.siyuan.layout.bottomDock, "iconBottomLeft"));
+            dockMenu.push(togglePinDock(window.siyuan.layout.topDock, "iconTopLeft"));
+        }
         window.siyuan.menus.menu.append(new MenuItem({
             label: window.siyuan.languages.panels,
             icon: "iconDock",