github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-15 16:41:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vanessa 2023-02-13 15:47:06 +08:00
parent 08dffe6714
commit 313af30cc7
4 changed files with 76 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/src/assets/scss/_layout.scss
View File

@ -16,6 +16,29 @@
z-index: 3; z-index: 3;
min-height: auto; min-height: auto;
transition: var(--b3-transition); transition: var(--b3-transition);
&.layout--floatl {
border-radius: 0 8px 8px 0;
border: 1px solid var(--b3-border-color);
border-left: 0;
overflow: hidden;
box-shadow: 8px 0 24px rgb(140 149 159 / 20%);
}
&.layout--floatr {
border-left: 1px solid var(--b3-border-color);
box-shadow: -8px 0px 24px rgb(140 149 159 / 20%);
}
&.layout--floatt {
border-bottom: 1px solid var(--b3-border-color);
box-shadow: var(--b3-dialog-shadow);
}
&.layout--floatb {
border-top: 1px solid var(--b3-border-color);
box-shadow: 0 -8px 24px rgb(140 149 159 / 20%);
}
} }
&__tab--active { &__tab--active {

25
app/src/layout/dock/index.ts
View File

@ -28,18 +28,22 @@ export class Dock {
case "Left": case "Left":
this.layout = window.siyuan.layout.layout.children[1].children[0] as Layout; this.layout = window.siyuan.layout.layout.children[1].children[0] as Layout;
this.resizeElement = this.layout.element.nextElementSibling as HTMLElement; this.resizeElement = this.layout.element.nextElementSibling as HTMLElement;
this.layout.element.classList.add("layout--floatl")
break; break;
case "Right": case "Right":
this.layout = window.siyuan.layout.layout.children[1].children[2] as Layout; this.layout = window.siyuan.layout.layout.children[1].children[2] as Layout;
this.resizeElement = this.layout.element.previousElementSibling as HTMLElement; this.resizeElement = this.layout.element.previousElementSibling as HTMLElement;
this.layout.element.classList.add("layout--floatr")
break; break;
case "Top": case "Top":
this.layout = window.siyuan.layout.layout.children[0] as Layout; this.layout = window.siyuan.layout.layout.children[0] as Layout;
this.resizeElement = this.layout.element.nextElementSibling as HTMLElement; this.resizeElement = this.layout.element.nextElementSibling as HTMLElement;
this.layout.element.classList.add("layout--floatt")
break; break;
case "Bottom": case "Bottom":
this.layout = window.siyuan.layout.layout.children[2] as Layout; this.layout = window.siyuan.layout.layout.children[2] as Layout;
this.resizeElement = this.layout.element.previousElementSibling as HTMLElement; this.resizeElement = this.layout.element.previousElementSibling as HTMLElement;
this.layout.element.classList.add("layout--floatb")
break; break;
} }
this.element = document.getElementById("dock" + options.position); this.element = document.getElementById("dock" + options.position);
@ -88,10 +92,16 @@ export class Dock {
this.pin = !target.classList.contains("dock__item--pin"); this.pin = !target.classList.contains("dock__item--pin");
const hasActive = this.element.querySelector(".dock__item--active"); 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.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px; this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;
opacity: ${hasActive ? 1 : 0}; opacity: ${hasActive ? 1 : 0};
${this.position === "Right" ? "right" : "left"}:${this.element.clientWidth}px; left:${this.element.clientWidth}px;
top: 112px;
bottom: 82px;`);
} else if ( this.position === "Right") {
this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;
opacity: ${hasActive ? 1 : 0};
"right":${this.element.clientWidth}px;
top: ${document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight}px; top: ${document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight}px;
bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}px;`); bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}px;`);
} else { } else {
@ -142,9 +152,16 @@ ${this.position === "Top" ? ("top:" + (this.element.offsetHeight + document.getE
} }
if (!this.pin) { if (!this.pin) {
setTimeout(() => { setTimeout(() => {
if (this.position === "Left" || this.position === "Right") { if (this.position === "Left") {
this.layout.element.setAttribute("style", `opacity:0px; this.layout.element.setAttribute("style", `opacity:0px;
width:${this.layout.element.clientWidth}px;${this.position === "Right" ? "right" : "left"}:-${this.layout.element.clientWidth}px; width:${this.layout.element.clientWidth}px;
left:-${this.layout.element.clientWidth}px;
top:112px;
bottom: 82px;`);
} else if ( this.position === "Right") {
this.layout.element.setAttribute("style", `opacity:0px;
width:${this.layout.element.clientWidth}px;
right:-${this.layout.element.clientWidth}px;
top: ${document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight}px; top: ${document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight}px;
bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}px;`); bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}px;`);
} else { } else {

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

@ -87,12 +87,8 @@ 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.opacity === "1") {
window.siyuan.layout.leftDock.layout.element.style.top = (document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight) + "px";
window.siyuan.layout.leftDock.layout.element.style.bottom = (document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight) + "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 + "px"; window.siyuan.layout.leftDock.layout.element.style.left = window.siyuan.layout.leftDock.element.clientWidth + "px";
}
} }
if (!window.siyuan.layout.rightDock.pin) { if (!window.siyuan.layout.rightDock.pin) {
window.siyuan.layout.rightDock.layout.element.style.top = (document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight) + "px"; window.siyuan.layout.rightDock.layout.element.style.top = (document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight) + "px";

65
app/src/util/globalShortcut.ts
View File

@ -95,7 +95,38 @@ export const globalShortcut = () => {
}); });
window.siyuan.hideBreadcrumb = false; window.siyuan.hideBreadcrumb = false;
} }
if (!isWindow() && !hasClosestByClassName(event.target, "b3-dialog")) {
if (event.clientX < 43) {
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 &&
event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) {
if (!hasClosestByClassName(event.target, "b3-menu") &&
!hasClosestByClassName(event.target, "layout--float")) {
window.siyuan.layout.leftDock.showDock();
}
} else {
window.siyuan.layout.leftDock.hideDock();
}
}
} else if (event.clientX > window.innerWidth - 41) {
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 &&
event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) {
if (!hasClosestByClassName(event.target, "layout--float")) {
window.siyuan.layout.rightDock.showDock();
}
} else {
window.siyuan.layout.rightDock.hideDock();
}
}
}
if (event.clientY < 75) {
window.siyuan.layout.topDock.showDock();
} else if (event.clientY > window.innerHeight - 73) {
window.siyuan.layout.bottomDock.showDock();
}
}
const eventPath0 = event.composedPath()[0] as HTMLElement; const eventPath0 = event.composedPath()[0] as HTMLElement;
if (eventPath0 && eventPath0.nodeType !== 3 && eventPath0.classList.contains("protyle-wysiwyg") && eventPath0.style.paddingLeft) { if (eventPath0 && eventPath0.nodeType !== 3 && eventPath0.classList.contains("protyle-wysiwyg") && eventPath0.style.paddingLeft) {
// 光标在编辑器右边也需要进行显示 // 光标在编辑器右边也需要进行显示
@ -215,40 +246,6 @@ export const globalShortcut = () => {
} }
} }
} }
if (isWindow() || hasClosestByClassName(event.target, "b3-dialog")) {
return;
}
if (event.clientX < 43) {
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 &&
event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) {
if (!hasClosestByClassName(event.target, "b3-menu") &&
!hasClosestByClassName(event.target, "layout--float")) {
window.siyuan.layout.leftDock.showDock();
}
} else {
window.siyuan.layout.leftDock.hideDock();
}
}
} else if (event.clientX > window.innerWidth - 41) {
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 &&
event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) {
if (!hasClosestByClassName(event.target, "layout--float")) {
window.siyuan.layout.rightDock.showDock();
}
} else {
window.siyuan.layout.rightDock.hideDock();
}
}
}
if (event.clientY < 75) {
window.siyuan.layout.topDock.showDock();
} else if (event.clientY > window.innerHeight - 73) {
window.siyuan.layout.bottomDock.showDock();
}
}); });
window.addEventListener("mouseup", (event) => { window.addEventListener("mouseup", (event) => {