Skip to content

如何通过 CSS 控制未钉住的侧栏弹出与收回？ #12108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
TCOTC opened this issue Jul 27, 2024 · 12 comments
Closed

如何通过 CSS 控制未钉住的侧栏弹出与收回？ #12108

TCOTC opened this issue Jul 27, 2024 · 12 comments

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Jul 27, 2024 •
edited
Loading

跟 #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
@88250
Copy link
Member

88250 commented Aug 11, 2024

@Vanessa219 有空看看

@TCOTC TCOTC mentioned this issue Aug 12, 2024
Closed
@Vanessa219
Copy link
Member

延时显示最终还是会显示出来，这个体验可能更不好。

@88250
Copy link
Member

88250 commented Sep 8, 2024

这个作为讨论话题先关闭了。

@88250 88250 closed this as not planned Won't fix, can't repro, duplicate, stale Sep 8, 2024
@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 8, 2024

@Vanessa219 我自己体验好就行了嘛，我自己控制延迟的时间。思源默认立即弹出就好了

@Vanessa219
Copy link
Member

那应该可以的

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 8, 2024

总结一下，目前的问题就是侧栏弹出与收回不是通过 CSS 实现的，所以用户也就没法通过 CSS 来控制弹出速度快慢

@Vanessa219
Copy link
Member

可以用延时的 css

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 11, 2024

是用哪个？

@Vanessa219
Copy link
Member

transition-delay

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 14, 2024

原来是这个。不过跟我预期有点不同，之前没搞清楚。

有没有办法能实现鼠标保持悬停 500ms 才弹出侧栏呢？（不是鼠标碰到侧栏后再等待 500ms）

@Temacc0531
Copy link

希望可以直接优化一下，现在的弹出收回个人也感觉太快...

@Vanessa219
Copy link
Member

这个需要改 js 了。如果不快的话，用户可能会觉得卡顿。

@TCOTC TCOTC mentioned this issue Jan 23, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@88250 @Vanessa219 @TCOTC @Temacc0531