From ca0567ad0911657b0241844cd2f34d78b697de8c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 16:03:18 +0100 Subject: Begin implementing doc home page --- packages/website/public/images/docs_logo.svg | 24 +++++ packages/website/translations/chinese.json | 3 +- packages/website/translations/english.json | 3 +- packages/website/translations/korean.json | 3 +- packages/website/translations/russian.json | 3 +- packages/website/translations/spanish.json | 3 +- .../documentation/docs_content_top_bar.tsx | 110 +++++++++++++++++++++ .../ts/components/documentation/docs_logo.tsx | 13 +++ packages/website/ts/containers/docs_home.ts | 15 +++ packages/website/ts/index.tsx | 2 + packages/website/ts/pages/documentation/home.tsx | 55 +++++++++++ packages/website/ts/types.ts | 1 + packages/website/ts/utils/constants.ts | 1 + 13 files changed, 231 insertions(+), 5 deletions(-) create mode 100644 packages/website/public/images/docs_logo.svg create mode 100644 packages/website/ts/components/documentation/docs_content_top_bar.tsx create mode 100644 packages/website/ts/components/documentation/docs_logo.tsx create mode 100644 packages/website/ts/containers/docs_home.ts create mode 100644 packages/website/ts/pages/documentation/home.tsx diff --git a/packages/website/public/images/docs_logo.svg b/packages/website/public/images/docs_logo.svg new file mode 100644 index 000000000..e3c4b628b --- /dev/null +++ b/packages/website/public/images/docs_logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 93e740a14..7c3872cee 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -85,5 +85,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index a75b73501..52e4eeb50 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -87,5 +87,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index e6fbcb4cc..81fbea6e3 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -85,5 +85,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 779bc8173..4cc7aab91 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -85,5 +85,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 54a463f98..f906de984 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -86,5 +86,6 @@ "TRADING_TUTORIAL": "trading tutorial", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", - "GITHUB": "github" + "GITHUB": "github", + "LIVE_CHAT": "live chat" } 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 { + 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 ( +
+ +
+ 0xproject.com +
+
+
+ + + +
+
+
+
+ +
+
+ + {this._renderDrawer()} +
+ ); + } + private _renderDrawer(): React.ReactNode { + return ( + +
TODO
+ + ); + } + 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 ( +
+ + + +
+ ); +}; 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 = 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( + { + public render(): React.ReactNode { + return ( +
+ +
+
+ +
+
+ +
+
+
+ ); + } +} 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', -- cgit v1.2.3