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

停靠栏面板支持鼠标悬停展开 #3499

Closed
Vanessa219 opened this issue Nov 26, 2021 · 41 comments
Closed

停靠栏面板支持鼠标悬停展开 #3499

Vanessa219 opened this issue Nov 26, 2021 · 41 comments
Assignees
Milestone

Comments

@Vanessa219
Copy link
Member

https://ld246.com/article/1637906203921

@Vanessa219 Vanessa219 self-assigned this Nov 26, 2021
@Vanessa219 Vanessa219 added this to the backlog milestone Nov 26, 2021
@88250 88250 removed this from the backlog milestone Nov 26, 2021
@Elliootalderson
Copy link

终于来了,等到白头了

@roverway
Copy link

roverway commented Dec 5, 2021

期待已久的特性啊,1.2之前就希望有了。

@88250 88250 added this to the backlog milestone Oct 27, 2022
@88250 88250 changed the title Dock 面板加入 pin 和 float 模式 Dock 面板支持鼠标悬停展开 Feb 10, 2023
@88250 88250 changed the title Dock 面板支持鼠标悬停展开 停靠栏面板支持鼠标悬停展开 Feb 10, 2023
@88250 88250 modified the milestones: backlog, 2.7.5 Feb 10, 2023
Vanessa219 added a commit that referenced this issue Feb 11, 2023
@Soltus
Copy link
Contributor

Soltus commented Feb 11, 2023

@Vanessa219
左右dock激活项应当互不影响,不然用户操作步骤会增加
getAll.ts中forEach前需要判断,不然首次进入会报错

...data?.forEach...
export const getAllDocks = () => {
    const docks: IDockTab[] = [];
    window.siyuan.config.uiLayout.left.data?.forEach((item: IDockTab[]) => {
        item.forEach((dock: IDockTab) => {
            docks.push(dock);
        });
    });
    window.siyuan.config.uiLayout.right.data?.forEach((item: IDockTab[]) => {
        item.forEach((dock: IDockTab) => {
            docks.push(dock);
        });
    });
    window.siyuan.config.uiLayout.top.data?.forEach((item: IDockTab[]) => {
        item.forEach((dock: IDockTab) => {
            docks.push(dock);
        });
    });
    window.siyuan.config.uiLayout.bottom.data?.forEach((item: IDockTab[]) => {
        item.forEach((dock: IDockTab) => {
            docks.push(dock);
        });
    });
    return docks;
};

@Vanessa219
Copy link
Member Author

@Soltus 稍等,还没写完,欢迎 close 后再来测试。谢谢 😊

Vanessa219 added a commit that referenced this issue Feb 11, 2023
Vanessa219 added a commit that referenced this issue Feb 11, 2023
Vanessa219 added a commit that referenced this issue Feb 11, 2023
Vanessa219 added a commit that referenced this issue Feb 12, 2023
Vanessa219 added a commit that referenced this issue Feb 12, 2023
Vanessa219 added a commit that referenced this issue Feb 12, 2023
Vanessa219 added a commit that referenced this issue Feb 12, 2023
Vanessa219 added a commit that referenced this issue Feb 12, 2023
@Soltus
Copy link
Contributor

Soltus commented Feb 12, 2023

@Vanessa219 还有一个小建议,我使用模态弹窗时,停靠栏仍响应鼠标悬停展开,虽然目前看不出来有什么负面影响

@mozhux
Copy link

mozhux commented Feb 12, 2023

这个钉住的按钮建议再优化一下,比如语雀那样的,和savor主题那样的,在边栏上增加缩进按钮即可
image

@royc01
Copy link

royc01 commented Feb 13, 2023

image
建议悬浮后侧栏不遮挡页签和面包屑,隐藏dock栏时触发区域跟页签和面包屑重叠

Vanessa219 added a commit that referenced this issue Feb 13, 2023
@royc01
Copy link

royc01 commented Feb 13, 2023

image 建议悬浮后侧栏不遮挡页签和面包屑,隐藏dock栏时触发区域跟页签和面包屑重叠

上下分屏后页签和面包屑位置不固定,没有办法进行躲避。

可以先考虑单屏的情况,上下分屏的频率低一点

@Soltus
Copy link
Contributor

Soltus commented Feb 13, 2023

用的是 dialog 标签?

差不多吧,使用的是UI库的Modal组件。虽然目前看没有副作用,但由于遮罩是半透明的,停靠栏响应鼠标事件但实际上需要先关闭遮罩层才能操作,存在不一致性

Vanessa219 added a commit that referenced this issue Feb 13, 2023
@Vanessa219
Copy link
Member Author

@Soltus 你可以在顶层的元素上加类 b3-dialog 来解决
@royc01 稍后修改
@mozhux 待我稍后看看

@Soltus
Copy link
Contributor

Soltus commented Feb 13, 2023

@Soltus 你可以在顶层的元素上加类 b3-dialog 来解决 @royc01 稍后修改 @mozhux 待我稍后看看

好的

Vanessa219 added a commit that referenced this issue Feb 13, 2023
@Vanessa219
Copy link
Member Author

Vanessa219 commented Feb 13, 2023

