Skip to content

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

Not planned
@TCOTC

Description

@TCOTC
Contributor

#11908 遇到的是同一个问题,侧栏太容易触发

想通过 CSS 控制未钉住的侧栏弹出与收回:

  • animation-delay: 200ms; 控制悬停等待的时间
  • animation-duration: 200ms; 控制侧栏弹出与收回的时间

但是我感觉这个侧栏弹出与收回好像不是通过 CSS 实现的?

} 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();
}
}
}

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

88250 commented on Aug 11, 2024

@88250
Member

@Vanessa219 有空看看

Vanessa219

Vanessa219 commented on Sep 8, 2024

@Vanessa219
Member

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

88250

88250 commented on Sep 8, 2024

@88250
Member

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

TCOTC

TCOTC commented on Sep 8, 2024

@TCOTC
ContributorAuthor

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

Vanessa219

Vanessa219 commented on Sep 8, 2024

@Vanessa219
Member

那应该可以的

TCOTC

TCOTC commented on Sep 8, 2024

@TCOTC
ContributorAuthor

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

Vanessa219

Vanessa219 commented on Sep 11, 2024

@Vanessa219
Member

可以用延时的 css

TCOTC

TCOTC commented on Sep 11, 2024

@TCOTC
ContributorAuthor

是用哪个?

Vanessa219

Vanessa219 commented on Sep 14, 2024

@Vanessa219
Member

transition-delay

TCOTC

TCOTC commented on Sep 14, 2024

@TCOTC
ContributorAuthor

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

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

Temacc0531

Temacc0531 commented on Sep 15, 2024

@Temacc0531

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

Vanessa219

Vanessa219 commented on Sep 16, 2024

@Vanessa219
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @88250@Vanessa219@TCOTC@Temacc0531

        Issue actions

          如何通过 CSS 控制未钉住的侧栏弹出与收回? · Issue #12108 · siyuan-note/siyuan