aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-08-28 23:03:18 +0800
committerFabio Berger <me@fabioberger.com>2018-08-28 23:03:18 +0800
commitca0567ad0911657b0241844cd2f34d78b697de8c (patch)
tree29e01456dd6a17e6a2886c242d09534795511ccc /packages/website/ts
parentb8241c0f808518a3f727424cacb952cc9ce80c4c (diff)
downloaddexon-0x-contracts-ca0567ad0911657b0241844cd2f34d78b697de8c.tar.gz
dexon-0x-contracts-ca0567ad0911657b0241844cd2f34d78b697de8c.tar.zst
dexon-0x-contracts-ca0567ad0911657b0241844cd2f34d78b697de8c.zip
Begin implementing doc home page
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/documentation/docs_content_top_bar.tsx110
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx13
-rw-r--r--packages/website/ts/containers/docs_home.ts15
-rw-r--r--packages/website/ts/index.tsx2
-rw-r--r--packages/website/ts/pages/documentation/home.tsx55
-rw-r--r--packages/website/ts/types.ts1
-rw-r--r--packages/website/ts/utils/constants.ts1
7 files changed, 197 insertions, 0 deletions
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
new file mode 100644
index 000000000..c9bdca61b
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -0,0 +1,110 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import Drawer from 'material-ui/Drawer';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
+import { Container } from 'ts/components/ui/container';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+export interface DocsContentTopBarProps {
+ location: Location;
+ translate: Translate;
+}
+
+interface DocsContentTopBarState {
+ isDrawerOpen: boolean;
+}
+
+const styles: Styles = {
+ menuItem: {
+ fontSize: 14,
+ color: colors.darkestGrey,
+ paddingTop: 6,
+ paddingBottom: 6,
+ cursor: 'pointer',
+ fontWeight: 400,
+ },
+};
+
+export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, DocsContentTopBarState> {
+ constructor(props: DocsContentTopBarProps) {
+ super(props);
+ this.state = {
+ isDrawerOpen: false,
+ };
+ }
+ public componentWillReceiveProps(nextProps: DocsContentTopBarProps): void {
+ if (nextProps.location.pathname !== this.props.location.pathname) {
+ this.setState({
+ isDrawerOpen: false,
+ });
+ }
+ }
+ public render(): React.ReactNode {
+ const menuIconStyle = {
+ fontSize: 25,
+ color: 'black',
+ cursor: 'pointer',
+ };
+ return (
+ <div style={{ height: 75, color: colors.linkSectionGrey }} className="pb1 flex items-center">
+ <Container className="flex items-center" width="100%">
+ <div className="col col-2">
+ <i className="zmdi zmdi-chevron-left" /> 0xproject.com
+ </div>
+ <div className="col col-10">
+ <div className="flex items-center justify-between right" style={{ width: 300 }}>
+ <TopBarMenuItem
+ title={this.props.translate.get(Key.Github, Deco.Cap)}
+ path={constants.URL_GITHUB_ORG}
+ style={styles.menuItem}
+ isNightVersion={false}
+ isExternal={true}
+ />
+ <TopBarMenuItem
+ title={this.props.translate.get(Key.Forum, Deco.Cap)}
+ path={constants.URL_FORUM}
+ style={styles.menuItem}
+ isNightVersion={false}
+ isExternal={true}
+ />
+ <TopBarMenuItem
+ title={this.props.translate.get(Key.LiveChat, Deco.Cap)}
+ path={constants.URL_ZEROEX_CHAT}
+ style={styles.menuItem}
+ isNightVersion={false}
+ isExternal={true}
+ />
+ </div>
+ </div>
+ <div className={'md-hide lg-hide'}>
+ <div style={menuIconStyle}>
+ <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
+ </div>
+ </div>
+ </Container>
+ {this._renderDrawer()}
+ </div>
+ );
+ }
+ private _renderDrawer(): React.ReactNode {
+ return (
+ <Drawer
+ open={this.state.isDrawerOpen}
+ docked={false}
+ openSecondary={true}
+ onRequestChange={this._onMenuButtonClick.bind(this)}
+ >
+ <div className="clearfix">TODO</div>
+ </Drawer>
+ );
+ }
+ private _onMenuButtonClick(): void {
+ this.setState({
+ isDrawerOpen: !this.state.isDrawerOpen,
+ });
+ }
+}
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
new file mode 100644
index 000000000..b65a27fd9
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { WebsitePaths } from 'ts/types';
+
+export const DocsLogo = () => {
+ return (
+ <div style={{ paddingTop: 28 }}>
+ <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
+ <img src="/images/docs_logo.svg" height="30px" />
+ </Link>
+ </div>
+ );
+};
diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts
new file mode 100644
index 000000000..79bf68618
--- /dev/null
+++ b/packages/website/ts/containers/docs_home.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Home as HomeComponent, HomeProps } from 'ts/pages/documentation/home';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+ translate: Translate;
+}
+
+const mapStateToProps = (state: State, _ownProps: HomeProps): ConnectedState => ({
+ translate: state.translate,
+});
+
+export const DocsHome: React.ComponentClass<HomeProps> = connect(mapStateToProps, undefined)(HomeComponent);
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 981c6f2cb..8ed40e69a 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-d
import * as injectTapEventPlugin from 'react-tap-event-plugin';
import { MetaTags } from 'ts/components/meta_tags';
import { About } from 'ts/containers/about';
+import { DocsHome } from 'ts/containers/docs_home';
import { FAQ } from 'ts/containers/faq';
import { Jobs } from 'ts/containers/jobs';
import { Landing } from 'ts/containers/landing';
@@ -91,6 +92,7 @@ render(
<Route path={WebsitePaths.FAQ} component={FAQ as any} />
<Route path={WebsitePaths.About} component={About as any} />
<Route path={WebsitePaths.Wiki} component={Wiki as any} />
+ <Route path={WebsitePaths.Docs} component={DocsHome as any} />
<Route
path={`${WebsitePaths.ZeroExJs}/:version?`}
component={LazyZeroExJSDocumentation}
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
new file mode 100644
index 000000000..eabad4def
--- /dev/null
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -0,0 +1,55 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import DocumentTitle = require('react-document-title');
+import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar';
+import { DocsLogo } from 'ts/components/documentation/docs_logo';
+import { Translate } from 'ts/utils/translate';
+
+export interface HomeProps {
+ location: Location;
+ translate: Translate;
+}
+
+export interface HomeState {}
+
+export class Home extends React.Component<HomeProps, HomeState> {
+ public render(): React.ReactNode {
+ return (
+ <div
+ className="flex items-center"
+ style={{
+ width: '100%',
+ background: 'linear-gradient(to right, #f5f5f5 0%, #f5f5f5 50%, #ffffff 50%, #ffffff 100%)',
+ }}
+ >
+ <DocumentTitle title="0x Docs Home" />
+ <div className="flex mx-auto">
+ <div
+ style={{
+ width: 234,
+ paddingLeft: 22,
+ paddingRight: 22,
+ backgroundColor: '#f5f5f5',
+ height: '100vh',
+ border: '1px black dotted',
+ }}
+ >
+ <DocsLogo />
+ </div>
+ <div
+ style={{
+ width: 716,
+ paddingLeft: 50,
+ paddingRight: 50,
+ backgroundColor: '#ffffff',
+ height: '100vh',
+ border: '1px black dotted',
+ }}
+ >
+ <DocsContentTopBar location={this.props.location} translate={this.props.translate} />
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 2c94fe910..c208ce90f 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -475,6 +475,7 @@ export enum Key {
ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION',
Sandbox = 'SANDBOX',
Github = 'GITHUB',
+ LiveChat = 'LIVE_CHAT',
}
export enum SmartContractDocSections {
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 2b4aa5209..24d4101f4 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -73,6 +73,7 @@ export const constants = {
URL_TESTNET_FAUCET: 'https://faucet.0xproject.com',
URL_GITHUB_ORG: 'https://github.com/0xProject',
URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki',
+ URL_FORUM: 'https://forum.0xproject.com',
URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/',
URL_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8',