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

Improve adaptive width for Attributes View #9280

Merged
merged 47 commits into from
Nov 9, 2023
Merged

Improve adaptive width for Attributes View #9280

merged 47 commits into from
Nov 9, 2023

Conversation

Zuoqiu-Yingyi
Copy link
Contributor

  • Please commit to the dev branch
  • For contributing new features, please supplement and improve the corresponding user guide documents
  • For bug fixes, please describe the problem and solution via code comments
  • For text improvements (such as typos and wording adjustments), please submit directly

之前使用 js 实现的属性视图宽度与边距调整会导致其在不同主题下与其他块宽度与样式不一致, 并导致在块菜单设置的块样式失效

现参考 Airtable 样式, 将其可视宽度调整为与编辑器内容等宽

@github-actions
Copy link

Your PR was set to target master, PRs should be target dev
The base branch of this PR has been automatically changed to dev, please check that there are no merge conflicts

@github-actions github-actions bot changed the base branch from master to dev September 26, 2023 13:58
@Zuoqiu-Yingyi
Copy link
Contributor Author

image

@Zuoqiu-Yingyi Zuoqiu-Yingyi changed the title Attributes View adaptive width Improve adaptive width for Attributes View Sep 26, 2023
@Vanessa219
Copy link
Member

Vanessa219 commented Sep 27, 2023 •
edited
Loading

这个不能移除，移除默认主题就坏了。而且这个不是样式的问题，和功能也有一定关系。只能让其他主题进行适配。

@Vanessa219 Vanessa219 closed this Sep 27, 2023
@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Sep 27, 2023 •
edited
Loading

这个不能移除，移除默认主题就坏了。

我在本机测试时就是使用默认主题啊, 没看到哪里有问题
不要使用之前已经存在的属性视图块进行测试, 应使用新插入的属性视图块测试, 之前的属性视图块加载的 dom 字符串存在内联样式 width, 这会导致此版本宽度无法自适应

而且这个不是样式的问题，和功能也有一定关系。

会影响哪些功能, 我瞅瞅一块优化一下

@Vanessa219
Copy link
Member

移除以后就到边上了

image

@Zuoqiu-Yingyi
Copy link
Contributor Author

移除以后就到边上了

image

这是因为属性视图块还有一个 width 内联样式未禁用

@88250 88250 reopened this Sep 28, 2023
@Vanessa219
Copy link
Member

width 被存在了属性上，可能会有历史数据的问题。

强制移除也有点问题，后半部没有横线
27ea79bfbcd3278c1e660ea1e2e89f52

还有滚动的时候两侧空白无法利用起来。

@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Sep 28, 2023 •
edited
Loading

width 被存在了属性上，可能会有历史数据的问题。

在渲染前移除该属性?

强制移除也有点问题，后半部没有横线 27ea79bfbcd3278c1e660ea1e2e89f52

检查一下 .av__scroll > div 的 float: left; 是否存在 (存在时是正常的)
PS: 新的提交已在 SCSS 中添加样式 float: left;

还有滚动的时候两侧空白无法利用起来。

两侧空白为文档边距, 由用户控制, 例如使用插件 编辑器宽度

@Vanessa219
Copy link
Member

默认还是使用空白的边距比较好一点，如果不需要使用边距的话再使用插件比较好。

@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Sep 28, 2023 •
edited
Loading

默认还是使用空白的边距比较好一点，如果不需要使用边距的话再使用插件比较好。

那也应该使用 CSS 而非 js 设置属性表的间距
目前所有其他内容块 DOM 的宽度均为文档页面的宽度, 属性表也不应该例外

@Vanessa219
Copy link
Member

CSS 还没找到方案

@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Sep 28, 2023 •
edited
Loading

CSS 还没找到方案

添加如下样式即可实现, 我再更新一下

.av__container {
    margin: auto;
    width: fit-content;
    max-width: 100%;
}

image

@Zuoqiu-Yingyi

This comment was marked as resolved.

Sign in to view
@Vanessa219
Copy link
Member

好像还是有问题，过段的会剧中，过长的空白还是无法利用。这些情况都需要手动测试覆盖一下。
image

@Zuoqiu-Yingyi
Copy link
Contributor Author

好像还是有问题，过段的会剧中，过长的空白还是无法利用。这些情况都需要手动测试覆盖一下。 image

这是特性, 两侧都是文档页边距

@Vanessa219
Copy link
Member

设计参照 notion

@Zuoqiu-Yingyi
Copy link
Contributor Author

设计参照 notion

不能与其他的块风格格格不入吧

@Zuoqiu-Yingyi
Squashed commit of the following:
82126ee 
commit 642d041
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 13:36:25 2023 +0800

    :bookmark: Release v2.10.8

