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/3499

Browse source
This commit is contained in:
Vanessa 2023-02-11 21:21:13 +08:00
parent b2a85c66c6
commit e3d329cee8
7 changed files with 100 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,9 +13,9 @@
&--float { &--float {
position: fixed; position: fixed;
z-index: 2; z-index: 3;
min-height: auto; min-height: auto;
transition: left .15s cubic-bezier(0, 0.88, 0.42, 0.74) 0ms, opacity .15s cubic-bezier(0, 0.88, 0.42, 0.74) 0ms; transition: var(--b3-transition);
} }
&__tab--active { &__tab--active {

2
app/src/config/appearance.ts
View file

@ -10,6 +10,7 @@ import {genOptions} from "../util/genOptions";
import {openSnippets} from "./util/snippets"; import {openSnippets} from "./util/snippets";
import {openColorPicker} from "./util/colorPicker"; import {openColorPicker} from "./util/colorPicker";
import {loadAssets} from "../util/assets"; import {loadAssets} from "../util/assets";
import {resetFloatDockSize} from "../layout/dock/util";
export const appearance = { export const appearance = {
element: undefined as Element, element: undefined as Element,
@ -211,6 +212,7 @@ export const appearance = {
} else { } else {
document.getElementById("status").classList.remove("fn__none"); document.getElementById("status").classList.remove("fn__none");
} }
resetFloatDockSize();
}); });
}, },
bindEvent: () => { bindEvent: () => {

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

@ -13,6 +13,7 @@ import {getDockByType, resizeTabs, setPanelFocus} from "../util";
import {Inbox} from "./Inbox"; import {Inbox} from "./Inbox";
import {Protyle} from "../../protyle"; import {Protyle} from "../../protyle";
import {Backlink} from "./Backlink"; import {Backlink} from "./Backlink";
import {resetFloatDockSize} from "./util";
export class Dock { export class Dock {
public element: HTMLElement; public element: HTMLElement;
@ -48,6 +49,9 @@ export class Dock {
this.pin = options.data.pin this.pin = options.data.pin
this.data = {}; this.data = {};
if (options.data.data.length === 0) { if (options.data.data.length === 0) {
this.element.firstElementChild.innerHTML = `<span class="dock__item ${this.pin ? "dock__item--pin " : ""}b3-tooltips b3-tooltips__${this.getClassDirect(0)}" aria-label="${this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin}">
<svg><use xlink:href="#iconPin"></use></svg>
</span>`;
this.element.classList.add("fn__none"); this.element.classList.add("fn__none");
} else { } else {
this.genButton(options.data.data[0], 0); this.genButton(options.data.data[0], 0);
@ -83,8 +87,14 @@ export class Dock {
} 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");
if (!this.pin) { if (!this.pin) {
const layoutRect = this.layout.element.getBoundingClientRect(); if (this.position === "Left" || this.position === "Right") {
this.layout.element.setAttribute("style", `left:${layoutRect.left}px; top: ${layoutRect.top}px; bottom: ${window.innerHeight - layoutRect.bottom}px; width: ${layoutRect.width}px;`); 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;`);
} 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")};`);
}
target.setAttribute("aria-label", window.siyuan.languages.pin)
} else {
target.setAttribute("aria-label", window.siyuan.languages.unpin)
} }
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");
@ -102,6 +112,15 @@ export class Dock {
if (this.position === "Left" && event.clientX < 43) { if (this.position === "Left" && event.clientX < 43) {
return; return;
} }
if (this.position === "Right" && event.clientX > window.innerWidth - 41) {
return;
}
if (this.position === "Top" && event.clientY < 75) {
return;
}
if (this.position === "Bottom" && event.clientY > window.innerHeight - 73) {
return;
}
this.hideDock() this.hideDock()
}) })
if (window.siyuan.config.uiLayout.hideDock) { if (window.siyuan.config.uiLayout.hideDock) {
@ -109,18 +128,30 @@ export class Dock {
} }
if (!this.pin) { if (!this.pin) {
setTimeout(() => { setTimeout(() => {
const layoutRect = this.layout.element.getBoundingClientRect(); if (this.position === "Left" || this.position === "Right") {
this.layout.element.setAttribute("style", `width:${layoutRect.width}px;opacity:0px;left:-${layoutRect.width}px; top: ${layoutRect.top}px; bottom: ${window.innerHeight - layoutRect.bottom}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: ${1 + document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight}px; bottom: ${document.getElementById("status").clientHeight + document.getElementById("dockBottom").clientHeight + 1}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;`)
}
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");
}, 1000); }); // 需等待所有 Dock 初始化完成后才有稳定布局，才可进行定位
} }
} }
public hideDock() { public hideDock() {
if (this.layout.element.style.opacity === "1") { if (this.layout.element.style.opacity === "0") {
return
}
this.layout.element.style.opacity = "0";
if (this.position === "Left") {
this.layout.element.style.left = -this.layout.element.clientWidth + "px"; this.layout.element.style.left = -this.layout.element.clientWidth + "px";
this.layout.element.style.opacity = "0"; } else if (this.position === "Right") {
this.layout.element.style.right = -this.layout.element.clientWidth + "px";
} else if (this.position === "Top") {
this.layout.element.style.top = -this.layout.element.clientHeight + "px";
} else if (this.position === "Bottom") {
this.layout.element.style.bottom = -this.layout.element.clientHeight + "px";
} }
} }
@ -344,7 +375,7 @@ export class Dock {
sourceElement.setAttribute("data-width", ""); sourceElement.setAttribute("data-width", "");
const type = sourceElement.getAttribute("data-type") as TDockType; const type = sourceElement.getAttribute("data-type") as TDockType;
const sourceDock = getDockByType(type); const sourceDock = getDockByType(type);
if (sourceDock.element.querySelectorAll(".dock__item").length === 1) { if (sourceDock.element.querySelectorAll(".dock__item").length === 2) {
sourceDock.element.classList.add("fn__none"); sourceDock.element.classList.add("fn__none");
} }
const sourceWnd = sourceDock.layout.children[parseInt(sourceElement.getAttribute("data-index"))] as Wnd; const sourceWnd = sourceDock.layout.children[parseInt(sourceElement.getAttribute("data-index"))] as Wnd;
@ -364,11 +395,12 @@ export class Dock {
sourceElement.classList.add(`b3-tooltips__${this.getClassDirect(index)}`); sourceElement.classList.add(`b3-tooltips__${this.getClassDirect(index)}`);
sourceElement.setAttribute("data-index", index.toString()); sourceElement.setAttribute("data-index", index.toString());
if (index === 0) { if (index === 0) {
this.element.firstElementChild.insertAdjacentElement("afterbegin", sourceElement); this.element.firstElementChild.insertAdjacentElement("beforeend", sourceElement);
} else { } else {
this.element.lastElementChild.insertAdjacentElement("afterbegin", sourceElement); this.element.lastElementChild.insertAdjacentElement("beforeend", sourceElement);
} }
this.element.classList.remove("fn__none"); this.element.classList.remove("fn__none");
resetFloatDockSize();
this.data[type] = true; this.data[type] = true;
if (hasActive) { if (hasActive) {
this.toggleModel(type, true); this.toggleModel(type, true);
@ -433,7 +465,7 @@ export class Dock {
} }
private genButton(data: IDockTab[], index: number) { private genButton(data: IDockTab[], index: number) {
let html = index ? "" : `<span class="dock__item ${this.pin ? "dock__item--pin " : ""}b3-tooltips b3-tooltips__${this.getClassDirect(index)}" aria-label="${window.siyuan.languages.pin}"> let html = index ? "" : `<span class="dock__item ${this.pin ? "dock__item--pin " : ""}b3-tooltips b3-tooltips__${this.getClassDirect(index)}" aria-label="${this.pin ? window.siyuan.languages.unpin : window.siyuan.languages.pin}">
<svg><use xlink:href="#iconPin"></use></svg> <svg><use xlink:href="#iconPin"></use></svg>
</span>`; </span>`;
data.forEach(item => { data.forEach(item => {

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

@ -85,3 +85,26 @@ export const openOutline = (protyle: IProtyle) => {
newWnd.element.style.width = "200px"; newWnd.element.style.width = "200px";
switchWnd(newWnd, protyle.model.parent.parent); switchWnd(newWnd, protyle.model.parent.parent);
}; };
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";
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";
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"
}
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"
}
}

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

@ -11,6 +11,7 @@ import {getCurrentWindow} from "@electron/remote";
/// #endif /// #endif
import {MenuItem} from "../menus/Menu"; import {MenuItem} from "../menus/Menu";
import {Constants} from "../constants"; import {Constants} from "../constants";
import {resetFloatDockSize} from "./dock/util";
export const initStatus = (isWindow = false) => { export const initStatus = (isWindow = false) => {
/// #if !MOBILE /// #if !MOBILE
@ -65,6 +66,7 @@ export const initStatus = (isWindow = false) => {
}); });
resizeTabs(); resizeTabs();
target.querySelector(".b3-menu").classList.add("fn__none"); target.querySelector(".b3-menu").classList.add("fn__none");
resetFloatDockSize();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (target.classList.contains("status__backgroundtask")) { } else if (target.classList.contains("status__backgroundtask")) {

2
app/src/menus/index.ts
View file

@ -59,7 +59,7 @@ export class Menus {
break; break;
} }
if (target.classList.contains("dock__item")) { if (target.classList.contains("dock__item") && target.getAttribute("data-type")) {
initDockMenu(target).popup({x: event.clientX, y: event.clientY}); initDockMenu(target).popup({x: event.clientX, y: event.clientY});
event.stopPropagation(); event.stopPropagation();
break; break;

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

@ -98,11 +98,10 @@ export const globalShortcut = () => {
if (event.clientX < 43) { if (event.clientX < 43) {
if (!window.siyuan.layout.leftDock.pin) { if (!window.siyuan.layout.leftDock.pin) {
if (event.clientY > 32 && if (event.clientY > document.getElementById("toolbar").clientHeight + document.getElementById("dockTop").clientHeight &&
(window.siyuan.config.appearance.hideStatusBar || event.clientY < window.innerHeight - document.getElementById("status").clientHeight - document.getElementById("dockBottom").clientHeight) {
(!window.siyuan.config.appearance.hideStatusBar && event.clientY < window.innerHeight - 32))
) {
if (!hasClosestByClassName(event.target as HTMLElement, "b3-menu") && if (!hasClosestByClassName(event.target as HTMLElement, "b3-menu") &&
!hasClosestByClassName(event.target as HTMLElement, "layout--float") &&
window.siyuan.layout.leftDock.layout.element.style.opacity !== "1") { 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"
window.siyuan.layout.leftDock.layout.element.style.opacity = "1" window.siyuan.layout.leftDock.layout.element.style.opacity = "1"
@ -111,6 +110,30 @@ export const globalShortcut = () => {
window.siyuan.layout.leftDock.hideDock(); window.siyuan.layout.leftDock.hideDock();
} }
} }
} else if (event.clientX > window.innerWidth - 41) {
if (!window.siyuan.layout.rightDock.pin) {
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 as HTMLElement, "layout--float") && 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.opacity = "1"
}
} else {
window.siyuan.layout.rightDock.hideDock();
}
}
}
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.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.opacity = "1"
}
} }
const eventPath0 = event.composedPath()[0] as HTMLElement; const eventPath0 = event.composedPath()[0] as HTMLElement;