@mozhux 目前浮动状态下鼠标移除面板,面板就会消失。点击那个箭头可能会有点压力,后面再看看怎么改进。

@mozhux
Copy link

mozhux commented Feb 13, 2023

@mozhux 目前浮动状态下鼠标移除面板,面板就会消失。点击那个箭头可能会有点压力,后面再看看怎么改进。

把按钮放到下方我觉得都比在顶部好。。不然就是挪到面板内。
image
image

@Temacc0531
Copy link

Temacc0531 commented Feb 13, 2023

开启悬停后浮窗高度会比顶栏高出几个像素,没有对齐

image

Vanessa219 added a commit that referenced this issue Feb 13, 2023
@Soltus
Copy link
Contributor

Soltus commented Feb 13, 2023

@Vanessa219 左右浮窗的高度不一致,是有什么考量吗

@yixna
Copy link

yixna commented Feb 13, 2023

动画卡顿不流畅

@Temacc0531
Copy link

开启悬停再隐藏边栏后,想点击文档右上角的···按钮会变成触发边栏,引起冲突,点不到···按钮

@littlecoby
Copy link

支持一个按钮放在停靠栏上方,还要想想停靠栏隐藏时按钮怎么放。
像语雀或edge那样放在面板边缘的一个不方便的地方是,当面板处于悬浮状态,想要钉住时,鼠标稍微移偏一些面板就自动缩回去了,有时得操作两三次才能钉上。
面板中的内容(文档树、大纲)集中在上方,钉住按钮放在上方能减少鼠标移动的距离。

@Vanessa219
Copy link
Member Author

@Vanessa219 左右浮窗的高度不一致,是有什么考量吗

楼上有提到避免遮挡

@Vanessa219
Copy link
Member Author

动画卡顿不流畅

使用默认主题么?

@royc01
Copy link

royc01 commented Feb 14, 2023

@Vanessa219 左右浮窗的高度不一致,是有什么考量吗

楼上有提到避免遮挡

左右可以做一致 右侧也遮挡

@Vanessa219
Copy link
Member Author

开启悬停再隐藏边栏后,想点击文档右上角的···按钮会变成触发边栏,引起冲突,点不到···按钮

如果隐藏了停靠栏就缩小触发点?

@Vanessa219
Copy link
Member Author

@Vanessa219 左右浮窗的高度不一致,是有什么考量吗

楼上有提到避免遮挡

左右可以做一致 右侧也遮挡

考虑到右侧面板内容比较充实且右侧被遮挡内容比较少。

Vanessa219 added a commit that referenced this issue Feb 14, 2023
@Temacc0531
Copy link

开启悬停再隐藏边栏后,想点击文档右上角的···按钮会变成触发边栏,引起冲突,点不到···按钮

如果隐藏了停靠栏就缩小触发点?

嗯嗯隐藏后触发区域可以靠下一些,避开左上方的面包屑和右上方的···按钮

@royc01
Copy link

royc01 commented Feb 14, 2023

@Vanessa219 左右浮窗的高度不一致,是有什么考量吗

楼上有提到避免遮挡

左右可以做一致 右侧也遮挡

考虑到右侧面板内容比较充实且右侧被遮挡内容比较少。

牺牲几十个像素我觉得可以接受的,左右面板对称,逻辑上就比较一致,或者左侧高度也不减,但是触发区域降到面包屑以下

@Vanessa219
Copy link
Member Author

@Vanessa219 左右浮窗的高度不一致,是有什么考量吗

楼上有提到避免遮挡

左右可以做一致 右侧也遮挡

考虑到右侧面板内容比较充实且右侧被遮挡内容比较少。

牺牲几十个像素我觉得可以接受的,左右面板对称,逻辑上就比较一致,或者左侧高度也不减,但是触发区域降到面包屑以下

194px,等后续用户反馈再看看,毕竟反链还蛮占用位置的。

@royc01
Copy link

royc01 commented Feb 14, 2023

194px,等后续用户反馈再看看,毕竟反链还蛮占用位置的。
👌👌

@aptexd
Copy link

aptexd commented Feb 14, 2023

“钉住”按钮的位置和“文档树”“大纲”等按钮平级了,有可能造成困惑,或许可以调整下

@Soltus
Copy link
Contributor

Soltus commented Feb 14, 2023

@Soltus 你可以在顶层的元素上加类 b3-dialog 来解决 @royc01 稍后修改 @mozhux 待我稍后看看

我试了一下,加上b3-dialog自带了很多样式,不是一个可用的方案。

@Vanessa219
Copy link
Member Author

“钉住”按钮的位置和“文档树”“大纲”等按钮平级了,有可能造成困惑,或许可以调整下

#7375

@Vanessa219
Copy link
Member Author

194px,等后续用户反馈再看看,毕竟反链还蛮占用位置的。
👌👌

#7363 第二点

@Vanessa219
Copy link
Member Author

@Soltus 你可以在顶层的元素上加类 b3-dialog 来解决 @royc01 稍后修改 @mozhux 待我稍后看看

我试了一下,加上b3-dialog自带了很多样式,不是一个可用的方案。

我记录一下,后期放到 #5066 进行考虑

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