commit 43e5367
Merge: 6b0f8e0 0e3b780
Author: Vanessa <lly219@gmail.com>
Date:   Tue Oct 3 13:28:32 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit 6b0f8e0
Author: Vanessa <lly219@gmail.com>
Date:   Tue Oct 3 13:28:08 2023 +0800

    :art: fix siyuan-note#9334

commit 0e3b780
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 13:03:48 2023 +0800

    :memo: Update changelogs

commit cc3b4e3
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 13:01:11 2023 +0800

    :art: Database template column support using values from other columns siyuan-note#9327

commit 29f34fe
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 12:56:13 2023 +0800

    :art: Database template column support using values from other columns siyuan-note#9327

commit 7556d1c
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 11:49:12 2023 +0800

    :art: Database template column support using values from other columns siyuan-note#9327

commit 558422c
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 11:46:25 2023 +0800

    :art: Database template column support using values from other columns siyuan-note#9327

commit 433cb91
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 10:33:41 2023 +0800

    :arrow_up: Upgrade kernel deps

commit c5a25fe
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 08:52:33 2023 +0800

    :bug: Database render deleted block https://ld246.com/article/1695790906050/comment/1696234209062?r=88250#comments

commit f6a8ca2
Author: Vanessa <lly219@gmail.com>
Date:   Tue Oct 3 08:39:36 2023 +0800

    :art: siyuan-note#8766

commit 11cc108
Author: Daniel <845765@qq.com>
Date:   Tue Oct 3 07:57:36 2023 +0800

    :bug: Create doc with ref Fix siyuan-note#9329

commit d869aef
Author: Daniel <845765@qq.com>
Date:   Mon Oct 2 22:46:36 2023 +0800

    :art: The access authorization code command line parameter must be set when deploying via Docker siyuan-note#9328

commit 3d7bf2e
Author: Daniel <845765@qq.com>
Date:   Mon Oct 2 22:39:08 2023 +0800

    :art: Remove the access authorization code setting item on the browser-end siyuan-note#9331

commit 279e17e
Author: Daniel <845765@qq.com>
Date:   Mon Oct 2 22:15:33 2023 +0800

    :art: The access authorization code command line parameter must be set when deploying via Docker siyuan-note#9328

commit d235675
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 18:41:51 2023 +0800

    :memo: Update changelogs

commit 4fdd0dd
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 18:37:39 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit b4bded4
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 18:24:16 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit bfd27a6
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 18:22:39 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit 0aa61fe
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 18:14:31 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit 7d1e1bf
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 18:02:31 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit 8c31eb0
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 17:59:16 2023 +0800

    :art: siyuan-note#8766

commit 37892e7
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 17:58:48 2023 +0800

    :art: siyuan-note#8766

commit f965ef0
Merge: b709c84 b2f5ab5
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 17:41:15 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit b709c84
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 17:41:00 2023 +0800

    :art: siyuan-note#8766

commit b2f5ab5
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 17:36:22 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit b833087
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 17:33:53 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit dbdddd7
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 17:16:08 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit b981fa0
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 17:05:06 2023 +0800

    :art: siyuan-note#8766

commit 6e475e1
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 11:05:24 2023 +0800

    :memo: Update changelogs

commit df38f89
Merge: 4653754 b69e8d3
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 11:02:11 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit 4653754
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 11:01:57 2023 +0800

    :art: fix siyuan-note#9291

commit b69e8d3
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 10:58:46 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit df487a7
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 10:49:52 2023 +0800

    :bug: flash card zoomin status

commit c0424ca
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 10:42:12 2023 +0800

    :art: Add template type column to Attribute View siyuan-note#8766

commit e8359ed
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 10:27:07 2023 +0800

    :rotating_light:

commit c321223
Merge: 6490070 7029264
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 10:26:51 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit 6490070
Author: Vanessa <lly219@gmail.com>
Date:   Sun Oct 1 10:26:31 2023 +0800

    :art: fix siyuan-note#9313

commit 7029264
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 10:03:07 2023 +0800

    :memo: Update changelogs

commit 29d155d
Author: Daniel <845765@qq.com>
Date:   Sun Oct 1 09:37:46 2023 +0800

    :art: Improve missing line breaks when exporting RTF Fix siyuan-note#9325

commit 05cfcf7
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 20:46:00 2023 +0800

    :art: https://ld246.com/article/1695361968294

commit 67e0dad
Merge: 856445a fee908d
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 20:30:21 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit 856445a
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 20:30:06 2023 +0800

    :art: fix siyuan-note#9323

