DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

visually center root node

Browse Source 
Summary: root node is now centerwed between edge and editor

Reviewed By: emilsjolander

Differential Revision: D6989159

fbshipit-source-id: ce2621402d380843125fabc43452c64ea3b563dd
This commit is contained in:
Daniel Büchele
2018-02-15 08:25:14 -08:00
committed by Facebook Github Bot
parent 35c6931ade
commit 91621641e6
3 changed files with 48 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/components/Playground/index.css
View File

@@ -49,6 +49,10 @@
align-self: center;
}
.Playground.standalone > .YogaNode {
transform: translateX(-175px);
}
.Playground .Actions {
padding: 15px;
}

84
website/src/components/Playground/index.js
View File

@@ -218,7 +218,7 @@ export default class Playground extends Component<Props, State> {
const playground = (
<div
className="Playground"
className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
onMouseDown={this.onMouseDown}
style={{height, maxHeight: height}}
ref={ref => {
@@ -232,47 +232,49 @@ export default class Playground extends Component<Props, State> {
direction={direction}
showGuides={this.props.showGuides}
/>
<Sidebar>
<div className="Actions">
<Row gutter={15}>
<Col span={12}>
<CodeGenerators
layoutDefinition={layoutDefinition}
direction={direction}
/>
</Col>
<Col span={12}>
<URLShortener />
</Col>
</Row>
</div>
{this.state.selectedNodePath ? (
<Editor
node={selectedNode}
selectedNodeIsRoot={
selectedNodePath ? selectedNodePath.length === 0 : false
}
onChangeLayout={this.onChangeLayout}
onChangeSetting={(key, value) => this.setState({[key]: value})}
direction={direction}
onRemove={
selectedNodePath && selectedNodePath.length > 0
? this.onRemove
: undefined
}
onAdd={
selectedNodePath &&
selectedNodePath.length < this.props.maxDepth
? this.onAdd
: undefined
}
/>
) : (
<div className="NoContent">
Select a node to edit its properties
{!this.props.renderSidebar && (
<Sidebar>
<div className="Actions">
<Row gutter={15}>
<Col span={12}>
<CodeGenerators
layoutDefinition={layoutDefinition}
direction={direction}
/>
</Col>
<Col span={12}>
<URLShortener />
</Col>
</Row>
</div>
)}
</Sidebar>
{this.state.selectedNodePath ? (
<Editor
node={selectedNode}
selectedNodeIsRoot={
selectedNodePath ? selectedNodePath.length === 0 : false
}
onChangeLayout={this.onChangeLayout}
onChangeSetting={(key, value) => this.setState({[key]: value})}
direction={direction}
onRemove={
selectedNodePath && selectedNodePath.length > 0
? this.onRemove
: undefined
}
onAdd={
selectedNodePath &&
selectedNodePath.length < this.props.maxDepth
? this.onAdd
: undefined
}
/>
) : (
<div className="NoContent">
Select a node to edit its properties
</div>
)}
</Sidebar>
)}
</div>
);

2
website/src/pages/index.js
View File

@@ -58,7 +58,7 @@ const HeroSection = () => (
const PlaygroundSection = () => (
<Row>
<Col xl={24} lg={0} md={0} sm={0} xs={0}>
<Playground selectedNodePath={[]} showGuides={false} height={600} />
<Playground selectedNodePath={[]} showGuides={false} height={601} />
</Col>
</Row>
);