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

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

Browse source
This commit is contained in:
Vanessa 2023-02-15 11:11:43 +08:00
parent ca6dffe3f5
commit b407ff9003
6 changed files with 78 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/assets/scss/_layout.scss
View file

@ -15,7 +15,7 @@
position: fixed; position: fixed;
z-index: 3; z-index: 3;
min-height: auto; min-height: auto;
transition: var(--b3-transition); transition: transform .2s cubic-bezier(0, 0, .2, 1) 0ms, opacity .2s cubic-bezier(0, 0, .2, 1) 0ms;
&.layout--floatl { &.layout--floatl {
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;

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

@ -72,6 +72,13 @@ progressLoading: 400
.b3-snackbar: 503 .b3-snackbar: 503
*/ */
html {
position: fixed;
top: 0;
right: 0;
left: 0;
}
.inbox { .inbox {
&__details { &__details {
position: absolute; position: absolute;

2
app/src/assets/template/app/index.tpl
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html style="position: fixed;top: 0;right: 0;left: 0;"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag

2
app/src/assets/template/desktop/index.tpl
View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html style="position: fixed;top: 0;right: 0;left: 0;"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" <meta name="viewport"

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

@ -92,30 +92,18 @@ 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.resetDockPosition(hasActive ? true : false);
this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;
opacity: ${hasActive ? 1 : 0};
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;
bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}px;`);
} else {
this.layout.element.setAttribute("style", `height:${this.layout.element.clientHeight}px;
opacity: ${hasActive ? 1 : 0};
left:0;
right:0;
${this.position === "Top" ? ("top:" + (this.element.offsetHeight + document.getElementById("toolbar").offsetHeight) + "px") : ("bottom:" + (this.element.offsetHeight + document.getElementById("status").offsetHeight) + "px")};`);
}
target.setAttribute("aria-label", window.siyuan.languages.pin); target.setAttribute("aria-label", window.siyuan.languages.pin);
this.resizeElement.classList.add("fn__none"); this.resizeElement.classList.add("fn__none");
if (hasActive) {
this.showDock(true);
} else {
this.hideDock(true);
}
} else { } else {
target.setAttribute("aria-label", window.siyuan.languages.unpin); target.setAttribute("aria-label", window.siyuan.languages.unpin);
this.layout.element.style.opacity = ""; this.layout.element.style.opacity = "";
this.layout.element.style.transform = "";
this.layout.element.style.transition = "var(--b3-width-transition)"; this.layout.element.style.transition = "var(--b3-width-transition)";
if (hasActive) { if (hasActive) {
this.resizeElement.classList.remove("fn__none"); this.resizeElement.classList.remove("fn__none");
@ -153,70 +141,76 @@ ${this.position === "Top" ? ("top:" + (this.element.offsetHeight + document.getE
} }
if (!this.pin) { if (!this.pin) {
setTimeout(() => { setTimeout(() => {
if (this.position === "Left") { this.resetDockPosition(false)
this.layout.element.setAttribute("style", `opacity:0px; this.hideDock(true);
width:${this.layout.element.clientWidth}px;
left:-${this.layout.element.clientWidth + 8}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 + 8}px;
top: ${document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight}px;
bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}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 + 8}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");
}); // 需等待所有 Dock 初始化完成后才有稳定布局，才可进行定位 }); // 需等待所有 Dock 初始化完成后才有稳定布局，才可进行定位
} }
} }
public showDock() { public resetDockPosition(show: boolean) {
if (this.pin || !this.element.querySelector(".dock__item--active") || this.layout.element.style.opacity === "1") {
return;
}
if ((this.position === "Left" || this.position === "Right") &&
this.layout.element.clientWidth === 0 && this.layout.element.style.width.startsWith("0")) {
return;
}
if ((this.position === "Top" || this.position === "Bottom") &&
this.layout.element.clientHeight === 0 && this.layout.element.style.height.startsWith("0")) {
return;
}
this.layout.element.style.opacity = "1";
if (this.position === "Left") { if (this.position === "Left") {
this.layout.element.style.left = this.element.clientWidth + "px"; this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;
opacity:${show ? 1 : 0};
top: 112px;bottom: 82px;left:0`);
} else if (this.position === "Right") { } else if (this.position === "Right") {
this.layout.element.style.right = this.element.clientWidth + "px"; this.layout.element.setAttribute("style", `width:${this.layout.element.clientWidth}px;
} else if (this.position === "Top") { opacity:${show ? 1 : 0};
this.layout.element.style.top = (this.element.offsetHeight + document.getElementById("toolbar").offsetHeight) + "px"; right:0;
} else if (this.position === "Bottom") { top: ${document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight}px;
this.layout.element.style.bottom = (this.element.offsetHeight + document.getElementById("status").offsetHeight) + "px"; bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}px;`);
} else {
this.layout.element.setAttribute("style", `height:${this.layout.element.clientHeight}px;
opacity:${show ? 1 : 0};
left:0;right:0;
${this.position === "Top" ? "top" : "bottom"}:0`);
} }
} }
public hideDock() { public showDock(reset = false) {
if (this.layout.element.style.opacity === "0" || this.pin) { if (!reset && (this.pin || !this.element.querySelector(".dock__item--active") || this.layout.element.style.opacity === "1")) {
return;
}
if (!reset && (this.position === "Left" || this.position === "Right") &&
this.layout.element.clientWidth === 0 && this.layout.element.style.width.startsWith("0")) {
return;
}
if (!reset && (this.position === "Top" || this.position === "Bottom") &&
this.layout.element.clientHeight === 0 && this.layout.element.style.height.startsWith("0")) {
return;
}
if (!reset) {
this.layout.element.style.opacity = "1";
}
if (this.position === "Left") {
this.layout.element.style.transform = `translateX(${this.element.clientWidth}px)`;
} else if (this.position === "Right") {
this.layout.element.style.transform = `translateX(-${this.element.clientWidth}px)`;
} else if (this.position === "Top") {
this.layout.element.style.transform = `translateY(${this.element.offsetHeight + document.getElementById("toolbar").offsetHeight}px)`;
} else if (this.position === "Bottom") {
this.layout.element.style.transform = `translateY(-${this.element.offsetHeight + document.getElementById("status").offsetHeight}px)`;
}
}
public hideDock(reset = false) {
if (!reset && (this.layout.element.style.opacity === "0" || this.pin)) {
return;
}
if (this.position === "Left") {
this.layout.element.style.transform = `translateX(-${this.layout.element.clientWidth + 8}px)`;
} else if (this.position === "Right") {
this.layout.element.style.transform = `translateX(${this.layout.element.clientWidth + 8}px)`;
} else if (this.position === "Top") {
this.layout.element.style.transform = `translateY(-${this.layout.element.clientHeight + 8}px)`;
} else if (this.position === "Bottom") {
this.layout.element.style.transform = `translateY(${this.layout.element.clientHeight + 8}px)`;
}
if (reset) {
return; return;
} }
this.layout.element.style.opacity = "0"; this.layout.element.style.opacity = "0";
if (this.position === "Left") {
this.layout.element.style.left = -this.layout.element.clientWidth - 8 + "px";
} else if (this.position === "Right") {
this.layout.element.style.right = -this.layout.element.clientWidth - 8 + "px";
} else if (this.position === "Top") {
this.layout.element.style.top = -this.layout.element.clientHeight - 8 + "px";
} else if (this.position === "Bottom") {
this.layout.element.style.bottom = -this.layout.element.clientHeight - 8 + "px";
}
this.element.querySelector(".dock__item--activefocus")?.classList.remove("dock__item--activefocus"); this.element.querySelector(".dock__item--activefocus")?.classList.remove("dock__item--activefocus");
this.layout.element.querySelector(".layout__tab--active")?.classList.remove("layout__tab--active"); this.layout.element.querySelector(".layout__tab--active")?.classList.remove("layout__tab--active");
} }

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

@ -88,19 +88,18 @@ export const openOutline = (protyle: IProtyle) => {
export const resetFloatDockSize = () => { export const resetFloatDockSize = () => {
if (!window.siyuan.layout.leftDock.pin && window.siyuan.layout.leftDock.layout.element.style.opacity === "1") { if (!window.siyuan.layout.leftDock.pin && 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.showDock(true);
} }
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.resetDockPosition(window.siyuan.layout.rightDock.layout.element.style.opacity === "1")
window.siyuan.layout.rightDock.layout.element.style.bottom = (document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight) + "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 + "px"; window.siyuan.layout.rightDock.showDock(true);
} }
} }
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").offsetHeight + document.getElementById("toolbar").offsetHeight) + "px"; window.siyuan.layout.topDock.showDock(true)
} }
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").offsetHeight + document.getElementById("status").offsetHeight) + "px"; window.siyuan.layout.bottomDock.showDock(true)
} }
}; };