commit fee908d
Author: Daniel <845765@qq.com>
Date:   Sat Sep 30 20:19:26 2023 +0800

    :bug: The image does not display after pasting some PDF rectangular annotations Fix siyuan-note#9321

commit 11d2f7c
Author: Daniel <845765@qq.com>
Date:   Sat Sep 30 20:18:27 2023 +0800

    :bug: The image does not display after pasting some PDF rectangular annotations Fix siyuan-note#9321

commit 83dce4f
Merge: 1f2faec 49d9253
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 19:55:15 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit 1f2faec
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 19:55:01 2023 +0800

    :zap: breadcrumb

commit 49d9253
Author: Daniel <845765@qq.com>
Date:   Sat Sep 30 19:52:26 2023 +0800

    :bug: The subdoc creation path is unstable when a parent doc with the same name exists Fix siyuan-note#9322

commit 17dd264
Author: Daniel <845765@qq.com>
Date:   Sat Sep 30 19:34:28 2023 +0800

    :art: Improve handling of copy block ref when including images siyuan-note#9317

commit e74733b
Author: Daniel <845765@qq.com>
Date:   Sat Sep 30 17:57:23 2023 +0800

    :recycle: Refactor create doc by hpath

commit f608da2
Merge: 6b2a4ff 121d33e
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 19:25:39 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit 6b2a4ff
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 19:25:20 2023 +0800

    :art: fix siyuan-note#9317

commit 121d33e
Author: Daniel <845765@qq.com>
Date:   Sat Sep 30 17:56:47 2023 +0800

    :art: Improve handling of copy block ref when including images siyuan-note#9317

commit 82bed84
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 14:40:45 2023 +0800

    :art: siyuan-note#9320

commit f8b272d
Merge: 2dae120 ca855c1
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 13:57:55 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit 2dae120
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 13:57:40 2023 +0800

    :art: siyuan-note#9316

commit ca855c1
Author: Daniel <845765@qq.com>
Date:   Sat Sep 30 11:57:37 2023 +0800

    :art: Attribute Panel - Database sort attributes by view column order siyuan-note#9319

commit 1063f50
Author: Vanessa <lly219@gmail.com>
Date:   Sat Sep 30 11:21:46 2023 +0800

    :lipstick: siyuan-note#9318

commit 1f899aa
Author: Vanessa <lly219@gmail.com>
Date:   Fri Sep 29 21:41:14 2023 +0800

    :lipstick: fix siyuan-note#9281

commit 2b9bec8
Author: Daniel <845765@qq.com>
Date:   Fri Sep 29 17:33:18 2023 +0800

    :art: Ctrl+N should follow notebook create save path https://ld246.com/article/1695965429553

commit 41e35ea
Author: Vanessa <lly219@gmail.com>
Date:   Thu Sep 28 23:45:23 2023 +0800

    :rotating_light:

commit 6a37b86
Author: Vanessa <lly219@gmail.com>
Date:   Thu Sep 28 23:41:44 2023 +0800

    :rotating_light:

commit 4c6b695
Merge: df3f444 dc03a5c
Author: Vanessa <lly219@gmail.com>
Date:   Thu Sep 28 23:41:18 2023 +0800

    Merge remote-tracking branch 'origin/dev' into dev

commit df3f444
Author: Vanessa <lly219@gmail.com>
Date:   Thu Sep 28 23:40:44 2023 +0800

    :recycle: siyuan-note#9300

commit dc03a5c
Author: Daniel <845765@qq.com>
Date:   Thu Sep 28 22:46:29 2023 +0800

    :arrow_up: Upgrade kernel deps

commit 172b7ed
Author: Daniel <845765@qq.com>
Date:   Thu Sep 28 22:39:12 2023 +0800

    :art: Apply result optimized by FSRS optimizer siyuan-note#9309

commit 6354d04
Author: Daniel <845765@qq.com>
Date:   Thu Sep 28 22:22:17 2023 +0800

    :art: Apply result optimized by FSRS optimizer siyuan-note#9309

