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; align-self: center;
} }
.Playground.standalone > .YogaNode {
transform: translateX(-175px);
}
.Playground .Actions { .Playground .Actions {
padding: 15px; 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 = ( const playground = (
<div <div
className="Playground" className={`Playground ${this.props.renderSidebar ? '' : 'standalone'}`}
onMouseDown={this.onMouseDown} onMouseDown={this.onMouseDown}
style={{height, maxHeight: height}} style={{height, maxHeight: height}}
ref={ref => { ref={ref => {
@@ -232,47 +232,49 @@ export default class Playground extends Component<Props, State> {
direction={direction} direction={direction}
showGuides={this.props.showGuides} showGuides={this.props.showGuides}
/> />
<Sidebar> {!this.props.renderSidebar && (
<div className="Actions"> <Sidebar>
<Row gutter={15}> <div className="Actions">
<Col span={12}> <Row gutter={15}>
<CodeGenerators <Col span={12}>
layoutDefinition={layoutDefinition} <CodeGenerators
direction={direction} layoutDefinition={layoutDefinition}
/> direction={direction}
</Col> />
<Col span={12}> </Col>
<URLShortener /> <Col span={12}>
</Col> <URLShortener />
</Row> </Col>
</div> </Row>
{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> </div>
)} {this.state.selectedNodePath ? (
</Sidebar> <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> </div>
); );

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

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