-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Not planned
Description
跟 #11908 遇到的是同一个问题,侧栏太容易触发
想通过 CSS 控制未钉住的侧栏弹出与收回:
- 用
animation-delay: 200ms;
控制悬停等待的时间 - 用
animation-duration: 200ms;
控制侧栏弹出与收回的时间
但是我感觉这个侧栏弹出与收回好像不是通过 CSS 实现的?
siyuan/app/src/util/globalShortcut.ts
Lines 119 to 131 in 73cb847
} else if (event.clientX > window.innerWidth - 41) { | |
if (!window.siyuan.layout.rightDock.pin && window.siyuan.layout.rightDock.layout.element.clientWidth > 0 && | |
(window.siyuan.layout.rightDock.element.clientWidth > 0 || (window.siyuan.layout.rightDock.element.clientWidth === 0 && event.clientX > window.innerWidth - 8))) { | |
if (event.clientY > document.getElementById("toolbar").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(); | |
} | |
} | |
} |
siyuan/app/src/layout/dock/index.ts
Lines 415 to 491 in 687421f
public showDock(reset = false) { | |
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 === "Bottom" && | |
this.layout.element.clientHeight === 0 && this.layout.element.style.height.startsWith("0")) { | |
return; | |
} | |
if (( | |
document.querySelector(".b3-dialog") || | |
document.querySelector(".block__popover") || | |
document.querySelector("#commonMenu:not(.fn__none)") | |
) && ( | |
window.siyuan.layout.leftDock?.layout.element.style.opacity === "1" || | |
window.siyuan.layout.rightDock?.layout.element.style.opacity === "1" || | |
window.siyuan.layout.bottomDock?.layout.element.style.opacity === "1" | |
)) { | |
return; | |
} | |
if (!reset) { | |
this.layout.element.style.opacity = "1"; | |
} | |
this.layout.element.style.transform = ""; | |
this.layout.element.style.zIndex = (++window.siyuan.zIndex).toString(); | |
if (this.position === "Left") { | |
this.layout.element.style.left = `${this.element.clientWidth}px`; | |
} else if (this.position === "Right") { | |
this.layout.element.style.right = `${this.element.clientWidth}px`; | |
} else if (this.position === "Bottom") { | |
this.layout.element.style.bottom = `${this.element.offsetHeight + document.getElementById("status").offsetHeight}px`; | |
} | |
} | |
public hideDock(reset = false) { | |
if (!reset && (this.layout.element.style.opacity === "0" || this.pin)) { | |
return; | |
} | |
// 关系图全屏不应该退出 & https://github.com/siyuan-note/siyuan/issues/11775 | |
const fullscreenElement = this.layout.element.querySelector(".fullscreen"); | |
if (fullscreenElement && fullscreenElement.clientHeight > 0) { | |
return; | |
} | |
// https://github.com/siyuan-note/siyuan/issues/7504 | |
if (document.activeElement && this.layout.element.contains(document.activeElement) && document.activeElement.classList.contains("b3-text-field")) { | |
return; | |
} | |
const dialogElement = document.querySelector(".b3-dialog") as HTMLElement; | |
const blockElement = document.querySelector(".block__popover") as HTMLElement; | |
const menuElement = document.querySelector("#commonMenu:not(.fn__none)") as HTMLElement; | |
if ((dialogElement && dialogElement.style.zIndex > this.layout.element.style.zIndex) || // 文档树上修改 emoji 时 | |
(blockElement && blockElement.style.zIndex > this.layout.element.style.zIndex) || // 文档树上弹出悬浮层 | |
(menuElement && menuElement.style.zIndex > this.layout.element.style.zIndex) // 面板上弹出菜单时 | |
) { | |
return; | |
} | |
if (this.position === "Left") { | |
this.layout.element.style.transform = `translateX(-${this.layout.element.clientWidth + 8}px)`; | |
this.layout.element.style.left = ""; | |
} else if (this.position === "Right") { | |
this.layout.element.style.transform = `translateX(${this.layout.element.clientWidth + 8}px)`; | |
this.layout.element.style.right = ""; | |
} else if (this.position === "Bottom") { | |
this.layout.element.style.transform = `translateY(${this.layout.element.clientHeight + 8}px)`; | |
this.layout.element.style.bottom = ""; | |
} | |
if (reset) { | |
return; | |
} | |
this.layout.element.style.opacity = "0"; | |
this.element.querySelector(".dock__item--activefocus")?.classList.remove("dock__item--activefocus"); | |
this.layout.element.querySelector(".layout__tab--active")?.classList.remove("layout__tab--active"); | |
} |
关联 https://ld246.com/article/1720580075525
另一个与未钉住侧栏相关的 issue :#11938
Activity
88250 commentedon Aug 11, 2024
@Vanessa219 有空看看
Vanessa219 commentedon Sep 8, 2024
延时显示最终还是会显示出来,这个体验可能更不好。
88250 commentedon Sep 8, 2024
这个作为讨论话题先关闭了。
TCOTC commentedon Sep 8, 2024
@Vanessa219 我自己体验好就行了嘛,我自己控制延迟的时间。思源默认立即弹出就好了
Vanessa219 commentedon Sep 8, 2024
那应该可以的
TCOTC commentedon Sep 8, 2024
总结一下,目前的问题就是侧栏弹出与收回不是通过 CSS 实现的,所以用户也就没法通过 CSS 来控制弹出速度快慢
Vanessa219 commentedon Sep 11, 2024
可以用延时的 css
TCOTC commentedon Sep 11, 2024
是用哪个?
Vanessa219 commentedon Sep 14, 2024
transition-delay
TCOTC commentedon Sep 14, 2024
原来是这个。不过跟我预期有点不同,之前没搞清楚。
有没有办法能实现鼠标保持悬停 500ms 才弹出侧栏呢?(不是鼠标碰到侧栏后再等待 500ms)
Temacc0531 commentedon Sep 15, 2024
希望可以直接优化一下,现在的弹出收回个人也感觉太快...
Vanessa219 commentedon Sep 16, 2024
这个需要改 js 了。如果不快的话,用户可能会觉得卡顿。