Skip to content
This repository has been archived by the owner on Aug 24, 2022. It is now read-only.

feat: multiple tabs & react-data-grid & toggled autoScroll #12

Merged
merged 7 commits into from
Jul 17, 2022

Conversation

tyn1998
Copy link
Owner

@tyn1998 tyn1998 commented Jul 16, 2022

致力于搞成chrome devtools protocol monitor的模样。直接移植代码太难了,放弃。找现成的react组件来做个差不多的。

@tyn1998
Copy link
Owner Author

tyn1998 commented Jul 16, 2022

react-data-grid组件的demo:

image

@tyn1998
Copy link
Owner Author

tyn1998 commented Jul 17, 2022

image

RDG文档实在太糟糕了,示例也已经过时,唉。放弃这个PR了,希望试试用React来改写DevTron

@tyn1998 tyn1998 closed this Jul 17, 2022
@tyn1998 tyn1998 reopened this Jul 17, 2022
@tyn1998
Copy link
Owner Author

tyn1998 commented Jul 17, 2022

如何实现自动滚动到表格底部?

官方有个滚动到指定行的示例及其对应的代码(原来在这个地方,终于给我找到代码了!)

设想:

  • 界面上多给一个按钮“auto scroll to bottom”,点击后开启一个开关,这样没当有新消息时,就调用“滚动到指定行”API滚动到最后一行。
  • 当用户选中任一行时,关闭开关,这样就停止自动滚动,方便用户看。
  • 需要自动滚动的话,再点一下“auto scroll to bottom”。

@tyn1998
Copy link
Owner Author

tyn1998 commented Jul 17, 2022

实际做了toggle autoScroll,上面的设想只是设想(最佳的体验是向上滚动停止自动滚动到底,但是API不支持)。效果如下:

2022-07-17 22 45 53

@tyn1998 tyn1998 changed the title feat: ui for messages feat: multiple tabs & react-data-grid & toggled autoScroll Jul 17, 2022
@tyn1998 tyn1998 marked this pull request as ready for review July 17, 2022 15:30
@tyn1998 tyn1998 merged commit b55db74 into main Jul 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant