Improve database table view row gutter UI when editor has minimal left padding

[Zuoqiu-Yingyi]

• Please commit to the dev branch

REL: #9671

• 修复属性视图行首控件 av__gutters 与面板宽度调整手柄 layout__resize 重叠问题
  Fixed the issue of the gutters of attribute view overlapped with the layout resize bar

[Zuoqiu-Yingyi]

为啥又又又回滚了。。。

[Vanessa219]

没回滚，只是有点问题，继续修改了下。

[Zuoqiu-Yingyi]

没回滚，只是有点问题，继续修改了下。

gutters 不要使用 opacity 隐藏，就是因为这个导致其与侧边面板大小调节条冲突的

[Vanessa219]

你更新看看。

[Zuoqiu-Yingyi]

你更新看看。

问题更大了, 有时候是侧边面板手柄, 有时候是属性视图行控件, 有时候什么都没有, 完全没有预期👀
还是建议使用 display: none

[Vanessa219]

鼠标在左侧是都需要展现的，就像块标一样，这个后续有时间会完善的。

[Zuoqiu-Yingyi]

鼠标在左侧是都需要展现的，就像块标一样，这个后续有时间会完善的。

鼠标悬浮在行上出现行控件，然后再点击控件更符合直觉，否则用户就得盲猜行控件（可能）出现的位置，毕竟启用换行后行高就会大于默认行高

块标也是鼠标悬浮在块上才显示当前块的块标，不会鼠标悬浮在块的（可能的）块标位置就显示块标

建议还是使用 display: none，不要使用这些会额外引入操作不确定性的交互方案

[Vanessa219]

这个和 resize bar、左侧 padding 最小化没有关系，我新建一个 issue 记录下，后续也许要重新进行一下设计来彻底解决这个问题。只修改为 none 是无法解决目前的问题。

[Zuoqiu-Yingyi]

这个和 resize bar、左侧 padding 最小化没有关系，我新建一个 issue 记录下，后续也许要重新进行一下设计来彻底解决这个问题。只修改为 none 是无法解决目前的问题。

为啥 display: none 无法解决该问题?

[Vanessa219]

鼠标在左侧是都需要展现的，就像块标一样，这个后续有时间会完善的。

请参见前面的回复，不清楚的话可看以下录屏的演示。

QQ20231130-213022-HD.mp4

[Zuoqiu-Yingyi]

请参见前面的回复，不清楚的话可看以下录屏的演示。

QQ20231130-213022-HD.mp4

这样的话就不支持在未来添加更多控件了👀

[Zuoqiu-Yingyi]

请参见前面的回复，不清楚的话可看以下录屏的演示。

QQ20231130-213022-HD.mp4

这样的话就不支持在未来添加更多控件了👀

[Vanessa219]

未来的什么控件？

[Zuoqiu-Yingyi]

未来的什么控件？

未来的事我不知道, 但最好现在就能向前兼容, 毕竟未来 gutters 可能有两个以上的 gutter

[Zuoqiu-Yingyi]

@Vanessa219 又发现了一个不使用 display: none 的问题:
当用户手动为 .protyle-wysiwyg 设置了一个较小的 padding-left 时, .av__gutters 无法完整显示

[Vanessa219]

由于 PR 中 zIndex 的修改，显示完整的话从右往左无法选中拖拽线条进行面板大小的调整。

[Zuoqiu-Yingyi]

由于 PR 中 zIndex 的修改，显示完整的话从右往左无法选中拖拽线条进行面板大小的调整。

所以为啥不用 display

[Vanessa219]

没有使用 display:none 造成了什么问题？

[Zuoqiu-Yingyi]

没有使用 display:none 造成了什么问题？

如 所示, 编辑器 padding 过窄时无法显示属性视图行控件

[Vanessa219]

行控件指得是这个么？是的话目前是可以正常显示的。

[Zuoqiu-Yingyi]

行控件指得是这个么？是的话目前是可以正常显示的。

仅在默认主题下正常，实际用户可能会将页面边距设置为更小

[Vanessa219]

没太理解这个和 display:none 的关系。

[Zuoqiu-Yingyi]

没太理解这个和 display:none 的关系。

请参考 #9772 (comment)

display: none 可以让其仅在鼠标悬浮在行处时显示，因此其宽度可以设置为正常宽度而不影响尺寸调节控件
目前使用透明度的方案，当宽度强制设置为正常宽度时可能影响尺寸调节控件，当宽度强制缩窄时可能影响行控件

[Vanessa219]

display: none 这个依旧无法解决鼠标从右向左移动到分屏处无法选中 resize 的问题。缩小是为了解决这个问题，并不是因为使用 opacity 才必须这样处理的。

[Zuoqiu-Yingyi]

display: none 这个依旧无法解决鼠标从右向左移动到分屏处无法选中 resize 的问题。缩小是为了解决这个问题，并不是因为使用 opacity 才必须这样处理的。

感觉咱们在进行无效的交流, 我再重申一下:

• display: none 鼠标移出 gutters 范围可自动消失, 且不会悬浮在 resize 控件, 因此不会干扰到 resize 控件
• opacity: 0 鼠标移出 gutters 范围只是看不见, 但仍旧悬浮在 resize 控件的上层, 因此会干扰到 resize 控件

[Vanessa219]

会干扰到的，从左往右滑动无法选中 resize 那条线。

[Zuoqiu-Yingyi]

会干扰到的，从左往右滑动无法选中 resize 那条线。

移出控件后就会消失，不影响功能
但是用透明的方案在文档边距较小时会影响功能

[Vanessa219]

边距较小时，控件会压在resize上，此时同样无法选中 resize。

[Zuoqiu-Yingyi]

边距较小时，控件会压在resize上，此时同样无法选中 resize。

边距较小时，鼠标移出控件，控件样式 display: none，控件不会压在resize上，此时可以选中 resize。