diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index 148c03204..6086aad35 100644 --- a/app/src/assets/scss/base.scss +++ b/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 { diff --git a/app/src/layout/dock/index.ts b/app/src/layout/dock/index.ts index 05219eaed..a22dc2c8d 100644 --- a/app/src/layout/dock/index.ts +++ b/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;`); } diff --git a/app/src/layout/dock/util.ts b/app/src/layout/dock/util.ts index 82a0f7a25..c97905d6b 100644 --- a/app/src/layout/dock/util.ts +++ b/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"; } }; diff --git a/app/src/layout/status.ts b/app/src/layout/status.ts index 0528787bd..d8e8b41bc 100644 --- a/app/src/layout/status.ts +++ b/app/src/layout/status.ts @@ -39,7 +39,16 @@ export const initStatus = (isWindow = false) => {
`; - + 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 = `${window.siyuan.languages.runeCount} ${stat.runeCount} ${window.siyuan.languages.wordCount} ${stat.wordCount}`; if (0 < stat.linkCount) { diff --git a/app/src/util/globalShortcut.ts b/app/src/util/globalShortcut.ts index 3442e56b2..e99350d48 100644 --- a/app/src/util/globalShortcut.ts +++ b/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"; } }