Skip to content

style: fix editor tab style#3970

Merged
bytemain merged 3 commits intomainfrom
fix/style-1
Aug 27, 2024
Merged

style: fix editor tab style#3970
bytemain merged 3 commits intomainfrom
fix/style-1

Conversation

@bytemain
Copy link
Copy Markdown
Member

@bytemain bytemain commented Aug 26, 2024

Types

  • 🐛 Bug Fixes
  • 💄 Style Changes

Background or solution

当没有 tab 的时候 editor tabbar 会出现一个滚动条,并且 action 不能点击。

有滚动条是因为 inline-flex:

  1. Why scrollHeight is bigger than offsetHeight, when used inline-block and DOCTYPE html?
  2. What is the difference between offsetHeight and scrollHeight of an element in DOM?

action 不能点击是因为 zindex 问题

CleanShot 2024-08-26 at 20 15 41@2x

Changelog

Summary by CodeRabbit

  • 新功能
    • 在编辑器设置中新增选项,允许在编辑器组为空时显示操作,提高用户体验。
  • 样式
    • 修改编辑器组件的样式,优化布局和交互模型,增强可用性和性能。
    • 移除无效的样式注释,简化滚动条装饰样式。
  • 文档
    • EditorActions 组件中添加注释,指导开发者如何在集成场景中注销菜单项。

@railway-app
Copy link
Copy Markdown

railway-app Bot commented Aug 26, 2024

🚅 Previously deployed to Railway in the core project. Environment has been deleted.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Aug 26, 2024

Walkthrough

此次更改涉及多个文件的样式和功能更新,包括对编辑器组件布局的调整、滚动条样式的简化以及对菜单项的文档说明。具体而言,添加了新的配置选项以改善用户体验,移除了一些不再使用的样式声明,同时也更新了部分 CSS 属性的值。

Changes

文件路径 更改摘要
packages/editor/src/browser/editor-scrollbar/index.module.less 移除了注释中的 RGBA 颜色值,未影响滚动条样式的功能或视觉效果。
packages/editor/src/browser/editor.module.less 添加了 pointer-events: none; 属性,移除了 .kt_editor_tabs_scroll_wrapper 类,更新了 .kt_editor_tabs_contentdisplay 属性,移除了嵌套类的 flex-shrinkflex-grow,更新了 .editorGroupHeaderz-index
packages/editor/src/browser/tab.view.tsx EditorActions 组件中添加了文档注释,指导如何在集成场景中注销菜单项,未改变现有功能或逻辑。
packages/startup/entry/web/render-app.tsx getDefaultClientAppOpts 函数中添加了新配置选项 'editor.showActionWhenGroupEmpty': true,增强了编辑器的设置。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Editor
    participant Menu

    User->>Editor: 打开编辑器
    Editor->>Menu: 显示菜单项
    Note right of Menu: 根据配置选项判断是否显示操作
    Menu-->>User: 显示操作(如果组为空)
Loading

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@opensumi opensumi Bot added 🐞 bug Something isn't working 💄 style change labels Aug 26, 2024
@bytemain
Copy link
Copy Markdown
Member Author

/next

@codecov
Copy link
Copy Markdown

codecov Bot commented Aug 26, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 54.87%. Comparing base (5d95783) to head (4d39966).
Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #3970   +/-   ##
=======================================
  Coverage   54.87%   54.87%           
=======================================
  Files        1568     1568           
  Lines       95634    95634           
  Branches    19609    19601    -8     
=======================================
  Hits        52482    52482           
  Misses      35832    35832           
  Partials     7320     7320           
Flag Coverage Δ
jsdom 50.34% <ø> (ø)
node 15.47% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@bytemain bytemain merged commit 3d4edc6 into main Aug 27, 2024
@bytemain bytemain deleted the fix/style-1 branch August 27, 2024 02:17
Ricbet pushed a commit that referenced this pull request Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐞 bug Something isn't working 💄 style change

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants