浏览代码

:art: https://github.com/siyuan-note/siyuan/issues/3499

Vanessa 2 年之前
父节点
当前提交
ae7f44f32e
共有 5 个文件被更改,包括 35 次插入30 次删除
  1. 4 10
      app/src/assets/scss/base.scss
  2. 3 3
      app/src/layout/dock/index.ts
  3. 6 6
      app/src/layout/dock/util.ts
  4. 20 9
      app/src/layout/status.ts
  5. 2 2
      app/src/util/globalShortcut.ts

+ 4 - 10
app/src/assets/scss/base.scss

@@ -29,7 +29,7 @@
 @import "viewer";
 
 /*
-.status: 2
+.status: 3
 
 // 需小于 .block__popover
 // 需小于 ctrl+p https://github.com/siyuan-note/siyuan/issues/7174
@@ -283,7 +283,7 @@ progressLoading: 400
 .status {
   background-color: var(--b3-theme-surface);
   box-sizing: border-box;
-  z-index: 2;
+  z-index: 3;
   height: 32px;
   line-height: 32px;
   border-top: .5px solid var(--b3-border-color);
@@ -338,14 +338,8 @@ progressLoading: 400
     }
   }
 
-  #barDock {
-    &:hover .b3-menu {
-      display: block !important;
-    }
-
-    .b3-menu__item:hover {
-      background-color: var(--b3-list-hover);
-    }
+  #barDock .b3-menu__item:hover {
+    background-color: var(--b3-list-hover);
   }
 
   .fn__space:last-child {

+ 3 - 3
app/src/layout/dock/index.ts

@@ -88,9 +88,9 @@ export class Dock {
                     this.pin = !target.classList.contains("dock__item--pin");
                     if (!this.pin) {
                         if (this.position === "Left" || this.position === "Right") {
-                            this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;${this.position === "Right" ? "right" : "left"}:${this.layout.element.clientWidth}px; top: ${1 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight}px; bottom: ${document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + 1}px;`);
+                            this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;${this.position === "Right" ? "right" : "left"}:${this.element.clientWidth + .5}px; top: ${.5 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight}px; bottom: ${document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + .5}px;`);
                         } else {
-                            this.layout.element.setAttribute("style", `height:${this.layout.element.clientHeight}px;left:0;right:0;${this.position === "Top" ? ("top:" + (1 + this.element.clientHeight + document.getElementById("toolbar").clientHeight) + "px") : ("bottom:" + (this.element.clientHeight + document.getElementById("status").clientHeight) + "px")};`);
+                            this.layout.element.setAttribute("style", `height:${this.layout.element.clientHeight}px;left:0;right:0;${this.position === "Top" ? ("top:" + (.5 + this.element.clientHeight + document.getElementById("toolbar").clientHeight) + "px") : ("bottom:" + (.5 + this.element.clientHeight + document.getElementById("status").clientHeight) + "px")};`);
                         }
                         target.setAttribute("aria-label", window.siyuan.languages.pin);
                     } else {
@@ -129,7 +129,7 @@ export class Dock {
         if (!this.pin) {
             setTimeout(() => {
                 if (this.position === "Left" || this.position === "Right") {
-                    this.layout.element.setAttribute("style", `opacity:0px;width:${this.layout.element.clientWidth}px;${this.position === "Right" ? "right" : "left"}:-${this.layout.element.clientWidth}px; top: ${1 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight}px; bottom: ${document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + 1}px;`);
+                    this.layout.element.setAttribute("style", `opacity:0px;width:${this.layout.element.clientWidth}px;${this.position === "Right" ? "right" : "left"}:-${this.layout.element.clientWidth}px; top: ${.5 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight}px; bottom: ${document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + .5}px;`);
                 } else {
                     this.layout.element.setAttribute("style", `opacity:0px;height:${this.layout.element.clientHeight}px;left:0;right:0;${this.position === "Top" ? "top" : "bottom"}:-${this.layout.element.clientHeight}px;`);
                 }

+ 6 - 6
app/src/layout/dock/util.ts

@@ -88,23 +88,23 @@ export const openOutline = (protyle: IProtyle) => {
 
 export const resetFloatDockSize = () => {
     if (!window.siyuan.layout.leftDock.pin) {
-        window.siyuan.layout.leftDock.layout.element.style.top = (1 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight) + "px";
-        window.siyuan.layout.leftDock.layout.element.style.bottom = (document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + 1) + "px";
+        window.siyuan.layout.leftDock.layout.element.style.top = (.5 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight) + "px";
+        window.siyuan.layout.leftDock.layout.element.style.bottom = (document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + .5) + "px";
         if (window.siyuan.layout.leftDock.layout.element.style.opacity === "1") {
             window.siyuan.layout.leftDock.layout.element.style.left = (window.siyuan.layout.leftDock.element.clientWidth + .5) + "px";
         }
     }
     if (!window.siyuan.layout.rightDock.pin) {
-        window.siyuan.layout.rightDock.layout.element.style.top = (1 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight) + "px";
-        window.siyuan.layout.rightDock.layout.element.style.bottom = (document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + 1) + "px";
+        window.siyuan.layout.rightDock.layout.element.style.top = (.5 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight) + "px";
+        window.siyuan.layout.rightDock.layout.element.style.bottom = (document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + .5) + "px";
         if (window.siyuan.layout.rightDock.layout.element.style.opacity === "1") {
             window.siyuan.layout.rightDock.layout.element.style.right = (window.siyuan.layout.rightDock.element.clientWidth + .5) + "px";
         }
     }
     if (!window.siyuan.layout.topDock.pin && window.siyuan.layout.topDock.layout.element.style.opacity === "1") {
-        window.siyuan.layout.topDock.layout.element.style.top = (document.getElementById("dockTop").clientHeight + document.getElementById("toolbar").clientHeight + 1) + "px";
+        window.siyuan.layout.topDock.layout.element.style.top = (document.getElementById("dockTop").clientHeight + document.getElementById("toolbar").clientHeight + .5) + "px";
     }
     if (!window.siyuan.layout.bottomDock.pin && window.siyuan.layout.bottomDock.layout.element.style.opacity === "1") {
-        window.siyuan.layout.bottomDock.layout.element.style.bottom = (document.getElementById("dockBottom").clientHeight + document.getElementById("status").clientHeight + 1) + "px";
+        window.siyuan.layout.bottomDock.layout.element.style.bottom = (document.getElementById("dockBottom").clientHeight + document.getElementById("status").clientHeight + .5) + "px";
     }
 };

+ 20 - 9
app/src/layout/status.ts

@@ -39,7 +39,16 @@ export const initStatus = (isWindow = false) => {
 <div id="statusHelp" class="toolbar__item b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.help}">
     <svg><use xlink:href="#iconHelp"></use></svg>
 </div>`;
-
+    if (!isWindow) {
+        // 由于点击切换时需隐藏菜单,因此不可使用 CSS
+        const dockElement = document.getElementById("barDock");
+        dockElement.addEventListener("mousemove", () => {
+            dockElement.querySelector(".b3-menu").classList.remove("fn__none");
+        });
+        dockElement.addEventListener("mouseleave", () => {
+            dockElement.querySelector(".b3-menu").classList.add("fn__none");
+        });
+    }
     document.querySelector("#status").addEventListener("click", (event) => {
         let target = event.target as HTMLElement;
         while (target.id !== "status") {
@@ -55,13 +64,9 @@ export const initStatus = (isWindow = false) => {
                 }
                 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");
-                        }
+                        item.classList.add("fn__none");
+                    } else if (item.querySelectorAll(".dock__item").length > 1) {
+                        item.classList.remove("fn__none");
                     }
                 });
                 resizeTabs();
@@ -212,7 +217,13 @@ export const clearCounter = () => {
     document.querySelector("#status .status__counter").innerHTML = "";
 };
 
-export const renderStatusbarCounter = (stat: { runeCount: number, wordCount: number, linkCount: number, imageCount: number, refCount: number }) => {
+export const renderStatusbarCounter = (stat: {
+    runeCount: number,
+    wordCount: number,
+    linkCount: number,
+    imageCount: number,
+    refCount: number
+}) => {
     let html = `<span class="ft__on-surface">${window.siyuan.languages.runeCount}</span>&nbsp;${stat.runeCount}<span class="fn__space"></span>
 <span class="ft__on-surface">${window.siyuan.languages.wordCount}</span>&nbsp;${stat.wordCount}<span class="fn__space"></span>`;
     if (0 < stat.linkCount) {

+ 2 - 2
app/src/util/globalShortcut.ts

@@ -126,12 +126,12 @@ export const globalShortcut = () => {
 
         if (event.clientY < 75) {
             if (!window.siyuan.layout.topDock.pin && window.siyuan.layout.topDock.layout.element.style.opacity !== "1") {
-                window.siyuan.layout.topDock.layout.element.style.top = (document.getElementById("dockTop").clientHeight + document.getElementById("toolbar").clientHeight + 1) + "px";
+                window.siyuan.layout.topDock.layout.element.style.top = (document.getElementById("dockTop").clientHeight + document.getElementById("toolbar").clientHeight + .5) + "px";
                 window.siyuan.layout.topDock.layout.element.style.opacity = "1";
             }
         } else if (event.clientY > window.innerHeight - 73) {
             if (!window.siyuan.layout.bottomDock.pin && window.siyuan.layout.bottomDock.layout.element.style.opacity !== "1") {
-                window.siyuan.layout.bottomDock.layout.element.style.bottom = (document.getElementById("dockBottom").clientHeight + document.getElementById("status").clientHeight + 1) + "px";
+                window.siyuan.layout.bottomDock.layout.element.style.bottom = (document.getElementById("dockBottom").clientHeight + document.getElementById("status").clientHeight + .5) + "px";
                 window.siyuan.layout.bottomDock.layout.element.style.opacity = "1";
             }
         }