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.

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

Adjust the style of the first column of the attribute view #9830

Merged
merged 15 commits into from
Jan 10, 2024
Merged

Adjust the style of the first column of the attribute view #9830

merged 15 commits into from
Jan 10, 2024

Conversation

Zuoqiu-Yingyi
Copy link
Contributor

  • Please commit to the dev branch

REL: #9671

  • 调整属性视图首列/钉住的列样式
    Adjust the style of the first/pinned column of the attribute view
  • 为了区分 .av__firstcol 中的复选框图标与其他图标, 添加 .av__check CSS 类
    To distinguish the checkbox icon in the .av__firstcol from other icons, add the .av__check CSS class

@Vanessa219
Copy link
Member

麻烦截图标注一下调整属性视图首列/钉住的列样式前后的区别。

@Zuoqiu-Yingyi
Copy link
Contributor Author

麻烦截图标注一下调整属性视图首列/钉住的列样式前后的区别。

主要是调整了一下 DOM 结构, 由

<div class="av__colsticky av__firstcol">
    <svg><use xlink:href="#iconUncheck"></use></svg>
</div>

调整为了

<div class="av__colsticky">
    <div class="av__firstcol">
        <svg class="av__check"><use xlink:href="#iconUncheck"></use></svg>
    </div>
</div>

外观基本没啥区别, 除了最后两行在 av__firstcol 内添加了图标 (为了与其他行的首列宽度保持一致)
image

@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Dec 8, 2023 •
edited
Loading

首列的图标调整为悬浮时显示
image

@Vanessa219
Copy link
Member

这涉及到交互和 UI 的改动，破坏了原有的设计，没有办法进行合并。

@Zuoqiu-Yingyi
Copy link
Contributor Author

这涉及到交互和 UI 的改动，破坏了原有的设计，没有办法进行合并。

哪些改动涉及了交互和 UI 的改动?

@Vanessa219
Copy link
Member

图中框内部分
image

@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Dec 11, 2023 •
edited
Loading

图中框内部分
image

红色框改进为了更加方便用户在需要点击首列控件时定位点击位置

黄色框为了避免用户误触控件

蓝色框的更改具体是指？

@Zuoqiu-Yingyi
Copy link
Contributor Author

已兼容 v2.11.2-dev5

@Vanessa219
Copy link
Member

蓝色指的是该位置的距离
image

目前交互主要参照 notion

@Zuoqiu-Yingyi
Copy link
Contributor Author

蓝色指的是该位置的距离 image

目前交互主要参照 notion

已调整
image

@Vanessa219
Copy link
Member

目前交互主要参照 notion

未经过讨论决定的改动不会进行合并。

@Zuoqiu-Yingyi
Copy link
Contributor Author

未经过讨论决定的改动不会进行合并。

那么下一个议题是关于哪一处改动的讨论？

@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Dec 19, 2023 •
edited
Loading

什么时候继续展开讨论👀?
该 PR 的挂起已经严重影响到后续的改进与优化了

@zxhd863943427
Copy link
Contributor

不太懂这个改进涉及什么方面

@Zuoqiu-Yingyi
Copy link
Contributor Author

不太懂这个改进涉及什么方面

就是 DOM 由 <div class="av__colsticky av__firstcol"></div> 结构转换为 <div class="av__colsticky"><div class="av__firstcol"></div></div> 以统一样式

@Vanessa219
Copy link
Member

数据库这个代码有点复杂，我先合并了看看。

@Vanessa219 Vanessa219 merged commit 926f1a1 into siyuan-note:dev Jan 10, 2024
@Vanessa219
Copy link
Member

看了下修改后的结构应该是比较合理的，但由于修改了部分交互，基于以下原因建议还原已有交互后重新进行提交。非常感谢。

  1. 鼠标浮动在行上时显示首例的勾选框会分散用户注意力，造成更多不必要的干扰。
QQ20240110-234722-HD.mp4
  1. 没有进行列计算时，最后一行的竖线比较突兀
image
  1. 为了简洁，原有设计在第一列后没有竖线。但社区有用户提过像 wolai 一样提供所有的线条，为此建议使用主题或代码片段进行实现。
image
  1. 两个加号在一起比较奇怪
image
  1. 按钮高亮样式过于粗壮
image
  1. 这两个按钮不可以点击，但是鼠标移动上去会高亮，并且为点击手势
image

@Vanessa219 Vanessa219 mentioned this pull request Jan 10, 2024
Merged
@Zuoqiu-Yingyi
Copy link
Contributor Author

@Vanessa219 这些地方可能还需要进一步讨论

  1. 鼠标浮动在行上时显示首例的勾选框会分散用户注意力，造成更多不必要的干扰。

鼠标浮动在行上时显示首列的勾选框理由请参考 #9772 (comment), 这里不再赘述
类似于 Windows 文件资源管理器, 这实际上 不会 分散用户注意力
image

  1. 没有进行列计算时，最后一行的竖线比较突兀
  2. 为了简洁，原有设计在第一列后没有竖线。但社区有用户提过像 wolai 一样提供所有的线条，为此建议使用主题或代码片段进行实现。

首列没有竖线但其依然存在, 且在横向滚动时会遮挡其他内容, 会被用户视为 bug (反直觉)

  1. 两个加号在一起比较奇怪
  2. 这两个按钮不可以点击，但是鼠标移动上去会高亮，并且为点击手势

这里需要删除这两个图标还是优化这两个图标 (更换图标+调整鼠标手势)?

@Vanessa219
Copy link
Member

以上几点没有争议的可以先进行修改，其他可以再看看大部分用户的需求。

@Zuoqiu-Yingyi
Copy link
Contributor Author

以上几点没有争议的可以先进行修改，其他可以再看看大部分用户的需求。

@Vanessa219 这里有未决的问题

  1. 两个加号在一起比较奇怪
  2. 这两个按钮不可以点击，但是鼠标移动上去会高亮，并且为点击手势

这里需要删除这两个图标还是优化这两个图标 (更换图标+调整鼠标手势)?

@Zuoqiu-Yingyi Zuoqiu-Yingyi mentioned this pull request Jan 14, 2024
Merged
1 task
@Vanessa219
Copy link
Member

和目前保持一致

Vanessa219 pushed a commit that referenced this pull request Jan 17, 2024
@Zuoqiu-Yingyi
Adjust the style of the first column of the attribute view (#10178)
58f9c03 
* 🎨 Adjust the style of the column pinned to the attribute view

* 🎨 Adjust the style of first column icon

* Update index.ts

* 🎨 Adjust the style of add row in attribute view

#9830

* Update protyle.ts

* 🎨 Add `box-shadow` for `.av__colsticky`
This was referenced Jan 18, 2024
Merged
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Zuoqiu-Yingyi @Vanessa219 @zxhd863943427