From 313af30cc7247e44bb4d8045a7997340f689b6a3 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Mon, 13 Feb 2023 15:47:06 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/3499 --- app/src/assets/scss/_layout.scss | 23 +++++++++++ app/src/layout/dock/index.ts | 25 ++++++++++-- app/src/layout/dock/util.ts | 6 +-- app/src/util/globalShortcut.ts | 65 +++++++++++++++----------------- 4 files changed, 76 insertions(+), 43 deletions(-) diff --git a/app/src/assets/scss/_layout.scss b/app/src/assets/scss/_layout.scss index da61afe77..d70dc883d 100644 --- a/app/src/assets/scss/_layout.scss +++ b/app/src/assets/scss/_layout.scss @@ -16,6 +16,29 @@ z-index: 3; min-height: auto; 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 { diff --git a/app/src/layout/dock/index.ts b/app/src/layout/dock/index.ts index f6e4c7fb4..65916d443 100644 --- a/app/src/layout/dock/index.ts +++ b/app/src/layout/dock/index.ts @@ -28,18 +28,22 @@ export class Dock { case "Left": this.layout = window.siyuan.layout.layout.children[1].children[0] as Layout; this.resizeElement = this.layout.element.nextElementSibling as HTMLElement; + this.layout.element.classList.add("layout--floatl") break; case "Right": this.layout = window.siyuan.layout.layout.children[1].children[2] as Layout; this.resizeElement = this.layout.element.previousElementSibling as HTMLElement; + this.layout.element.classList.add("layout--floatr") break; case "Top": this.layout = window.siyuan.layout.layout.children[0] as Layout; this.resizeElement = this.layout.element.nextElementSibling as HTMLElement; + this.layout.element.classList.add("layout--floatt") break; case "Bottom": this.layout = window.siyuan.layout.layout.children[2] as Layout; this.resizeElement = this.layout.element.previousElementSibling as HTMLElement; + this.layout.element.classList.add("layout--floatb") break; } this.element = document.getElementById("dock" + options.position); @@ -88,10 +92,16 @@ export class Dock { this.pin = !target.classList.contains("dock__item--pin"); const hasActive = this.element.querySelector(".dock__item--active"); 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; 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; bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}px;`); } else { @@ -142,9 +152,16 @@ ${this.position === "Top" ? ("top:" + (this.element.offsetHeight + document.getE } if (!this.pin) { setTimeout(() => { - if (this.position === "Left" || this.position === "Right") { + if (this.position === "Left") { 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; bottom: ${document.getElementById("status").offsetHeight + document.getElementById("dockBottom").offsetHeight}px;`); } else { diff --git a/app/src/layout/dock/util.ts b/app/src/layout/dock/util.ts index 127572f26..5480704db 100644 --- a/app/src/layout/dock/util.ts +++ b/app/src/layout/dock/util.ts @@ -87,12 +87,8 @@ export const openOutline = (protyle: IProtyle) => { }; export const resetFloatDockSize = () => { - if (!window.siyuan.layout.leftDock.pin) { - 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") { + 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"; - } } if (!window.siyuan.layout.rightDock.pin) { window.siyuan.layout.rightDock.layout.element.style.top = (document.getElementById("toolbar").offsetHeight + document.getElementById("dockTop").offsetHeight) + "px"; diff --git a/app/src/util/globalShortcut.ts b/app/src/util/globalShortcut.ts index a754db780..89fa6c8dd 100644 --- a/app/src/util/globalShortcut.ts +++ b/app/src/util/globalShortcut.ts @@ -95,7 +95,38 @@ export const globalShortcut = () => { }); 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; 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) => {