Enhance Toggle Block UI

[UsmanTechJive]

I recently explored Capacities and noticed the toggle block. In my opinion, it looks better, with a modern arrow, a smooth toggle animation, and a left border line indicating the toggle block. If you could improve this, I'd really appreciate it.

Recording.2024-10-31.055007.mp4

[mustakshif]

Thank you for your feedback. SiYuan doesn't actually have a dedicated toggle block feature. Instead, any block can be folded within the regular content flow. I can add smooth animations to the icons next to these blocks though.

Regarding the left border lines, you can achieve this effect by nesting heading blocks within a list block:

CleanShot.2024-10-31.at.11.16.26.mp4

[UsmanTechJive]

It's a bit tricky in SiYuan to use the toggle feature with a left border line. Let me submit an improvement issue to SiYuan to see if they are willing to improve this by adding a dedicated toggle block feature. In AnyType, Capacities, and Notion, they all have dedicated toggles, which are convenient to use for a better user experience.

[mustakshif]

I think it's because they've integrated toggle functionality into container blocks (such as headings and lists) and folding/unfolding functionality into all other blocks in SiYuan, eliminating the need for a separate toggle block type.

[UsmanTechJive]

This is from Obsidian.

I think that the unfolding feature with the three dots is much better, in my opinion. You can see that once we fold the list, an arrow becomes visible, which is super handy for easily identifying folded sections while scrolling the document, just a suggestion.

Video:

Recording.2024-11-03.045928.mp4

What I'm suggesting is that, if possible, once a list is folded, an arrow becomes visible like in Obsidian. Additionally, it would be helpful to have the three dots appear once the list is folded.

Video:

Recording.2024-11-03.050714.mp4

[mustakshif]

SiYuan already handles folded/expanded block states with distinct styling, though it could be more intuitive. The folded list state, for example, is indicated by a shadow around the dot. While I think additional visual indicators aren't always necessary, they can be implemented using pseudo-elements if desired.

[5kyfkr]

我块标用的是这个css，感觉比现在的一闪一闪出现好，有没办法给个方法让我把主题里现在新更新的块标缩放出现的动画去除，我想用回我这个样式

/** 块标平滑移动 **/
/* 平滑移动 */
.protyle-gutters {
    transition: all 0.15s ease-out; /* 数值越大，速度越慢 */
}

[mustakshif]

我块标用的是这个css，感觉比现在的一闪一闪出现好，有没办法给个方法让我把主题里现在新更新的块标缩放出现的动画去除，我想用回我这个样式

/** 块标平滑移动 **/
/* 平滑移动 */
.protyle-gutters {
    transition: all 0.15s ease-out; /* 数值越大，速度越慢 */
}

.protyle-gutters>button {
    animation: none !important;
    opacity: 1 !important;
}

[Voyager0587]

我也觉得在折叠后添加三个点会更好，便于识别（siyuan虽然每个块都可以折叠，但不好识别，用作折叠块其实还是有点不足），可以参考任我行主题的折叠显示

[mustakshif]

我也觉得在折叠后添加三个点会更好，便于识别（siyuan虽然每个块都可以折叠，但不好识别，用作折叠块其实还是有点不足），可以参考任我行主题的折叠显示

这个功能「预览折叠列表」插件可以实现，不过太久没更新不太好用。我后面尝试做一下吧

[5kyfkr]

同支持加三个点，感觉会明显很多