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
Merged

Conversation

@chengcyber
Copy link
Contributor

@chengcyber chengcyber 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
Copy link

@codecov codecov bot 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
Copy link

@codecov codecov bot 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
Copy link

@netlify netlify bot commented Feb 15, 2019

Deploy preview for ant-design ready!

Built with commit ed6163e

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

@yesmeck
Copy link
Member

@yesmeck yesmeck commented Feb 15, 2019

20190215181658

It's not horizontal aligned.

@afc163
Copy link
Member

@afc163 afc163 commented Feb 15, 2019

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

@chengcyber
Copy link
Contributor Author

@chengcyber chengcyber 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
Copy link
Member

@afc163 afc163 commented Feb 18, 2019

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

@chengcyber chengcyber closed this Feb 25, 2019
@afc163 afc163 reopened this Feb 25, 2019
@afc163
Copy link
Member

@afc163 afc163 commented Feb 25, 2019

@kimochg Can we make this implementation?

<Tree blockNode />

@chengcyber
Copy link
Contributor Author

@chengcyber chengcyber commented Feb 26, 2019

@afc163 done

@afc163 afc163 requested a review from zombieJ Feb 26, 2019
@zombieJ
Copy link
Member

@zombieJ zombieJ commented Feb 26, 2019

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

@chengcyber
Copy link
Contributor Author

@chengcyber chengcyber commented Feb 27, 2019

@zombieJ docs updated. plz check, thanks.

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

@afc163 afc163 Feb 27, 2019

节点占据一行。

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Feb 28, 2019

Feature branch updated. Pls merge ~

afc163
afc163 approved these changes Mar 8, 2019
@afc163 afc163 merged commit c882a4b into ant-design:feature Mar 8, 2019
26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants