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.
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
fix(pro:tree): tree content horizontal padding #1466
Conversation
tree content horizontal padding should be consistent with header and customizable
This preview will be available after the AzureCI is passed. |
@@ -53,6 +53,7 @@ | |||
.@{tree-prefix} { | |||
flex: 1; | |||
height: 0; | |||
padding: @pro-tree-content-vertical-spacing @pro-tree-content-horizontal-spacing; | |||
|
|||
&.@{tree-prefix}-blocked { | |||
.@{tree-prefix}-node { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
with a brief code review
This code patch appears to add padding to the tree-prefix class. This should help improve its visual appeal by adding some spacing between elements. It also appears that this change is consistent with other elements that use the same classes.
However, it is important to ensure that this change does not negatively affect any existing features or functionality. To do this, a thorough testing should be performed to make sure that the padding does not cause any unexpected behaviour or bugs.
It is also recommended to check if this padding could be improved further. For example, is it possible to use a more flexible, adaptive padding? Could the padding be adjusted for different resolutions and devices? These are some of the questions that should be asked when doing a code review.
@@ -8,6 +8,9 @@ | |||
@pro-tree-header-wrapper-icon-font-size: @font-size-lg; | |||
@pro-tree-header-wrapper-icon-hover-color: @color-primary; | |||
@pro-tree-header-wrapper-height: 38px; | |||
@pro-tree-content-horizontal-spacing: 12px; | |||
@pro-tree-content-vertical-spacing: 0; | |||
|
|||
@pro-tree-divider-horizontal-spacing: @pro-tree-header-search-wrapper-horizontal-spacing; | |||
@pro-tree-divider-vertical-spacing: 8px; | |||
@pro-tree-node-padding: 0 0 0 8px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
with the code review.
-
The code patch adds three new variables: @pro-tree-content-horizontal-spacing, @pro-tree-content-vertical-spacing and @pro-tree-divider-vertical-spacing. These new variables are used to define the width of the tree content and the spacing between the nodes.
-
The code patch is correct in that it does not contain any obvious bugs.
-
For improvement, the code patch could use more descriptive names for the variables, such as @pro-tree-content-horizontal-gap, @pro-tree-content-vertical-gap, and @pro-tree-divider-vertical-gap, as this would make the purpose of each variable more explicit. Additionally, the code patch could also include comments to further explain the purpose of each variable.
Codecov Report
@@ Coverage Diff @@
## main #1466 +/- ##
=======================================
Coverage 92.74% 92.74%
=======================================
Files 327 327
Lines 30399 30399
Branches 3495 3495
=======================================
Hits 28193 28193
Misses 2206 2206 Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. |
tree content horizontal padding should be consistent with header and customizable
PR Checklist
Please check if your PR fulfills the following requirements:
What is the current behavior?
ProTree的内容区域padding和头部不一致,导致后缀和悬浮背景边界没有和头部文字对齐
What is the new behavior?
添加内容区域padding样式
Other information