Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-18 15:40:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2023-02-12 00:53:39 +08:00
parent 5ae02f36bc
commit ae7f44f32e
5 changed files with 35 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/src/assets/scss/base.scss
View file

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

6
app/src/layout/dock/index.ts
View file

@ -88,9 +88,9 @@ export class Dock {
this.pin = !target.classList.contains("dock__item--pin"); this.pin = !target.classList.contains("dock__item--pin");
if (!this.pin) { if (!this.pin) {
if (this.position === "Left" || this.position === "Right") { 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 { } 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); target.setAttribute("aria-label", window.siyuan.languages.pin);
} else { } else {
@ -129,7 +129,7 @@ export class Dock {
if (!this.pin) { if (!this.pin) {
setTimeout(() => { setTimeout(() => {
if (this.position === "Left" || this.position === "Right") { 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 { } 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;`); 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;`);
} }

12
app/src/layout/dock/util.ts
View file

@ -88,23 +88,23 @@ export const openOutline = (protyle: IProtyle) => {
export const resetFloatDockSize = () => { export const resetFloatDockSize = () => {
if (!window.siyuan.layout.leftDock.pin) { 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.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 + 1) + "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") { 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"; window.siyuan.layout.leftDock.layout.element.style.left = (window.siyuan.layout.leftDock.element.clientWidth + .5) + "px";
} }
} }
if (!window.siyuan.layout.rightDock.pin) { 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.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 + 1) + "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") { 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"; 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") { 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") { 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";
} }
}; };

25
app/src/layout/status.ts
View file

@ -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}"> <div id="statusHelp" class="toolbar__item b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.help}">
<svg><use xlink:href="#iconHelp"></use></svg> <svg><use xlink:href="#iconHelp"></use></svg>
</div>`; </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) => { document.querySelector("#status").addEventListener("click", (event) => {
let target = event.target as HTMLElement; let target = event.target as HTMLElement;
while (target.id !== "status") { while (target.id !== "status") {
@ -55,14 +64,10 @@ export const initStatus = (isWindow = false) => {
} }
document.querySelectorAll(".dock").forEach(item => { document.querySelectorAll(".dock").forEach(item => {
if (dockIsShow) { if (dockIsShow) {
if (item.querySelector(".dock__item")) {
item.classList.add("fn__none"); item.classList.add("fn__none");
} } else if (item.querySelectorAll(".dock__item").length > 1) {
} else {
if (item.querySelector(".dock__item")) {
item.classList.remove("fn__none"); item.classList.remove("fn__none");
} }
}
}); });
resizeTabs(); resizeTabs();
target.querySelector(".b3-menu").classList.add("fn__none"); target.querySelector(".b3-menu").classList.add("fn__none");
@ -212,7 +217,13 @@ export const clearCounter = () => {
document.querySelector("#status .status__counter").innerHTML = ""; 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> 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>`; <span class="ft__on-surface">${window.siyuan.languages.wordCount}</span>&nbsp;${stat.wordCount}<span class="fn__space"></span>`;
if (0 < stat.linkCount) { if (0 < stat.linkCount) {

4
app/src/util/globalShortcut.ts
View file

@ -126,12 +126,12 @@ export const globalShortcut = () => {
if (event.clientY < 75) { if (event.clientY < 75) {
if (!window.siyuan.layout.topDock.pin && window.siyuan.layout.topDock.layout.element.style.opacity !== "1") { 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"; window.siyuan.layout.topDock.layout.element.style.opacity = "1";
} }
} else if (event.clientY > window.innerHeight - 73) { } else if (event.clientY > window.innerHeight - 73) {
if (!window.siyuan.layout.bottomDock.pin && window.siyuan.layout.bottomDock.layout.element.style.opacity !== "1") { 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"; window.siyuan.layout.bottomDock.layout.element.style.opacity = "1";
} }
} }