Skip to content
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.

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

Improve block ref floating window size and position #8422

Closed
Vanly7710 opened this issue May 31, 2023 · 16 comments
Closed

Improve block ref floating window size and position #8422

Vanly7710 opened this issue May 31, 2023 · 16 comments
Assignees
Milestone

Comments

@Vanly7710
Copy link

In what scenarios do you need this feature?

思源的原生悬浮窗十分好用,只是目前没有设置悬浮窗大小的选项,它的大小是自行动态计算的,这导致每次浮悬窗出现的大小都不固定,有时候明明悬浮窗内的内容很多,但是浮窗只显示一行大小,如下图所示
image

所以希望提供一些能够自行设置的“弹出悬浮窗占当前思源窗口的比例”,类似于这样的选项。

Describe the optimal solution

如上所述

Describe the candidate solution

No response

Other information

No response

@88250
Copy link
Member

88250 commented Jun 1, 2023

靠……靠插件不知道能不能实现。

@Vanly7710
Copy link
Author

Vanly7710 commented Jun 1, 2023

靠插件不知道有没有难度,我在其他软件上用过类似的浮窗插件,有一个最大的问题是对引用内容的位置定位不准确,比如引用的段落块它却定位跳转到这个段落块的标题上之类的

另外通过浮窗查看内容的操作,我个人认为还是蛮高频的。如果靠插件的话,那插件作者要时刻紧跟思源的编辑器更新,对开发者的时间要求会比较高

当然,我毕竟不会开发,以上只是我的一些推测,如有不对之处还望海涵。我把那个其他软件的插件链接放上来,也许有一些有用的参考:https://github.com/nothingislost/obsidian-hover-editor

这个插件的内部有提供以下这些选项
image

我的总体提议如上,祝大家六一快乐🥳

@BryceAndJuly
Copy link

通过CSS来设置弹窗的高度似乎有点作用:

/* 悬浮——弹窗 */
.block__popover.block__popover--move.block__popover--open {
    max-height: 75vh !important;
    min-height: 70vh !important;
    width: 735px;
}
default.mp4

@Vanly7710
Copy link
Author

Vanly7710 commented Jun 1, 2023

感谢大佬提供的css片段,但是不知为何,在我这边并不生效,我是在默认主题,并且只开启这一个css片段下测试的,系统为Win11,思源版本为2.8.9。我的悬浮窗弹出窗口界面呈现如下

bandicam.2023-06-01.15-38-59-540.mp4

@BryceAndJuly
Copy link

BryceAndJuly commented Jun 1, 2023

哦,那大概是我这个笔记的版本有点旧了,换这个试试:

.block__popover.block__popover--open{
    max-height: 75vh !important;
    min-height: 70vh !important;
    width: 735px;
}

@Vanly7710
Copy link
Author

Vanly7710 commented Jun 1, 2023

感谢大佬🥳,这个确实可以用了,在一定程度上有所缓解。

但是也还有一点小瑕疵,就是弹出的悬浮窗口会完全遮蔽当前的引用块,这在大佬的视频中已有所显现。当鼠标在[[在内容块中遨游]]、[[内容块]]这些引用块上,弹出的悬浮窗口已经完全遮蔽了[[在内容块中遨游]]、[[内容块]]的文本内容。

那么假设在[[在内容块中遨游]]的正下方还有一个[[其他引用块]],因为弹出的悬浮窗口完全遮蔽了这两个引用块,当悬浮窗口关闭的时候,用户就无法在瞬间判断刚刚那个悬浮窗究竟是属于哪一个引用块的内容了

@Vanly7710
Copy link
Author

Vanly7710 commented Jun 1, 2023

我刚刚又想了一下,这似乎不是一个很难解决的问题,用另外的css也许可以解决,就是在当前弹出浮窗的引用块上做一个小横线小波浪线之类的标记,当浮窗关闭的时候仍然保留2秒钟,这样一来即可分辨刚刚弹出的是哪个引用块的浮窗了,诸位大佬认为如何?是一个可行的方案吗?

@BryceAndJuly
Copy link

嗯,感觉使用代码片段只是权宜之计,最后还是交给开发者去统一优化好一点。不然部分用户暂时通过代码片段缓解了问题,但是不知道的(比如:新用户)用起来还是原来的样子啊。像悬浮预览这么好用的功能,确实很有必要提升一下它的使用体验。

@BryceAndJuly
Copy link

你说的【提供一些设置选项】听起来不错,看看开发者怎么考虑吧。

@wrwe3888
Copy link

wrwe3888 commented Jun 4, 2023

@BryceAndJuly

用了你的CSS,不错啊。

想问一下,如何让悬浮窗口的高度,随着内容的多少而自动调整啊?(当然,如果内容太多,可以限制一个最大高度)目前好像是固定高度?

感谢!

@BryceAndJuly
Copy link

BryceAndJuly commented Jun 4, 2023

@wrwe3888
我记得它自带这个功能吧,你把要预览的引用块滚动到页面上方,也就是下方给弹窗留足空间,这个时候的悬浮窗口就有这个效果。

default.mp4

@Vanessa219
Copy link
Member

看截图中是希望把红框位置放在空间更多的绿框处么?
image

如果高度定了的话,锚文本被遮挡的概率会变大。设置的话感觉还是无法根本解决这个问题。

@Vanly7710
Copy link
Author

是的,我提出设置项最重要的原因是,这样可以设置一个固定的弹出窗口大小,给一个相对固定的反馈。目前动态计算窗口会时大时小,这种不确定的反馈不是很好。

而且鉴于思源浮窗编辑器里面是真的可以进行编辑,手感出众,所以我个人更倾向于把这个浮窗弄大一点,不仅可以预览到更多内容,而且编辑起来也更方便。

至于锚文本被遮挡的问题,我上面有给出一个方案:

在当前弹出浮窗的引用块底部做一个小横线小波浪线之类的标记,当浮窗关闭的时候仍然保留2秒钟,这样一来即可分辨刚刚弹出的是哪个引用块的浮窗了

这样不知是否可行?

如果这样不可行的话,那悬浮窗变大锚文本被遮挡悬浮窗变大更易于预览和编辑,对于双链组成的文档来说使用更方便,且用户可以自行设置弹出大小,这两个选项哪个更好也是需要讨论一下的

@Vanessa219
Copy link
Member

这样只是在关闭的时候看到,弹出的时候并不能看到锚文本。那目前先不忙着修改,再看看反馈。

@Vanly7710
Copy link
Author

好的,没关系V姐,等等反馈看看,我用上面大佬提供的代码也算是暂时解决了这个问题了

@Vanessa219
Copy link
Member

嗯,好的,我再研究一下能不能优化第一幅图的问题。

@88250 88250 changed the title 悬浮窗能否提供一些设置选项? Improve block ref floating window size and position Jun 17, 2023
@Vanessa219 Vanessa219 added this to the 2.9.7 milestone Jul 18, 2023
Vanessa219 added a commit that referenced this issue Jul 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants