✨ fix https://github.com/siyuan-note/siyuan/issues/5286

app/src/assets/scss/base.scss

@@ -235,7 +235,28 @@ progressLoading: 400
   box-sizing: border-box;
   height: 22px;
   line-height: 22px;
-  font-size: 12px;
+
+  &__msg {
+    font-size: 12px;
+    color: var(--b3-theme-on-surface);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  #barDock {
+    &:hover .b3-menu {
+      display: block;
+    }
+
+    .b3-menu {
+      display: none;
+
+      &__item:hover {
+        background-color: var(--b3-list-hover);
+      }
+    }
+  }
 }
 
 .config {

app/src/dialog/processSystem.ts

@@ -145,7 +145,7 @@ export const transactionError = (data: { code: number, data: string }) => {
 };
 
 export const progressStatus = (data: IWebSocketData) => {
-    document.getElementById("statusMsg").innerHTML = data.data;
+    document.querySelector("#status .status__msg").innerHTML = data.data;
 };
 
 export const progressLoading = (data: IWebSocketData) => {

app/src/menus/toolbar.ts

@@ -1,35 +1,12 @@
 import {MenuItem} from "./Menu";
-import {mountHelp} from "../util/mount";
 import {openSetting} from "../config";
 /// #if !BROWSER
 import {getCurrentWindow} from "@electron/remote";
 /// #endif
-import {exportLayout, getDockByType} from "../layout/util";
-import {fetchPost} from "../util/fetch";
-import {getAllDocks} from "../layout/getAll";
-import {hasClosestByClassName} from "../protyle/util/hasClosest";
 import {openHistory} from "../util/history";
 
 export const initToolbarMore = () => {
     window.siyuan.menus.menu.remove();
-    getAllDocks().forEach(item => {
-        window.siyuan.menus.menu.append(new MenuItem({
-            icon: item.icon,
-            accelerator: window.siyuan.config.keymap.general[item.hotkeyLangId].custom,
-            label: window.siyuan.languages[item.hotkeyLangId],
-            click: () => {
-                getDockByType(item.type).toggleModel(item.type);
-                if (item.type === "file" && getSelection().rangeCount > 0) {
-                    const range = getSelection().getRangeAt(0);
-                    const wysiwygElement = hasClosestByClassName(range.startContainer, "protyle-wysiwyg", true);
-                    if (wysiwygElement) {
-                        wysiwygElement.blur();
-                    }
-                }
-            }
-        }).element);
-    });
-    window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
     if (!window.siyuan.config.readonly) {
         window.siyuan.menus.menu.append(new MenuItem({
             icon: "iconSettings",
@@ -39,47 +16,15 @@ export const initToolbarMore = () => {
                 openSetting();
             }
         }).element);
-        window.siyuan.menus.menu.append(new MenuItem({
-            label: window.siyuan.languages.dataHistory,
-            icon: "iconVideo",
-            accelerator: window.siyuan.config.keymap.general.history.custom,
-            click: () => {
-                openHistory();
-            }
-        }).element);
     }
     window.siyuan.menus.menu.append(new MenuItem({
-        icon: "iconLock",
-        accelerator: window.siyuan.config.keymap.general.lockScreen.custom,
-        label: window.siyuan.languages.lockScreen,
+        label: window.siyuan.languages.dataHistory,
+        icon: "iconVideo",
+        accelerator: window.siyuan.config.keymap.general.history.custom,
         click: () => {
-            exportLayout(false, () => {
-                fetchPost("/api/system/logoutAuth", {}, () => {
-                    window.location.href = "/";
-                });
-            });
+            openHistory();
         }
     }).element);
-    window.siyuan.menus.menu.append(new MenuItem({
-        icon: "iconHeart",
-        label: window.siyuan.languages.feedback,
-        click: () => {
-            if ("zh_CN" === window.siyuan.config.lang) {
-                window.open("https://ld246.com/article/1649901726096");
-            } else {
-                window.open("https://github.com/siyuan-note/siyuan/issues");
-            }
-        }
-    }).element);
-    if (!window.siyuan.config.readonly) {
-        window.siyuan.menus.menu.append(new MenuItem({
-            icon: "iconHelp",
-            label: window.siyuan.languages.help,
-            click: () => {
-                mountHelp();
-            }
-        }).element);
-    }
     /// #if !BROWSER
     window.siyuan.menus.menu.append(new MenuItem({
         icon: "iconBug",

app/src/util/globalShortcut.ts

@@ -255,7 +255,7 @@ export const globalShortcut = () => {
             event.preventDefault();
             return;
         }
-        if (!window.siyuan.config.readonly && matchHotKey(window.siyuan.config.keymap.general.history.custom, event)) {
+        if (matchHotKey(window.siyuan.config.keymap.general.history.custom, event)) {
             openHistory();
             event.preventDefault();
             return;

app/src/util/history.ts

@@ -310,7 +310,7 @@ export const openHistory = () => {
                 window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
                 window.siyuan.menus.menu.element.style.zIndex = "310";
                 break;
-            } else if (target.classList.contains("b3-list-item__action")) {
+            } else if (target.classList.contains("b3-list-item__action") && !window.siyuan.config.readonly) {
                 confirmDialog("⚠️ " + window.siyuan.languages.rollback, `${window.siyuan.languages.rollbackConfirm.replace("${date}", target.parentElement.textContent.trim())}`, () => {
                     const dataType = target.parentElement.getAttribute("data-type");
                     if (dataType === "assets") {

app/src/util/onGetConfig.ts

@@ -1,5 +1,5 @@
 import {openSearch} from "../search/spread";
-import {exportLayout, JSONToLayout, resizeDrag, resizeTabs} from "../layout/util";
+import {exportLayout, getDockByType, JSONToLayout, resizeDrag, resizeTabs} from "../layout/util";
 import {hotKey2Electron, updateHotkeyTip} from "../protyle/util/compatibility";
 /// #if !BROWSER
 import {ipcRenderer} from "electron";
@@ -22,6 +22,8 @@ import {focusByRange} from "../protyle/util/selection";
 import {exitSiYuan} from "../dialog/processSystem";
 import {openSetting} from "../config";
 import {getSearch} from "./functions";
+import {getAllDocks} from "../layout/getAll";
+import {hasClosestByClassName} from "../protyle/util/hasClosest";
 
 const matchKeymap = (keymap: Record<string, IKeymapItem>, key1: "general" | "editor", key2?: "general" | "insert" | "heading" | "list" | "table") => {
     if (key1 === "general") {
@@ -155,58 +157,114 @@ export const onGetConfig = () => {
 };
 
 const initStatus = () => {
-    document.querySelector(".status").innerHTML = `<div id="barDock" class="toolbar__item b3-tooltips b3-tooltips__ne${window.siyuan.config.readonly ? " fn__none" : ""}" aria-label="${window.siyuan.config.uiLayout.hideDock ? window.siyuan.languages.showDock : window.siyuan.languages.hideDock}">
+    const allDocks = getAllDocks();
+    let menuHTML = ''
+    allDocks.forEach(item => {
+        menuHTML += `<button class="b3-menu__item" data-type="${item.type}"><svg class="b3-menu__icon""><use xlink:href="#${item.icon}"></use></svg><span class="b3-menu__label">${window.siyuan.languages[item.hotkeyLangId]}</span><span class="b3-menu__accelerator">${window.siyuan.config.keymap.general[item.hotkeyLangId].custom}</span></button>`
+    });
+    document.getElementById("status").innerHTML = `<div id="barDock" class="toolbar__item b3-tooltips b3-tooltips__e${window.siyuan.config.readonly ? " fn__none" : ""}" aria-label="${window.siyuan.config.uiLayout.hideDock ? window.siyuan.languages.showDock : window.siyuan.languages.hideDock}">
     <svg>
         <use xlink:href="#${window.siyuan.config.uiLayout.hideDock ? "iconDock" : "iconHideDock"}"></use>
     </svg>
+    <div class="b3-menu" style="bottom: 21px;left: 4px">
+        ${menuHTML}
+    </div>
 </div>
-<div class="fn__space"></div>
-<div id="statusMsg"></div>
-<div class="fn__space"></div>
+<div class="status__msg"></div>
 <div class="fn__flex-1"></div>
 <div id="barSync" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.config.sync.stat || (window.siyuan.languages.syncNow + " F9")}">
-    <svg>
-        <use xlink:href="#iconRefresh"></use>
-    </svg>
+    <svg><use xlink:href="#iconRefresh"></use></svg>
+</div>
+<div id="barLock" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.lockScreen} ${updateHotkeyTip(window.siyuan.config.keymap.general.lockScreen.custom)}">
+    <svg><use xlink:href="#iconLock"></use></svg>
+</div>
+<div id="barFeedback" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.feedback}">
+    <svg><use xlink:href="#iconHeart"></use></svg>
+</div>
+<div id="barHelp" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.help}">
+    <svg><use xlink:href="#iconHelp"></use></svg>
 </div>`
-    const baSyncElement = document.getElementById("barSync");
-    baSyncElement.addEventListener("click", () => {
-        if (needSubscribe()) {
-            return;
-        }
-        if (!window.siyuan.config.sync.enabled) {
-            showMessage(window.siyuan.languages._kernel[124]);
-            return;
-        }
-        if (baSyncElement.firstElementChild.classList.contains("fn__rotate")) {
-            return;
-        }
-        fetchPost("/api/sync/performSync", {});
-    });
-    const barDockElement = document.getElementById("barDock");
-    const useElement = document.querySelector("#barDock use");
-    barDockElement.addEventListener("click", () => {
-        const dockIsShow = useElement.getAttribute("xlink:href") === "#iconHideDock";
-        if (dockIsShow) {
-            useElement.setAttribute("xlink:href", "#iconDock");
-            barDockElement.setAttribute("aria-label", window.siyuan.languages.showDock);
-        } else {
-            useElement.setAttribute("xlink:href", "#iconHideDock");
-            barDockElement.setAttribute("aria-label", window.siyuan.languages.hideDock);
-        }
-        document.querySelectorAll(".dock").forEach(item => {
-            if (dockIsShow) {
-                if (item.querySelector(".dock__item")) {
-                    item.classList.add("fn__none");
+    document.querySelector("#status").addEventListener("click", (event) => {
+        let target = event.target as HTMLElement
+        while (target.id !== "status") {
+            if (target.id === 'barDock') {
+                const useElement = target.firstElementChild.firstElementChild
+                const dockIsShow = useElement.getAttribute("xlink:href") === "#iconHideDock";
+                if (dockIsShow) {
+                    useElement.setAttribute("xlink:href", "#iconDock");
+                    target.setAttribute("aria-label", window.siyuan.languages.showDock);
+                } else {
+                    useElement.setAttribute("xlink:href", "#iconHideDock");
+                    target.setAttribute("aria-label", window.siyuan.languages.hideDock);
                 }
-            } else {
-                if (item.querySelector(".dock__item")) {
-                    item.classList.remove("fn__none");
+                document.querySelectorAll(".dock").forEach(item => {
+                    if (dockIsShow) {
+                        if (item.querySelector(".dock__item")) {
+                            item.classList.add("fn__none");
+                        }
+                    } else {
+                        if (item.querySelector(".dock__item")) {
+                            item.classList.remove("fn__none");
+                        }
+                    }
+                });
+                resizeTabs();
+                event.stopPropagation();
+                break;
+            } else if (target.id === "barSync") {
+                if (needSubscribe()) {
+                    return;
                 }
+                if (!window.siyuan.config.sync.enabled) {
+                    showMessage(window.siyuan.languages._kernel[124]);
+                    return;
+                }
+                if (target.firstElementChild.classList.contains("fn__rotate")) {
+                    return;
+                }
+                fetchPost("/api/sync/performSync", {});
+                event.stopPropagation();
+                break;
+            } else if (target.classList.contains("b3-menu__item")) {
+                const type = target.getAttribute("data-type") as TDockType
+                getDockByType(type).toggleModel(type);
+                if (type === "file" && getSelection().rangeCount > 0) {
+                    const range = getSelection().getRangeAt(0);
+                    const wysiwygElement = hasClosestByClassName(range.startContainer, "protyle-wysiwyg", true);
+                    if (wysiwygElement) {
+                        wysiwygElement.blur();
+                    }
+                }
+                target.parentElement.style.display = "none";
+                setTimeout(() => {
+                    target.parentElement.style.display = "";
+                }, Constants.TIMEOUT_BLOCKLOAD);
+                event.stopPropagation();
+                break;
+            } else if (target.id === "barLock") {
+                exportLayout(false, () => {
+                    fetchPost("/api/system/logoutAuth", {}, () => {
+                        window.location.href = "/";
+                    });
+                });
+                event.stopPropagation();
+                break;
+            } else if (target.id === "barHelp") {
+                mountHelp();
+                event.stopPropagation();
+                break;
+            } else if (target.id === "barFeedback") {
+                if ("zh_CN" === window.siyuan.config.lang) {
+                    window.open("https://ld246.com/article/1649901726096");
+                } else {
+                    window.open("https://github.com/siyuan-note/siyuan/issues");
+                }
+                event.stopPropagation();
+                break;
             }
-        });
-        resizeTabs();
-    });
+            target = target.parentElement
+        }
+    })
 }
 
 const initBar = () => {