From 61573fa9645345c4ae51f2389e7e7b1791d9efa1 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 19 Oct 2022 10:59:10 +0800
Subject: [PATCH] :lipstick: https://github.com/siyuan-note/siyuan/issues/6264

---
 app/src/assets/scss/base.scss |  8 +++++-
 app/src/layout/status.ts      | 53 ++++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index efb698f87..7b94ee422 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -251,6 +251,7 @@ progressLoading: 400
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    padding-left: 5px;
   }
 
   &__counter {
@@ -258,11 +259,16 @@ progressLoading: 400
     flex-shrink: 0;
   }
 
-  #barDock {
+  #barDock,
+  #barHelp {
     .b3-menu__item:hover {
       background-color: var(--b3-list-hover);
     }
   }
+
+  .fn__space:last-child {
+    width: 5px;
+  }
 }
 
 .config {
diff --git a/app/src/layout/status.ts b/app/src/layout/status.ts
index 88fe44918..9baedfebb 100644
--- a/app/src/layout/status.ts
+++ b/app/src/layout/status.ts
@@ -21,26 +21,20 @@ export const initStatus = () => {
     <svg>
         <use xlink:href="#${window.siyuan.config.uiLayout.hideDock ? "iconDock" : "iconHideDock"}"></use>
     </svg>
-    <div class="b3-menu fn__none" style="bottom: 32px;left: 9px">
+    <div class="b3-menu fn__none" style="bottom: 32px;left: 5px">
         ${menuHTML}
     </div>
 </div>
 <div class="status__msg"></div>
 <div class="fn__flex-1"></div>
 <div class="status__counter"></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="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="barDebug" class="toolbar__item b3-tooltips b3-tooltips__nw fn__none" aria-label="${window.siyuan.languages.debug}">
-    <svg>
-        <use xlink:href="#iconBug"></use>
-    </svg>
-</div>
-<div id="barHelp" class="toolbar__item b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.help}">
+<div id="barHelp" class="toolbar__item b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.openBy} ${window.siyuan.languages.help}">
     <svg><use xlink:href="#iconHelp"></use></svg>
+    <div class="b3-menu fn__none" style="bottom: 32px;right: 5px">
+        <button id="barFeedback" class="b3-menu__item"><svg class="b3-menu__icon""><use xlink:href="#iconHeart"></use></svg><span class="b3-menu__label">${window.siyuan.languages.feedback}</span></button>
+        <button id="barLock" class="b3-menu__item"><svg class="b3-menu__icon""><use xlink:href="#iconLock"></use></svg><span class="b3-menu__label">${window.siyuan.languages.lockScreen}</span><span class="b3-menu__accelerator">${updateHotkeyTip(window.siyuan.config.keymap.general.lockScreen.custom)}</span></button>
+        <button id="barDebug" class="b3-menu__item"><svg class="b3-menu__icon""><use xlink:href="#iconBug"></use></svg><span class="b3-menu__label">${window.siyuan.languages.debug}</span></button>
+    </div>
 </div>`;
     const dockElement = document.getElementById("barDock");
     dockElement.addEventListener("mousemove", () => {
@@ -49,6 +43,13 @@ export const initStatus = () => {
     dockElement.addEventListener("mouseleave", () => {
         dockElement.querySelector(".b3-menu").classList.add("fn__none");
     });
+    const helpElement = document.getElementById("barHelp");
+    helpElement.addEventListener("mousemove", () => {
+        helpElement.querySelector(".b3-menu").classList.remove("fn__none");
+    });
+    helpElement.addEventListener("mouseleave", () => {
+        helpElement.querySelector(".b3-menu").classList.add("fn__none");
+    });
     /// #if !BROWSER
     document.querySelector("#barDebug").classList.remove("fn__none");
     /// #endif
@@ -80,19 +81,6 @@ export const initStatus = () => {
                 target.querySelector(".b3-menu").classList.add("fn__none");
                 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.classList.add("fn__none");
-                event.stopPropagation();
-                break;
             } else if (target.id === "barLock") {
                 exportLayout(false, () => {
                     fetchPost("/api/system/logoutAuth", {}, () => {
@@ -119,6 +107,19 @@ export const initStatus = () => {
                 }
                 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.classList.add("fn__none");
+                event.stopPropagation();
+                break;
             }
             target = target.parentElement;
         }