commit b2a27bb
Author: Yingyi / 颖逸 <49649786+Zuoqiu-Yingyi@users.noreply.github.com>
Date:   Thu Sep 28 22:38:49 2023 +0800

    Refactor code language and ts types (siyuan-note#9300)

    * 🎨 Code block language list adds custom languages

    * Update index.d.ts

    * 🎨 Improve global variable type definition

    * 🎨 Improve global variable type definition

    * 🎨 Add constant `EXTRA_CODE_LANGUAGES`

commit 17d2a16
Author: Vanessa <lly219@gmail.com>
Date:   Thu Sep 28 22:31:33 2023 +0800

    :art: fix siyuan-note#9264

commit ceb9aef
Author: Vanessa <lly219@gmail.com>
Date:   Thu Sep 28 17:25:18 2023 +0800

    :art: fix siyuan-note#9303
@Zuoqiu-Yingyi
Merge branch 'dev' into feat/attrs-view-adaptive-width
65380b6
@Vanessa219
Copy link
Member

这只是有效利用横向空间，间距、字体、块操作等都有保持一致，不存在格格不入。

@Zuoqiu-Yingyi
Copy link
Contributor Author

这只是有效利用横向空间，间距、字体、块操作等都有保持一致，不存在格格不入。

那为什么其他块不这样有效利用横向空间❓

@88250
Copy link
Member

88250 commented Oct 31, 2023

请问这个 PR 被搁置的原因，是还再等待反馈吗？ 如果是的话，论坛直接开个投票，看下反馈会不会更好。

麻烦开贴在社区投票看看。

@Zuoqiu-Yingyi
Copy link
Contributor Author

  • 修复 6616236 引入的横向滚动条失效问题
  • av__gutters 在高度不足时仅显示 drag 按钮
    • 行菜单新增 添加 菜单项用于 在上方/下方插入行, 用于 add 按钮的替代

@88250
Copy link
Member

88250 commented Nov 8, 2023

@Zuoqiu-Yingyi @zxhd863943427 @woniuxia 各位谁去社区发起投票贴收集一下反馈？

@Zuoqiu-Yingyi 估计需要一些截图，麻烦上传一下以方便说明。

@zxhd863943427
Copy link
Contributor

已发布 https://ld246.com/article/1699446169420

@Zuoqiu-Yingyi
Copy link
Contributor Author

估计需要一些截图，麻烦上传一下以方便说明。

  1. 块宽度与其他块保持一致 image
  2. 使用 CSS 实现横向滚动时冻结首列 + 资源列启用换行时全宽显示图片 + 右键菜单添加 在上方/下方插入一下 思源笔记-功能示范-38
  3. 优化块右键菜单-布局样式 思源笔记-功能示范-39

@woniuxia
Copy link

woniuxia commented Nov 8, 2023 via email

@zxhd863943427
Copy link
Contributor

已更新新内容

@88250 88250 requested a review from Vanessa219 November 9, 2023 02:05
@88250 88250 added this to the 2.10.15 milestone Nov 9, 2023
@Vanessa219 Vanessa219 merged commit 2e46bee into siyuan-note:dev Nov 9, 2023
@Vanessa219 Vanessa219 self-assigned this Nov 9, 2023
@Vanessa219
Copy link
Member

目前合并了问题有点多，我先修改一下吧。

image

Vanessa219 added a commit that referenced this pull request Nov 9, 2023
@Vanessa219
Revert "Improve adaptive width for Attributes View (#9280)"
7ac8c94 
This reverts commit 2e46bee.
Vanessa219 added a commit that referenced this pull request Nov 9, 2023
@Vanessa219
Revert "Improve adaptive width for Attributes View (#9280)"
f5da5b7 
This reverts commit 2e46bee.
@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Nov 9, 2023 •
edited
Loading

目前合并了问题有点多，我先修改一下吧。

这一个月我都是用在本分支上构建的版本, 应该更多的是 feat 而不是 bug 👀

还有哪些问题, 我修复一下

Vanessa219 added a commit that referenced this pull request Nov 9, 2023
@Vanessa219
🎨 #9280
4901541
@Vanessa219
Copy link
Member

Vanessa219 commented Nov 9, 2023 •
edited
Loading

我只是粗略看了下，比如新建后是居中状态，还有一些细节的对齐问题，行拖拽之类的。

我修改了一下，目前应该是还差使用 CSS 实现横向滚动时冻结首列， 至于资源列启用换行时全宽显示图片还需要再考虑一下，如果是长图且有多个图片和文件混合的话可能问题会比较多。

你更新到最新代码再看看。

@Zuoqiu-Yingyi
Copy link
Contributor Author

👌
使用 CSS 实现横向滚动时冻结首列 这个功能我再提交一个 PR?

@Zuoqiu-Yingyi Zuoqiu-Yingyi deleted the feat/attrs-view-adaptive-width branch November 9, 2023 12:31
@Vanessa219
Copy link
Member

嗯嗯，幸苦了。

@Zuoqiu-Yingyi Zuoqiu-Yingyi mentioned this pull request Nov 9, 2023
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Vanessa219 Vanessa219 Awaiting requested review from Vanessa219

Assignees

@Vanessa219 Vanessa219

@Zuoqiu-Yingyi Zuoqiu-Yingyi

Labels
Development
Projects
None yet
Milestone
2.10.15
Development

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