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.

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

Style tree content to full width #14858

Merged
merged 9 commits into from Mar 8, 2019

Conversation

Projects
None yet
4 participants
@kimochg
Copy link
Contributor

commented Feb 15, 2019

First of all, thank you for your contribution! 😄

New feature please send pull request to feature branch, and rest to master branch.
Pull request will be merged after one of collaborators approve.
Please makes sure that these form are filled before submitting your pull request, thank you!

[中文版模板 / Chinese template]

This is a ...

  • New feature
  • Bug fix
  • Site / document update
  • Component style update
  • TypeScript definition update
  • Refactoring
  • Code style optimization
  • Branch merge
  • Other (about what?)

What's the background?

It's not elegant to control tree content width by calculating. Like the Tree draggable demo https://ant.design/components/tree/#components-tree-demo-draggable

/* You can add the following CSS to your project to make draggable area bigger */
#components-tree-demo-draggable .draggable-tree .ant-tree-node-content-wrapper {
  width: calc(100% - 18px);
}

API Realization (Optional if not new feature)

What's the effect? (Optional if not new feature)

Changelog description (Optional if not new feature)

make tree content full width. You can preview the style works on codesandbox

Edit k29zxwrnxr

image

Self Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Additional Plan? (Optional if not new feature)

If this PR related with other PR or following info. You can type here.

@codecov

This comment has been minimized.

Copy link

commented Feb 15, 2019

Codecov Report

Merging #14858 into feature will increase coverage by 0.01%.
The diff coverage is n/a.

Impacted file tree graph

@@             Coverage Diff             @@
##           feature   #14858      +/-   ##
===========================================
+ Coverage    92.79%   92.81%   +0.01%     
===========================================
  Files          236      236              
  Lines         6231     6231              
  Branches      1855     1868      +13     
===========================================
+ Hits          5782     5783       +1     
+ Misses         446      445       -1     
  Partials         3        3
Impacted Files Coverage Δ
components/upload/UploadList.tsx 87.15% <0%> (-1.84%) ⬇️
components/_util/wave.tsx 87.5% <0%> (+2.88%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d30b2f5...0a0e741. Read the comment docs.

@codecov

This comment has been minimized.

Copy link

commented Feb 15, 2019

Codecov Report

Merging #14858 into feature will decrease coverage by 0.58%.
The diff coverage is 100%.

Impacted file tree graph

@@             Coverage Diff             @@
##           feature   #14858      +/-   ##
===========================================
- Coverage    93.63%   93.04%   -0.59%     
===========================================
  Files          249      247       -2     
  Lines         6675     6603      -72     
  Branches      1926     1943      +17     
===========================================
- Hits          6250     6144     -106     
- Misses         424      456      +32     
- Partials         1        3       +2
Impacted Files Coverage Δ
components/tree/Tree.tsx 96.42% <100%> (-0.13%) ⬇️
components/grid/row.tsx 65.3% <0%> (-28.58%) ⬇️
components/input/calculateNodeHeight.tsx 65.45% <0%> (-21.82%) ⬇️
components/transfer/list.tsx 89.53% <0%> (-4.66%) ⬇️
components/input/TextArea.tsx 92.72% <0%> (-3.64%) ⬇️
components/upload/UploadList.tsx 87.15% <0%> (-1.84%) ⬇️
components/table/filterDropdown.tsx 94.44% <0%> (-0.43%) ⬇️
components/calendar/index.tsx 92.94% <0%> (-0.32%) ⬇️
components/table/util.tsx 97.5% <0%> (-0.28%) ⬇️
components/icon/index.tsx 87.75% <0%> (-0.25%) ⬇️
... and 34 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fb8b198...ed6163e. Read the comment docs.

@netlify

This comment has been minimized.

Copy link

commented Feb 15, 2019

Deploy preview for ant-design ready!

Built with commit ed6163e

https://deploy-preview-14858--ant-design.netlify.com

@yesmeck

This comment has been minimized.

Copy link
Member

commented Feb 15, 2019

20190215181658

It's not horizontal aligned.

@afc163

This comment has been minimized.

Copy link
Member

commented Feb 15, 2019

I like it, we can add <Tree blockNode> prop for this, cause it could be a breaking change of style.

@kimochg

This comment has been minimized.

Copy link
Contributor Author

commented Feb 18, 2019

According to the discussion, it seems to me the todo list is as follow:

  • new props blockNode in rc-tree
  • add styles for .ant-tree.block-node

I am not pretty sure about it. Could anyone give a bright routine of achieving this full-width tree content proposal?

@afc163

This comment has been minimized.

Copy link
Member

commented Feb 18, 2019

<Tree blockNode> renders as .ant-tree.ant-tree-block-node.

@kimochg kimochg closed this Feb 25, 2019

@afc163 afc163 reopened this Feb 25, 2019

@afc163

This comment has been minimized.

Copy link
Member

commented Feb 25, 2019

@kimochg Can we make this implementation?

<Tree blockNode />

@kimochg kimochg force-pushed the kimochg:style-tree branch from 0a0e741 to 5c2582c Feb 26, 2019

@kimochg kimochg force-pushed the kimochg:style-tree branch from 5c2582c to e34d2af Feb 26, 2019

@kimochg

This comment has been minimized.

Copy link
Contributor Author

commented Feb 26, 2019

@afc163 done

@afc163 afc163 requested a review from zombieJ Feb 26, 2019

@zombieJ

This comment has been minimized.

Copy link
Member

commented Feb 26, 2019

pls help to update doc.
(Add one column for version info. ref: here)

@kimochg

This comment has been minimized.

Copy link
Contributor Author

commented Feb 27, 2019

@zombieJ docs updated. plz check, thanks.

@@ -16,6 +16,7 @@ subtitle: 树形控件
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoExpandParent | 是否自动展开父节点 | boolean | true |
| blockNode | 是否树节点填充剩余空间 | boolean | false |

This comment has been minimized.

Copy link
@afc163

afc163 Feb 27, 2019

Member

节点占据一行。

@zombieJ

This comment has been minimized.

Copy link
Member

commented Feb 28, 2019

Feature branch updated. Pls merge ~

kimochg added some commits Mar 3, 2019

@afc163

afc163 approved these changes Mar 8, 2019

@afc163 afc163 merged commit c882a4b into ant-design:feature Mar 8, 2019

24 of 26 checks passed

Header rules No header rules processed
Details
Pages changed 16 new files uploaded
Details
AccessLint Review complete
Codacy/PR Quality Review Up to standards. A positive pull request.
Details
LGTM analysis: JavaScript No new or fixed alerts
Details
Mixed content No mixed content detected
Details
Redirect rules 18 redirect rules processed
Details
WIP Ready for review
Details
ant-design.ant-design #ant design succeeded
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
codebeat Target branch is not tracked
Details
deploy/netlify Deploy preview ready!
Details
security/snyk - package.json (paranoidjk) No manifest changes detected

afc163 added a commit that referenced this pull request Mar 8, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.