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

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

Browse source
This commit is contained in:
Vanessa 2023-02-12 10:26:24 +08:00
parent b120e66ca9
commit 88ece2c1ec
3 changed files with 39 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -86,11 +86,20 @@ export class Dock {
break; break;
} else if (target.classList.contains("dock__item")) { } else if (target.classList.contains("dock__item")) {
this.pin = !target.classList.contains("dock__item--pin"); this.pin = !target.classList.contains("dock__item--pin");
const hasActive = this.element.querySelector(".dock__item--active");
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.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;`); this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;
opacity: ${hasActive?1:0};
${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 + 1}px;`);
} else { } else {
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")};`); this.layout.element.setAttribute("style", `height:${this.layout.element.clientHeight}px;
opacity: ${hasActive?1:0};
left:0;
right:0;
${this.position === "Top" ? ("top:" + (.5 + this.element.clientHeight + document.getElementById("toolbar").clientHeight) + "px") : ("bottom:" + (1 + 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 {
@ -98,7 +107,13 @@ export class Dock {
} }
target.classList.toggle("dock__item--pin"); target.classList.toggle("dock__item--pin");
this.layout.element.classList.toggle("layout--float"); this.layout.element.classList.toggle("layout--float");
this.resizeElement.classList.toggle("fn__none"); if (this.pin) {
if (hasActive) {
this.resizeElement.classList.remove("fn__none");
}
} else {
this.resizeElement.classList.add("fn__none");
}
event.preventDefault(); event.preventDefault();
break; break;
} }
@ -129,9 +144,17 @@ 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: ${.5 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight}px; bottom: ${document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + .5}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 + 1}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;`);
} }
this.layout.element.classList.add("layout--float"); this.layout.element.classList.add("layout--float");
this.resizeElement.classList.add("fn__none"); this.resizeElement.classList.add("fn__none");
@ -311,7 +334,9 @@ export class Dock {
document.querySelector("body").classList.contains("body--win32") && this.layout.element.querySelector(".fullscreen")) { document.querySelector("body").classList.contains("body--win32") && this.layout.element.querySelector(".fullscreen")) {
document.getElementById("drag").classList.add("fn__hidden"); document.getElementById("drag").classList.add("fn__hidden");
} }
this.resizeElement.classList.remove("fn__none"); if (this.pin) {
this.resizeElement.classList.remove("fn__none");
}
} }
// dock 中两个面板的显示关系 // dock 中两个面板的显示关系

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

@ -89,14 +89,14 @@ 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 = (.5 + 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 + .5) + "px"; window.siyuan.layout.leftDock.layout.element.style.bottom = (document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + 1) + "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 = (.5 + 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 + .5) + "px"; window.siyuan.layout.rightDock.layout.element.style.bottom = (document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + 1) + "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";
} }
@ -105,6 +105,6 @@ export const resetFloatDockSize = () => {
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.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 + .5) + "px"; window.siyuan.layout.bottomDock.layout.element.style.bottom = (document.getElementById("dockBottom").clientHeight + document.getElementById("status").clientHeight + 1) + "px";
} }
}; };

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

@ -97,7 +97,7 @@ export const globalShortcut = () => {
} }
if (event.clientX < 43) { if (event.clientX < 43) {
if (!window.siyuan.layout.leftDock.pin) { if (!window.siyuan.layout.leftDock.pin && window.siyuan.layout.leftDock.layout.element.clientWidth > 0) {
if (event.clientY > document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight && if (event.clientY > document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight &&
event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) { event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) {
if (!hasClosestByClassName(event.target as HTMLElement, "b3-menu") && if (!hasClosestByClassName(event.target as HTMLElement, "b3-menu") &&
@ -111,7 +111,7 @@ export const globalShortcut = () => {
} }
} }
} else if (event.clientX > window.innerWidth - 41) { } else if (event.clientX > window.innerWidth - 41) {
if (!window.siyuan.layout.rightDock.pin) { if (!window.siyuan.layout.rightDock.pin && window.siyuan.layout.rightDock.layout.element.clientWidth > 0) {
if (event.clientY > document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight && if (event.clientY > document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight &&
event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) { event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) {
if (!hasClosestByClassName(event.target as HTMLElement, "layout--float") && window.siyuan.layout.rightDock.layout.element.style.opacity !== "1") { if (!hasClosestByClassName(event.target as HTMLElement, "layout--float") && window.siyuan.layout.rightDock.layout.element.style.opacity !== "1") {
@ -125,13 +125,13 @@ 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.clientHeight > 0 && 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 + .5) + "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.clientHeight > 0 && 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 + .5) + "px"; 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.opacity = "1"; window.siyuan.layout.bottomDock.layout.element.style.opacity = "1";
} }
} }