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

bugfixes

Browse Source 
Summary:
- adds favicon
- adds page titles
- fixes bug in react native code gen

allow-large-files

Reviewed By: emilsjolander

Differential Revision: D7013492

fbshipit-source-id: d29a56a7caddf0da4fb19a0ba443c6906ccfff56
This commit is contained in:
Daniel Büchele
2018-02-19 02:08:18 -08:00
committed by Facebook Github Bot
parent 7f44ec512e
commit e024943c4b
178 changed files with 614 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/gatsby-node.js
View File

@@ -22,6 +22,7 @@ exports.createPages = ({boundActionCreators, graphql}) => {
node {
frontmatter {
path
title
hasPlayground
initialPlayground
redirect

7
website/src/components/Page.js
View File

@@ -11,11 +11,14 @@
import React from 'react';
import Toolbar from './Toolbar';
import Footer from './Footer';
import Helmet from 'react-helmet';
import favicon from '../pages/logos/favicon.png';
import './Page.css';
require('prismjs/themes/prism.css');
type Props = {|
children: any,
title?: string,
className?: string,
withSpacing?: boolean,
shouldShowFooter?: boolean,
@@ -23,6 +26,10 @@ type Props = {|
export default (props: Props) => (
<div className={`Page ${props.className || ''}`}>
<Helmet>
<title>{`Yoga Layout${props.title ? ` | ${props.title}` : ''}`}</title>
<link rel="shortcut icon" type="image/png" href={favicon} />
</Helmet>
<Toolbar />
<div className={`PageContent ${props.withSpacing ? 'withSpacing' : ''}`}>
{props.children}

2
website/src/components/Playground/CodeGenerators.js
View File

@@ -136,7 +136,7 @@ export default class CodeGenerators extends Component<Props, State> {
</div>
)}
</Modal>,
<Dropdown overlay={menu} key="dropdown" trigger="click">
<Dropdown overlay={menu} key="dropdown" trigger={['click']}>
<Button>
Get Code <Icon type="down" />
</Button>

26
website/src/components/Playground/CodeReactNative.js
View File

@@ -22,6 +22,7 @@ function getValue(value) {
}
function getEnum(yogaEnum: string, value: string | number): string {
console.log(yogaEnum);
const enumValue = Object.keys(yoga)
.filter(
key =>
@@ -43,14 +44,13 @@ function getEnum(yogaEnum: string, value: string | number): string {
function getLayoutCode(node: LayoutRecordT, indent: string = ''): string {
const lines = [];
const untouchedLayout = LayoutRecord();
const untouchedPosition = PositionRecord();
lines.push(indent + '<View style={{');
lines.push(indent + ' flex: 1,');
Object.keys(node.toJSON()).forEach(key => {
if (key === 'border' && !node.border.equals(untouchedPosition)) {
if (key === 'border' && !node.border.equals(untouchedLayout[key])) {
['Top', 'Left', 'Right', 'Bottom'].forEach(pKey => {
if (
untouchedPosition[pKey.toLowerCase()] !==
untouchedLayout[key][pKey.toLowerCase()] !==
node.border[pKey.toLowerCase()]
) {
lines.push(
@@ -63,11 +63,12 @@ function getLayoutCode(node: LayoutRecordT, indent: string = ''): string {
});
} else if (
node[key] instanceof PositionRecord &&
!node[key].equals(untouchedPosition)
!node[key].equals(untouchedLayout[key])
) {
const {top, left, right, bottom} = node[key].toJS();
if (
top !== untouchedPosition.top &&
top &&
top !== untouchedLayout[key].top &&
top === left &&
top === right &&
top === bottom
@@ -77,18 +78,20 @@ function getLayoutCode(node: LayoutRecordT, indent: string = ''): string {
return;
}
const alreadySet = [];
if (top !== untouchedPosition.top && top === bottom) {
if (top && top !== untouchedLayout[key].top && top === bottom) {
lines.push(indent + ` ${key}Vertical: ${getValue(node[key].top)},`);
alreadySet.push('top', 'bottom');
}
if (left !== untouchedPosition.left && left === right) {
if (left && left !== untouchedLayout[key].left && left === right) {
lines.push(indent + ` ${key}Horizontal: ${getValue(node[key].left)},`);
alreadySet.push('left', 'right');
}
['left', 'top', 'right', 'bottom'].forEach((pKey, i) => {
if (
node[key][pKey] !== untouchedPosition[pKey] &&
alreadySet.indexOf(pKey) === -1
node[key][pKey] !== untouchedLayout[key][pKey] &&
alreadySet.indexOf(pKey) === -1 &&
node[key][pKey] &&
!Number.isNaN(node[key][pKey])
) {
lines.push(
indent +
@@ -98,6 +101,11 @@ function getLayoutCode(node: LayoutRecordT, indent: string = ''): string {
);
}
});
} else if (
key === 'positionType' &&
node[key] === yoga.POSITION_TYPE_ABSOLUTE
) {
lines.push(indent + ` position: 'absolute',`);
} else if (
key !== 'children' &&
node[key] !== untouchedLayout[key] &&

2
website/src/components/Playground/YogaEnumSelect.js
View File

@@ -73,7 +73,7 @@ export default class YogaEnumSelect extends Component<Props> {
return this.values.length > 3 ? (
<div className="YogaEnumSelect">
<Dropdown
trigger="click"
trigger={['click']}
disabled={props.disabled}
overlay={
<Menu onClick={this.handleMenuClick}>

12
website/src/pages/docs/index.js
View File

@@ -23,7 +23,7 @@ const CATEGORY_TITLE = {
};
export default ({data}) => (
<Page className="docs-landing" shouldShowFooter>
<Page className="docs-landing" shouldShowFooter title="Documentation">
<Padded>
<Row className="heading">
<Col xl={16} lg={16} md={24} sm={24} xs={24}>
@@ -31,11 +31,11 @@ export default ({data}) => (
<p>
Welcome to Yoga's documentation page. Below you will find helpful
documentation covering all the features of the library. Each page
comes with an interactive playground for you to explore that feature.
The examples section feature some of the most common layouts and
how to build them. This is a community projects and contributions
within documentation, code, and tests are more then welcome.
The contributing section below covers how to get started.
comes with an interactive playground for you to explore that
feature. The examples section feature some of the most common
layouts and how to build them. This is a community projects and
contributions within documentation, code, and tests are more then
welcome. The contributing section below covers how to get started.
</p>
</Col>
</Row>

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

@@ -22,50 +22,50 @@ import Link from 'gatsby-link';
import Footer from '../components/Footer';
const playgroundInitialState = {
"width":500,
"height":500,
"alignItems":1,
"padding":{
"top":"20",
"right":"20",
"bottom":"20",
"left":"20"
width: 500,
height: 500,
alignItems: 1,
padding: {
top: '20',
right: '20',
bottom: '20',
left: '20',
},
"children":[
children: [
{
"width":100,
"height":100,
"minWidth":null,
"maxWidth":null,
"minHeight":null,
"maxHeight":null
width: 100,
height: 100,
minWidth: null,
maxWidth: null,
minHeight: null,
maxHeight: null,
},
{
"width":100,
"height":100,
"margin":{
"right":"20",
"left":"20"
width: 100,
height: 100,
margin: {
right: '20',
left: '20',
},
"flexGrow":"1",
"minWidth":null,
"maxWidth":null,
"minHeight":null,
"maxHeight":null
flexGrow: '1',
minWidth: null,
maxWidth: null,
minHeight: null,
maxHeight: null,
},
{
"width":100,
"height":100,
"minWidth":null,
"maxWidth":null,
"minHeight":null,
"maxHeight":null
}
width: 100,
height: 100,
minWidth: null,
maxWidth: null,
minHeight: null,
maxHeight: null,
},
],
"minWidth":null,
"maxWidth":null,
"minHeight":null,
"maxHeight":null
minWidth: null,
maxWidth: null,
minHeight: null,
maxHeight: null,
};
const HeroSection = () => (
@@ -77,9 +77,9 @@ const HeroSection = () => (
Flexible Layouts <br /> with Yoga
</h1>
<p>
Build flexible layouts on any platform with a highly optimized
open source layout engine designed with speed, size, and ease
of use in mind.
Build flexible layouts on any platform with a highly optimized open
source layout engine designed with speed, size, and ease of use in
mind.
</p>
<Link to="/docs">
@@ -103,7 +103,12 @@ const HeroSection = () => (
const PlaygroundSection = () => (
<Row>
<Col lg={24} md={0} sm={0} xs={0}>
<Playground selectedNodePath={[]} showGuides={true} height={601} layoutDefinition={playgroundInitialState} />
<Playground
selectedNodePath={[]}
showGuides={true}
height={601}
layoutDefinition={playgroundInitialState}
/>
</Col>
</Row>
);
@@ -114,12 +119,11 @@ const AboutSectionOne = () => (
<Col xl={16} lg={16} md={24} sm={24} xs={24}>
<h1>Open Source Adoption</h1>
<p>
Yoga already powers widely used open source frameworks.
It enables these frameworks to offer a simple and intuitive
layout API that allows for engineers to collaborate more easily
across platforms. Yoga has unlocked exciting features such as
calculating layouts off of the main thread to help ensure
smooth UI performance.
Yoga already powers widely used open source frameworks. It enables
these frameworks to offer a simple and intuitive layout API that
allows for engineers to collaborate more easily across platforms. Yoga
has unlocked exciting features such as calculating layouts off of the
main thread to help ensure smooth UI performance.
</p>
</Col>
</Row>
@@ -152,17 +156,18 @@ const AboutSectionTwo = () => (
<h3>PERFORMANCE</h3>
<p>
Yoga was built to be fast and performance will always be one of Yoga's
primary goals. For a layout engine to be able to power
any range of applications, it needs to be fast and never stand in the
way of a fluid user experience.
primary goals. For a layout engine to be able to power any range of
applications, it needs to be fast and never stand in the way of a
fluid user experience.
</p>
<h3>CROSS PLATFORM</h3>
<p>
Yoga is built with cross platform in mind. To ensure Yoga can be used
anywhere, it was written in portable C/C++ and has a low number of
dependencies and small binary size. This means Yoga can be used on
iOS and Android, sharing knowledge, and potentially code, between platforms.
dependencies and small binary size. This means Yoga can be used on iOS
and Android, sharing knowledge, and potentially code, between
platforms.
</p>
<h3>EASY TO LEARN</h3>
@@ -178,7 +183,7 @@ const AboutSectionTwo = () => (
);
export default () => (
<Page className="landing-page">
<Page className="landing-page" title="A cross-platform layout engine">
<HeroSection />
<PlaygroundSection />
<AboutSectionOne />

BIN
website/src/pages/logos/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

18
website/src/pages/playground/index.js
View File

@@ -15,15 +15,17 @@ import {Row, Col} from 'antd';
import './index.css';
export default () => (
<Page>
<Row className="playground-page">
<Page title="Playground">
<Row className="playground-page">
<Col lg={24} md={0} sm={0} xs={0}>
<Playground height="100%" selectedNodePath={[]} persist />
</Col>
<Playground height="100%" selectedNodePath={[]} persist />
</Col>
<Col lg={0} xs={24} className="error-container">
<p className="error-text">Sorry! The playground only works on larger displays currently.</p>
</Col>
</Row>
<Col lg={0} xs={24} className="error-container">
<p className="error-text">
Sorry! The playground only works on larger displays currently.
</p>
</Col>
</Row>
</Page>
);

4
website/src/templates/withPlayground.js
View File

@@ -37,7 +37,9 @@ export default class withPlayground extends Component<Props> {
);
}
return (
<Page className="doc-block playground">
<Page
className="doc-block playground"
title={this.props.pathContext.frontmatter.title}>
<Playground
layoutDefinition={layoutDefinition}
selectedNodePath={[]}

5
website/src/templates/withoutPlayground.js
View File

@@ -17,7 +17,10 @@ import './index.css';
export default ({pathContext}) => {
return (
<Page className="doc-block no-playground" shouldShowFooter>
<Page
className="doc-block no-playground"
shouldShowFooter
title={pathContext.frontmatter.title}>
<Padded>
<Row>
<Col xl={16} lg={16} md={24} sm={24} xs={24}>