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 (limited to 'packages') 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 From ee1e50a7225882bb0c97408100c85a199611fadb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 16:03:27 +0100 Subject: Swap out link --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 68f9a2f67..bf89775f7 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -128,7 +128,7 @@ export class DevelopersDropDown extends React.Component Date: Tue, 28 Aug 2018 17:18:40 +0100 Subject: Implement dev topbar --- .../website/public/images/developers/chat_icon.svg | 5 ++ .../public/images/developers/forum_icon.svg | 5 ++ .../public/images/developers/github_icon.svg | 4 + .../documentation/docs_content_top_bar.tsx | 98 ++++++++++++++++------ .../ts/components/documentation/docs_logo.tsx | 2 +- 5 files changed, 87 insertions(+), 27 deletions(-) create mode 100644 packages/website/public/images/developers/chat_icon.svg create mode 100644 packages/website/public/images/developers/forum_icon.svg create mode 100644 packages/website/public/images/developers/github_icon.svg (limited to 'packages') diff --git a/packages/website/public/images/developers/chat_icon.svg b/packages/website/public/images/developers/chat_icon.svg new file mode 100644 index 000000000..c48881454 --- /dev/null +++ b/packages/website/public/images/developers/chat_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/website/public/images/developers/forum_icon.svg b/packages/website/public/images/developers/forum_icon.svg new file mode 100644 index 000000000..8fb659475 --- /dev/null +++ b/packages/website/public/images/developers/forum_icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/website/public/images/developers/github_icon.svg b/packages/website/public/images/developers/github_icon.svg new file mode 100644 index 000000000..bf10cb221 --- /dev/null +++ b/packages/website/public/images/developers/github_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index c9bdca61b..c2bbfc417 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -3,9 +3,8 @@ 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 { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -29,6 +28,13 @@ const styles: Styles = { }, }; +interface MenuItemInfo { + title: string; + url: string; + iconUrl: string; + textStyle: React.CSSProperties; +} + export class DocsContentTopBar extends React.Component { constructor(props: DocsContentTopBarProps) { super(props); @@ -49,35 +55,44 @@ export class DocsContentTopBar extends React.Component - +
+
- 0xproject.com + + +
+ 0xproject.com +
+
- - - + {this._renderMenuItems(menuItemInfos)}
@@ -86,10 +101,41 @@ export class DocsContentTopBar extends React.Component
+
{this._renderDrawer()}
); } + private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { + const menuItems = _.map(menuItemInfos, menuItemInfo => { + return ( + +
+ +
+ {menuItemInfo.title} +
+
+ + ); + }); + return menuItems; + } private _renderDrawer(): React.ReactNode { return ( { return (
- +
); -- cgit v1.2.3 From 60ef45722cd20fe243f58f5eaf8717081cbc39f1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 17:18:48 +0100 Subject: Remove temporary borders --- packages/website/ts/pages/documentation/home.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index eabad4def..003212279 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -31,7 +31,6 @@ export class Home extends React.Component { paddingRight: 22, backgroundColor: '#f5f5f5', height: '100vh', - border: '1px black dotted', }} > @@ -43,7 +42,6 @@ export class Home extends React.Component { paddingRight: 50, backgroundColor: '#ffffff', height: '100vh', - border: '1px black dotted', }} > -- cgit v1.2.3 From ce51edcf80cbecab6f04db4704ddcf21c804f3b0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 17 Sep 2018 16:55:22 +0100 Subject: Implement new responsive, dev section header and home scaffolding --- .../documentation/docs_content_top_bar.tsx | 47 +++++++------ .../ts/components/documentation/docs_logo.tsx | 15 ++++- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/containers/docs_home.ts | 15 ++++- packages/website/ts/pages/documentation/home.tsx | 78 +++++++++++++++------- 5 files changed, 103 insertions(+), 53 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index c2bbfc417..148f2f7cb 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -3,6 +3,7 @@ import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; import { Link } from 'react-router-dom'; +import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -17,17 +18,6 @@ interface DocsContentTopBarState { isDrawerOpen: boolean; } -const styles: Styles = { - menuItem: { - fontSize: 14, - color: colors.darkestGrey, - paddingTop: 6, - paddingBottom: 6, - cursor: 'pointer', - fontWeight: 400, - }, -}; - interface MenuItemInfo { title: string; url: string; @@ -50,11 +40,6 @@ export class DocsContentTopBar extends React.Component - -
+ + +
-
+
+
{this._renderMenuItems(menuItemInfos)}
-
-
- +
+ +
+
+
+
@@ -110,7 +109,7 @@ export class DocsContentTopBar extends React.Component {this._renderDrawer()} -
+ ); } private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 2a539c84b..9daf84ad0 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -2,12 +2,21 @@ import * as React from 'react'; import { Link } from 'react-router-dom'; import { WebsitePaths } from 'ts/types'; -export const DocsLogo = () => { +export interface DocsLogoProps { + height: number; + containerStyle?: React.CSSProperties; +} + +export const DocsLogo: React.StatelessComponent = props => { return ( -
+
- +
); }; + +DocsLogo.defaultProps = { + containerStyle: {}, +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index f2ae68b70..1e0bfd959 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,6 +15,7 @@ export interface ContainerProps { paddingRight?: StringOrNum; paddingLeft?: StringOrNum; backgroundColor?: string; + background?: string; borderRadius?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts index 79bf68618..9c7b70a6f 100644 --- a/packages/website/ts/containers/docs_home.ts +++ b/packages/website/ts/containers/docs_home.ts @@ -1,15 +1,28 @@ import * as React from 'react'; import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; import { Home as HomeComponent, HomeProps } from 'ts/pages/documentation/home'; +import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; interface ConnectedState { translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; } const mapStateToProps = (state: State, _ownProps: HomeProps): ConnectedState => ({ translate: state.translate, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), }); -export const DocsHome: React.ComponentClass = connect(mapStateToProps, undefined)(HomeComponent); +export const DocsHome: React.ComponentClass = connect(mapStateToProps, mapDispatchToProps)(HomeComponent); diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 003212279..a065efc80 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,53 +1,81 @@ +import { colors } from '@0xproject/react-shared'; 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 { Container } from 'ts/components/ui/container'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const THROTTLE_TIMEOUT = 100; export interface HomeProps { location: Location; translate: Translate; + screenWidth: ScreenWidths; + dispatcher: Dispatcher; } export interface HomeState {} export class Home extends React.Component { + private readonly _throttledScreenWidthUpdate: () => void; + constructor(props: HomeProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + } public render(): React.ReactNode { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const mainContentPadding = isSmallScreen ? 0 : 50; return ( -
-
- -
-
+ + -
+
+

Start building on 0x

+
+
-
+ ); } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } } -- cgit v1.2.3 From 3504e875ccd201f623fa8f54f359b67b29b13d6f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:35:41 +0100 Subject: Move /docs endpoint before longer ones so doesn't overtake other doc endpoints --- packages/website/ts/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 8ed40e69a..e81b1bf07 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -92,7 +92,6 @@ render( - + {/* Legacy endpoints */} Date: Wed, 26 Sep 2018 13:37:25 +0100 Subject: Create a link ui component that abstracts away interval vs. internal links --- packages/website/ts/components/ui/link.tsx | 42 ++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 packages/website/ts/components/ui/link.tsx (limited to 'packages') diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx new file mode 100644 index 000000000..252199457 --- /dev/null +++ b/packages/website/ts/components/ui/link.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import { Link as ReactRounterLink } from 'react-router-dom'; + +export interface LinkProps { + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; + style?: React.CSSProperties; + className?: string; +} + +export const Link: React.StatelessComponent = ({ + style, + className, + isExternal, + to, + shouldOpenInNewTab, + children, +}) => { + if (isExternal) { + return ( + + {children} + + ); + } else { + return ( + + {children} + + ); + } +}; + +Link.defaultProps = { + isExternal: false, + shouldOpenInNewTab: false, + style: {}, + className: '', +}; + +Link.displayName = 'Link'; -- cgit v1.2.3 From ac1005b5a81136fa61834fc4b117ad64e3757238 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:37:46 +0100 Subject: Use new link component in Developer dropdown --- .../components/dropdowns/developers_drop_down.tsx | 35 +++++++++------------- 1 file changed, 14 insertions(+), 21 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 7a0aea182..bfd7287de 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,63 +1,56 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { DropDown } from 'ts/components/ui/drop_down'; +import { Link } from 'ts/components/ui/link'; import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; interface LinkInfo { link: string; - shouldOpenNewTab: boolean; + shouldOpenInNewTab?: boolean; } const gettingStartedKeyToLinkInfo1: ObjectMap = { [Key.BuildARelayer]: { link: `${WebsitePaths.Wiki}#Build-A-Relayer`, - shouldOpenNewTab: false, }, [Key.IntroTutorial]: { link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, - shouldOpenNewTab: false, }, }; const gettingStartedKeyToLinkInfo2: ObjectMap = { [Key.TradingTutorial]: { link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - shouldOpenNewTab: false, }, [Key.EthereumDevelopment]: { link: `${WebsitePaths.Wiki}#Ethereum-Development`, - shouldOpenNewTab: false, }, }; const popularDocsToLinkInfos: ObjectMap = { [Key.ZeroExJs]: { link: WebsitePaths.ZeroExJs, - shouldOpenNewTab: false, }, [Key.Connect]: { link: WebsitePaths.Connect, - shouldOpenNewTab: false, }, [Key.SmartContract]: { link: WebsitePaths.SmartContracts, - shouldOpenNewTab: false, }, }; const usefulLinksToLinkInfo: ObjectMap = { [Key.Github]: { link: constants.URL_GITHUB_ORG, - shouldOpenNewTab: true, + shouldOpenInNewTab: true, }, [Key.Whitepaper]: { link: WebsitePaths.Whitepaper, - shouldOpenNewTab: true, + shouldOpenInNewTab: true, }, [Key.Sandbox]: { link: constants.URL_SANDBOX, - shouldOpenNewTab: true, + shouldOpenInNewTab: true, }, }; @@ -167,15 +160,15 @@ export class DevelopersDropDown extends React.Component - {linkInfo.shouldOpenNewTab ? ( - - {linkText} - - ) : ( - - {linkText} - - )} + + {linkText} +
); }); -- cgit v1.2.3 From a8d8f90d23660d8b214554b442f81f5ff55aef59 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:37:58 +0100 Subject: Fix logo to link to docs home --- packages/website/ts/components/documentation/docs_logo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 9daf84ad0..570a81bca 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -10,7 +10,7 @@ export interface DocsLogoProps { export const DocsLogo: React.StatelessComponent = props => { return (
- +
-- cgit v1.2.3 From d8c68b000b977ce940eb95c234f0ecb435c697d6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:38:22 +0100 Subject: Implement dev home --- packages/react-shared/src/utils/colors.ts | 3 +- .../developers/tutorials/0x_order_basics.svg | 1 + .../developers/tutorials/build_a_relayer.svg | 3 + .../developers/tutorials/build_a_trading_bot.svg | 6 + .../developers/tutorials/develop_on_ethereum.svg | 4 + .../developers/tutorials/use_shared_liquidity.svg | 3 + packages/website/translations/chinese.json | 4 +- packages/website/translations/english.json | 4 +- packages/website/translations/korean.json | 4 +- packages/website/translations/russian.json | 4 +- packages/website/translations/spanish.json | 4 +- .../documentation/docs_content_top_bar.tsx | 10 +- .../components/documentation/tutorial_button.tsx | 73 +++++ packages/website/ts/pages/documentation/home.tsx | 356 ++++++++++++++++++++- packages/website/ts/types.ts | 9 + 15 files changed, 473 insertions(+), 15 deletions(-) create mode 100644 packages/website/public/images/developers/tutorials/0x_order_basics.svg create mode 100644 packages/website/public/images/developers/tutorials/build_a_relayer.svg create mode 100644 packages/website/public/images/developers/tutorials/build_a_trading_bot.svg create mode 100644 packages/website/public/images/developers/tutorials/develop_on_ethereum.svg create mode 100644 packages/website/public/images/developers/tutorials/use_shared_liquidity.svg create mode 100644 packages/website/ts/components/documentation/tutorial_button.tsx (limited to 'packages') diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 5a20eeaa1..778a5bc20 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -26,8 +26,9 @@ const baseColors = { darkestGrey: '#272727', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', - linkBlue: '#1D5CDE', + lightLinkBlue: '#3289F1', mediumBlue: '#488AEA', + linkBlue: '#1D5CDE', darkBlue: '#4D5481', lightTurquois: '#aefcdc', turquois: '#058789', diff --git a/packages/website/public/images/developers/tutorials/0x_order_basics.svg b/packages/website/public/images/developers/tutorials/0x_order_basics.svg new file mode 100644 index 000000000..57b04dfa5 --- /dev/null +++ b/packages/website/public/images/developers/tutorials/0x_order_basics.svg @@ -0,0 +1 @@ +Artboard 1 \ No newline at end of file diff --git a/packages/website/public/images/developers/tutorials/build_a_relayer.svg b/packages/website/public/images/developers/tutorials/build_a_relayer.svg new file mode 100644 index 000000000..afda40d88 --- /dev/null +++ b/packages/website/public/images/developers/tutorials/build_a_relayer.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg b/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg new file mode 100644 index 000000000..960616bfe --- /dev/null +++ b/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg b/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg new file mode 100644 index 000000000..e2c492ecd --- /dev/null +++ b/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg b/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg new file mode 100644 index 000000000..c402964aa --- /dev/null +++ b/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 7c3872cee..11b31b20b 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -86,5 +86,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 52e4eeb50..e9bc53aa7 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -88,5 +88,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 81fbea6e3..934f28eb6 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -86,5 +86,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 4cc7aab91..6ee1eb1d7 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -86,5 +86,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index f906de984..036cd3500 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -87,5 +87,7 @@ "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", - "LIVE_CHAT": "live chat" + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "MORE": "more" } diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 148f2f7cb..dede6f636 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,11 +1,11 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors } 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 { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; -import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; +import { Link } from 'ts/components/ui/link'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -57,11 +57,11 @@ export class DocsContentTopBar extends React.Component +
{ + constructor(props: TutorialButtonProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + return ( + +
+
+ +
+
+ + {this.props.tutorialInfo.title} + + + {this.props.tutorialInfo.description} + +
+
+ +
+
+ + ); + } + private _onHover(_event: React.FormEvent): void { + this.setState({ + isHovering: true, + }); + } + private _onHoverOff(): void { + this.setState({ + isHovering: false, + }); + } +} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a065efc80..ab29b7f07 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -4,13 +4,261 @@ 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 { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; +import { Link } from 'ts/components/ui/link'; +import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ScreenWidths } from 'ts/types'; +import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; +interface Package { + name: string; + description: string; + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; +} + const THROTTLE_TIMEOUT = 100; +const TUTORIALS: TutorialInfo[] = [ + { + title: 'Develop on Ethereum', + iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', + description: 'Learn more about building applications ontop of the Ethereum blockchain', + location: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + { + title: 'Build a relayer', + iconUrl: '/images/developers/tutorials/build_a_relayer.svg', + description: 'Learn how to build your own 0x relayer from scratch', + location: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + { + title: 'Learn the 0x order basics', + iconUrl: '/images/developers/tutorials/0x_order_basics.svg', + description: 'Tutorial on how to create, validate and fill an order over 0x protocol', + location: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + { + title: 'Tap into shared liquidity', + iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', + description: 'Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API', + location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +]; +const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { + '0x Protocol': [ + { + name: '0x.js', + description: + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as `order-utils` and `contract-wrappers`.', + to: WebsitePaths.ZeroExJs, + }, + { + name: '0x starter project', + description: + 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', + to: 'https://github.com/0xProject/0x-starter-project', + isExternal: true, + shouldOpenInNewTab: true, + }, + { + name: '@0xproject/connect', + description: + 'An http & websocket client for interacting with relayers that have implemented the Standard Relayer API', + to: WebsitePaths.Connect, + }, + { + name: '@0xproject/contract-wrappers', + description: + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in the contracts.', + to: WebsitePaths.ContractWrappers, + }, + { + name: '@0xproject/json-schemas', + description: + 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', + to: WebsitePaths.JSONSchemas, + }, + { + name: '@0xproject/order-utils', + description: + 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', + to: WebsitePaths.OrderUtils, + }, + { + name: '@0xproject/order-watcher', + description: + "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", + to: WebsitePaths.OrderWatcher, + }, + { + name: '@0xproject/sra-spec', + description: + 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + isExternal: true, + shouldOpenInNewTab: true, + }, + ], + Ethereum: [ + { + name: 'abi-gen', + description: + "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + isExternal: true, + shouldOpenInNewTab: true, + }, + { + name: 'ethereum-types', + description: + 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', + to: WebsitePaths.EthereumTypes, + }, + { + name: '@0xproject/sol-compiler', + description: + 'A wrapper around `solc-js` that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + to: WebsitePaths.SolCompiler, + }, + { + name: '@0xproject/sol-cov', + description: + 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', + to: WebsitePaths.SolCov, + }, + { + name: '@0xproject/subproviders', + description: + 'A collection of subproviders to use with `web3-provider-engine` (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + to: WebsitePaths.Subproviders, + }, + { + name: '@0xproject/web3-wrapper', + description: + 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', + to: WebsitePaths.Web3Wrapper, + }, + ], + 'Community Maintained': [ + { + name: '0x Event Extractor', + description: + 'NodeJS worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: '0x Tracker Worker', + description: + 'NodeJS worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Aquaduct', + description: + "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Aquaduct Server SDK', + description: + 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'DDEX Node.js SDK', + description: 'A node.js SDK for trading on the DDEX relayer', + to: 'https://www.npmjs.com/package/ddex-api', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Widget', + description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", + to: 'https://github.com/ERCdEX/widget', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Java SDK', + description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://github.com/ERCdEX/java', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Python SDK', + description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://github.com/ERCdEX/python', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Massive', + description: + 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'OpenRelay', + description: 'An open-source API-only Relayer written in Go', + to: 'https://github.com/NoteGio/openrelay', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'OpenRelay.js', + description: + 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Radar SDK', + description: + 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'The Ocean Javascript SDK', + description: + 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Tokenlon Javascript SDK', + description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", + to: 'https://www.npmjs.com/package/tokenlon-sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'AssetData decoder library in Java', + description: 'A small library that implements the 0x order assetData encoding/decoding in Java', + to: 'https://github.com/wildnothing/asset-data-decoder', + shouldOpenInNewTab: true, + isExternal: true, + }, + ], +}; export interface HomeProps { location: Location; @@ -54,26 +302,126 @@ export class Home extends React.Component { paddingRight={22} paddingTop={2} backgroundColor={colors.grey100} - height="100vh" >
-

Start building on 0x

+ {this._renderSectionTitle('Start building on 0x')} + + {this._renderSectionDescription( + 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + )} + + {_.map(TUTORIALS, tutorialInfo => ( + + ))} + + +
+
+ {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} + + {this._renderSectionDescription( + 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', + )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + +
); } + private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { + return ( +
+ {category} +
{_.map(pkgs, pkg => this._renderPackage(pkg))}
+
+ ); + } + private _renderPackage(pkg: Package): React.ReactNode { + return ( +
+
+
+
+ + + {pkg.name} + + +
+
+ + {pkg.description} + +
+
+ +
+
{this.props.translate.get(Key.More, Deco.Cap)}
+ + + +
+ +
+
+
+ ); + } + private _renderSectionTitle(text: string): React.ReactNode { + return ( + + {text} + + ); + } + private _renderSectionDescription(text: string): React.ReactNode { + return ( + + {text} + + ); + } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index c208ce90f..106287178 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -476,6 +476,8 @@ export enum Key { Sandbox = 'SANDBOX', Github = 'GITHUB', LiveChat = 'LIVE_CHAT', + LibrariesAndTools = 'LIBRARIES_AND_TOOLS', + More = 'MORE', } export enum SmartContractDocSections { @@ -622,4 +624,11 @@ export interface InjectedWeb3 { getNetwork(cd: (err: Error, networkId: string) => void): void; }; } + +export interface TutorialInfo { + title: string; + iconUrl: string; + description: string; + location: string; +} // tslint:disable:max-file-line-count -- cgit v1.2.3 From f3ad64aa1c2930affbfd074316b5f407580b7523 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 14:52:58 +0100 Subject: Move more text over to translation files --- packages/website/translations/chinese.json | 11 ++++++++--- packages/website/translations/english.json | 11 ++++++++--- packages/website/translations/korean.json | 11 ++++++++--- packages/website/translations/russian.json | 11 ++++++++--- packages/website/translations/spanish.json | 11 ++++++++--- .../ts/components/documentation/tutorial_button.tsx | 9 +++++---- .../ts/components/dropdowns/developers_drop_down.tsx | 12 ++++++------ packages/website/ts/pages/documentation/home.tsx | 19 ++++++++++--------- packages/website/ts/types.ts | 10 +++++++--- 9 files changed, 68 insertions(+), 37 deletions(-) (limited to 'packages') diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 11b31b20b..0da27e2c4 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -80,9 +80,14 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "开发人员", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index e9bc53aa7..6cb3dc103 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -82,9 +82,14 @@ "ROCKETCHAT": "rocket.chat", "TRADE_CALL_TO_ACTION": "trade on 0x", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 934f28eb6..19b3fbe81 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -80,9 +80,14 @@ "ROCKETCHAT": "Rocket.chat", "DEVELOPERS": "개발자", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 6ee1eb1d7..038eb72f8 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -80,9 +80,14 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "Для разработчиков", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 036cd3500..42a1dc7d1 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -81,9 +81,14 @@ "HOME": "rocket.chat", "ROCKETCHAT": "desarrolladores", "BUILD_A_RELAYER": "build a relayer", - "ETHEREUM_DEVELOPMENT": "ethereum development", - "INTRO_TUTORIAL": "intro tutorial", - "TRADING_TUTORIAL": "trading tutorial", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "USE_SHARED_LIQUIDITY": "use shared liquidity", + "USE_SHARED_LIQUIDITY_DESCRIPTION": + "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index b83fd82c2..0cb7d9de5 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -2,11 +2,12 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; -import { TutorialInfo } from 'ts/types'; +import { Deco, Key, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; export interface TutorialButtonProps { + translate: Translate; tutorialInfo: TutorialInfo; } @@ -44,10 +45,10 @@ export class TutorialButton extends React.Component
- {this.props.tutorialInfo.title} + {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} - {this.props.tutorialInfo.description} + {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)}
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index bfd7287de..0af211bc1 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -16,17 +16,17 @@ const gettingStartedKeyToLinkInfo1: ObjectMap = { [Key.BuildARelayer]: { link: `${WebsitePaths.Wiki}#Build-A-Relayer`, }, - [Key.IntroTutorial]: { + [Key.OrderBasics]: { link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, }, }; const gettingStartedKeyToLinkInfo2: ObjectMap = { - [Key.TradingTutorial]: { - link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - }, - [Key.EthereumDevelopment]: { + [Key.DevelopOnEthereum]: { link: `${WebsitePaths.Wiki}#Ethereum-Development`, }, + [Key.UseSharedLiquidity]: { + link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, }; const popularDocsToLinkInfos: ObjectMap = { [Key.ZeroExJs]: { @@ -157,7 +157,7 @@ export class DevelopersDropDown extends React.Component { i++; const isLast = i === numLinks; - const linkText = this.props.translate.get(key as Key, Deco.CapWords); + const linkText = this.props.translate.get(key as Key, Deco.Cap); return (
{ {_.map(TUTORIALS, tutorialInfo => ( diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 106287178..a1325d9bc 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -469,9 +469,13 @@ export enum Key { RocketChat = 'ROCKETCHAT', TradeCallToAction = 'TRADE_CALL_TO_ACTION', BuildARelayer = 'BUILD_A_RELAYER', - EthereumDevelopment = 'ETHEREUM_DEVELOPMENT', - IntroTutorial = 'INTRO_TUTORIAL', - TradingTutorial = 'TRADING_TUTORIAL', + BuildARelayerDescription = 'BUILD_A_RELAYER_DESCRIPTION', + DevelopOnEthereum = 'DEVELOP_ON_ETHEREUM', + DevelopOnEthereumDescription = 'DEVELOP_ON_ETHEREUM_DESCRIPTION', + OrderBasics = 'ORDER_BASICS', + OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', + UseSharedLiquidity = 'USE_SHARED_LIQUIDITY', + UseSharedLiquidityDescription = 'USE_SHARED_LIQUIDITY_DESCRIPTION', ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', Sandbox = 'SANDBOX', Github = 'GITHUB', -- cgit v1.2.3 From e66476889000d78b1d22b07294361d0edc342a40 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 13:32:04 +0100 Subject: Import ObjectMap from types now that it's moved --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 0af211bc1..f03bc6623 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,9 +1,10 @@ import { colors } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import { DropDown } from 'ts/components/ui/drop_down'; import { Link } from 'ts/components/ui/link'; -import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -- cgit v1.2.3 From 10bd255e9d05d8fec5787535953ba656f8263015 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 14:27:12 +0100 Subject: Shorten tutorial descriptions --- packages/website/translations/chinese.json | 5 ++--- packages/website/translations/english.json | 5 ++--- packages/website/translations/korean.json | 5 ++--- packages/website/translations/russian.json | 5 ++--- packages/website/translations/spanish.json | 5 ++--- 5 files changed, 10 insertions(+), 15 deletions(-) (limited to 'packages') diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 0da27e2c4..5390b5484 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -80,14 +80,13 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "开发人员", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index a8b63d6ea..5d999e2d7 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -83,14 +83,13 @@ "ROCKETCHAT": "rocket.chat", "TRADE_CALL_TO_ACTION": "trade on 0x", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 19b3fbe81..87bad68af 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -80,14 +80,13 @@ "ROCKETCHAT": "Rocket.chat", "DEVELOPERS": "개발자", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 038eb72f8..8e352c234 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -80,14 +80,13 @@ "HOME": "Rocket.chat", "ROCKETCHAT": "Для разработчиков", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 42a1dc7d1..10123b88c 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -81,14 +81,13 @@ "HOME": "rocket.chat", "ROCKETCHAT": "desarrolladores", "BUILD_A_RELAYER": "build a relayer", - "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of the Ethereum blockchain", + "BUILD_A_RELAYER_DESCRIPTION": "Learn more about building applications ontop of Ethereum", "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": - "Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", -- cgit v1.2.3 From 12cfa6b45063b40e39a2f2e6c169fc2102843a16 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 14:28:06 +0100 Subject: Make sidebar menu item formatting optional so package names (with hyphens) render properly --- .../src/components/nested_sidebar_menu.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index c8bddb59a..3c61fb0b1 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -19,6 +19,7 @@ export interface NestedSidebarMenuProps { selectedVersion?: string; versions?: string[]; onVersionSelected?: (semver: string) => void; + shouldReformatMenuItemNames?: boolean; } export interface NestedSidebarMenuState {} @@ -42,16 +43,16 @@ export class NestedSidebarMenu extends React.Component = { shouldDisplaySectionHeaders: true, onMenuItemClick: _.noop.bind(_), + shouldReformatMenuItemNames: true, }; public render(): React.ReactNode { const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { // tslint:disable-next-line:no-unused-variable - const id = utils.getIdFromName(sectionName); return ( -
-
+
+
{finalSectionName.toUpperCase()}
{this._renderMenuItems(menuItems)} @@ -86,7 +87,9 @@ export class NestedSidebarMenu extends React.Component { - const finalMenuItemName = utils.convertDashesToSpaces(menuItemName); + const finalMenuItemName = this.props.shouldReformatMenuItemNames + ? utils.convertDashesToSpaces(menuItemName) + : menuItemName; const id = utils.getIdFromName(menuItemName); return (
@@ -99,7 +102,13 @@ export class NestedSidebarMenu extends React.Component - {finalMenuItemName} + + {finalMenuItemName} + {this._renderMenuItemSubsections(menuItemName)} -- cgit v1.2.3 From 155a4a8f067e36912c3eb6bc279ca58ce90a53c0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 14:28:39 +0100 Subject: Add sidebar menu, proper scrolling and mobile-optimize --- .../documentation/docs_content_top_bar.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 16 +- packages/website/ts/pages/documentation/home.tsx | 276 ++++++++++++++------- 3 files changed, 203 insertions(+), 91 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index dede6f636..1db9e794a 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -61,7 +61,7 @@ export class DocsContentTopBar extends React.Component +
-
+
-
+
{this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} @@ -51,11 +51,13 @@ export class TutorialButton extends React.Component
-
- +
+
+ +
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index cf2ba0eec..338230358 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,7 +1,14 @@ -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { + colors, + constants, + constants as sharedConstants, + NestedSidebarMenu, + utils as sharedUtils, +} from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); +import { Element as ScrollElement } from 'react-scroll'; import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; @@ -22,6 +29,8 @@ interface Package { } const THROTTLE_TIMEOUT = 100; +const TOP_BAR_HEIGHT = 80; +const SCROLLER_WIDTH = 4; const TUTORIALS: TutorialInfo[] = [ { title: Key.DevelopOnEthereum, @@ -48,8 +57,13 @@ const TUTORIALS: TutorialInfo[] = [ location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; +enum Categories { + ZeroExProtocol = '0x Protocol', + Ethereum = 'Ethereum', + CommunityMaintained = 'Community Maintained', +} const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { - '0x Protocol': [ + [Categories.ZeroExProtocol]: [ { name: '0x.js', description: @@ -103,7 +117,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { shouldOpenInNewTab: true, }, ], - Ethereum: [ + [Categories.Ethereum]: [ { name: 'abi-gen', description: @@ -143,7 +157,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: WebsitePaths.Web3Wrapper, }, ], - 'Community Maintained': [ + [Categories.CommunityMaintained]: [ { name: '0x Event Extractor', description: @@ -267,13 +281,20 @@ export interface HomeProps { dispatcher: Dispatcher; } -export interface HomeState {} +export interface HomeState { + isHoveringSidebar: boolean; + isHoveringMainContent: boolean; +} export class Home extends React.Component { private readonly _throttledScreenWidthUpdate: () => void; constructor(props: HomeProps) { super(props); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this.state = { + isHoveringSidebar: false, + isHoveringMainContent: false, + }; } public componentDidMount(): void { window.addEventListener('resize', this._throttledScreenWidthUpdate); @@ -283,8 +304,33 @@ export class Home extends React.Component { window.removeEventListener('resize', this._throttledScreenWidthUpdate); } public render(): React.ReactNode { + const mainContainerStyle: React.CSSProperties = { + position: 'absolute', + top: 80, + left: 0, + bottom: 0, + right: 0, + overflowX: 'hidden', + overflowY: 'scroll', + minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + WebkitOverflowScrolling: 'touch', + }; const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - const mainContentPadding = isSmallScreen ? 0 : 50; + const mainContentPadding = isSmallScreen ? 20 : 50; + const topLevelMenu = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => + this.props.translate.get(tutorialInfo.title as Key, Deco.Cap), + ), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.name), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.name), + [Categories.CommunityMaintained]: _.map( + CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], + pkg => pkg.name, + ), + }; + _.each(TUTORIALS, tutorialInfo => { + const id = sharedUtils.getIdFromName(this.props.translate.get(tutorialInfo.title as Key, Deco.Cap)); + }); return ( { } 50%, ${colors.white} 100%)`} > -
+
- + +
+ +
- -
- {this._renderSectionTitle('Start building on 0x')} - - {this._renderSectionDescription( - 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', - )} - - {_.map(TUTORIALS, tutorialInfo => ( - - ))} + + + +
+
+ {this._renderSectionTitle('Start building on 0x')} + + {this._renderSectionDescription( + 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + )} + + {_.map(TUTORIALS, tutorialInfo => ( + + + + ))} + - -
-
- {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} - - {this._renderSectionDescription( - 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', +
+
+ {this._renderSectionTitle( + this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} - - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), + + {this._renderSectionDescription( + 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + - +
@@ -357,56 +444,59 @@ export class Home extends React.Component { ); } private _renderPackage(pkg: Package): React.ReactNode { + const id = sharedUtils.getIdFromName(pkg.name); return ( -
-
-
-
- - - {pkg.name} + +
+
+
+
+ + + {pkg.name} + + +
+
+ + {pkg.description} - -
-
- - {pkg.description} - -
-
- -
-
{this.props.translate.get(Key.More, Deco.Cap)}
- - - -
- +
+
+ +
+
{this.props.translate.get(Key.More, Deco.Cap)}
+ + + +
+ +
-
+ ); } private _renderSectionTitle(text: string): React.ReactNode { @@ -427,4 +517,24 @@ export class Home extends React.Component { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } + private _onSidebarHover(_event: React.FormEvent): void { + this.setState({ + isHoveringSidebar: true, + }); + } + private _onSidebarHoverOff(): void { + this.setState({ + isHoveringSidebar: false, + }); + } + private _onMainContentHover(_event: React.FormEvent): void { + this.setState({ + isHoveringMainContent: true, + }); + } + private _onMainContentHoverOff(): void { + this.setState({ + isHoveringMainContent: false, + }); + } } -- cgit v1.2.3 From 54f535b37547fe02e5c832fff9c9e82458d76649 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 15:16:17 +0100 Subject: Add back ability to listen for menu click events from the sidebar --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 3c61fb0b1..14b233cd6 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -101,7 +101,11 @@ export class NestedSidebarMenu extends React.Component - + {entityName} @@ -155,4 +160,9 @@ export class NestedSidebarMenu extends React.Component ); } + private _onMenuItemClick(): void { + if (!_.isUndefined(this.props.onMenuItemClick)) { + this.props.onMenuItemClick(); + } + } } -- cgit v1.2.3 From 4d23cf85b9834422c1c59d8952cd95fdda888a9f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 15:17:28 +0100 Subject: Add mobile menu to overview page --- .../documentation/docs_content_top_bar.tsx | 20 ++++++++++++++++++-- packages/website/ts/pages/documentation/home.tsx | 6 +++++- 2 files changed, 23 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 1db9e794a..9b86c7296 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,4 +1,11 @@ -import { colors } from '@0xproject/react-shared'; +import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; +import { + colors, + constants as sharedConstants, + MenuSubsectionsBySection, + NestedSidebarMenu, + Styles, +} from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; @@ -12,6 +19,7 @@ import { Translate } from 'ts/utils/translate'; export interface DocsContentTopBarProps { location: Location; translate: Translate; + menu?: DocsMenu; } interface DocsContentTopBarState { @@ -143,7 +151,15 @@ export class DocsContentTopBar extends React.Component -
TODO
+
+ +
); } diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 338230358..009048838 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -374,7 +374,11 @@ export class Home extends React.Component { backgroundColor={colors.white} > - +
Date: Fri, 28 Sep 2018 15:28:29 +0100 Subject: Fix minor scrolling issue --- packages/website/ts/pages/documentation/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 009048838..5c537aaa7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -333,7 +333,7 @@ export class Home extends React.Component { }); return ( Date: Fri, 28 Sep 2018 15:48:16 +0100 Subject: Convert package descriptions to markdown and linkify them --- packages/website/ts/pages/documentation/home.tsx | 27 ++++++++++++++---------- 1 file changed, 16 insertions(+), 11 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 5c537aaa7..d257534f9 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -2,12 +2,14 @@ import { colors, constants, constants as sharedConstants, + MarkdownLinkBlock, NestedSidebarMenu, utils as sharedUtils, } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); +import * as ReactMarkdown from 'react-markdown'; import { Element as ScrollElement } from 'react-scroll'; import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; @@ -67,7 +69,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x.js', description: - 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as `order-utils` and `contract-wrappers`.', + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', to: WebsitePaths.ZeroExJs, }, { @@ -81,13 +83,13 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/connect', description: - 'An http & websocket client for interacting with relayers that have implemented the Standard Relayer API', + 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', to: WebsitePaths.Connect, }, { name: '@0xproject/contract-wrappers', description: - 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in the contracts.', + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', to: WebsitePaths.ContractWrappers, }, { @@ -135,7 +137,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/sol-compiler', description: - 'A wrapper around `solc-js` that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', to: WebsitePaths.SolCompiler, }, { @@ -147,7 +149,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/subproviders', description: - 'A collection of subproviders to use with `web3-provider-engine` (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', to: WebsitePaths.Subproviders, }, { @@ -161,7 +163,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x Event Extractor', description: - 'NodeJS worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', to: 'https://github.com/0xTracker/0x-event-extractor', shouldOpenInNewTab: true, isExternal: true, @@ -169,7 +171,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x Tracker Worker', description: - 'NodeJS worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', to: 'https://github.com/0xTracker/0x-tracker-worker', shouldOpenInNewTab: true, isExternal: true, @@ -474,10 +476,13 @@ export class Home extends React.Component {
-
- - {pkg.description} - +
+
Date: Fri, 28 Sep 2018 18:44:34 +0100 Subject: Rename website `yarn watch_without_deps` to `yarn dev` --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/package.json b/packages/website/package.json index 6adbbede0..12dc701e4 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -10,7 +10,7 @@ "build": "NODE_ENV=production node --max_old_space_size=8192 ../../node_modules/.bin/webpack", "clean": "shx rm -f public/bundle*", "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", - "watch_without_deps": "webpack-dev-server --content-base public --https", + "dev": "webpack-dev-server --content-base public --https", "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_live": "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js" -- cgit v1.2.3 From 7fdde15a5d6a0a1a8b6cd7c5e702de7ddb1426f2 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 13:28:33 +0100 Subject: Revert command name --- packages/website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/package.json b/packages/website/package.json index d139d7d4a..ab8835248 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -10,7 +10,7 @@ "build": "NODE_ENV=production node --max_old_space_size=8192 ../../node_modules/.bin/webpack", "clean": "shx rm -f public/bundle*", "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", - "dev": "webpack-dev-server --content-base public --https", + "watch_without_deps": "webpack-dev-server --content-base public --https", "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_live": "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js" -- cgit v1.2.3 From 3d1c2cb29619bd503131204beca8e7a59d3130a6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 13:49:43 +0100 Subject: Fix incorrect merge errors --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- packages/website/ts/types.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 7d310df72..88522b665 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -6,7 +6,7 @@ import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; -import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 31a33bb76..ece036858 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -472,7 +472,6 @@ export enum Key { LiveChat = 'LIVE_CHAT', LibrariesAndTools = 'LIBRARIES_AND_TOOLS', More = 'MORE', - OurMissionAndValues = 'OUR_MISSION_AND_VALUES', } export enum SmartContractDocSections { -- cgit v1.2.3 From 733bb28c1c7349dca535169b8113c4984ed41117 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 14:45:28 +0100 Subject: Fix bug where main content scrollbar wasn't showing up after navigating back in browser history via keyboard shortcut --- packages/website/ts/pages/documentation/home.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index d257534f9..568564873 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -395,6 +395,7 @@ export class Home extends React.Component { overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden', }} onMouseEnter={this._onMainContentHover.bind(this)} + onMouseOver={this._onMainContentHover.bind(this)} onMouseLeave={this._onMainContentHoverOff.bind(this)} >
@@ -537,9 +538,11 @@ export class Home extends React.Component { }); } private _onMainContentHover(_event: React.FormEvent): void { - this.setState({ - isHoveringMainContent: true, - }); + if (!this.state.isHoveringMainContent) { + this.setState({ + isHoveringMainContent: true, + }); + } } private _onMainContentHoverOff(): void { this.setState({ -- cgit v1.2.3 From 011cadc1ff2f7989fc866c149171ed2c592ace3c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 16:21:51 +0100 Subject: Disable max file size tslint rule for types file --- packages/ethereum-types/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/ethereum-types/src/index.ts b/packages/ethereum-types/src/index.ts index 916661638..2f3140a58 100644 --- a/packages/ethereum-types/src/index.ts +++ b/packages/ethereum-types/src/index.ts @@ -497,4 +497,4 @@ export interface CompilerOptions { compilerSettings?: CompilerSettings; contracts?: string[] | '*'; solcVersion?: string; -} +} // tslint:disable:max-file-line-count -- cgit v1.2.3 From 0febb085c5dbac3d125aab917ee2ba454869ff58 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 16:29:29 +0100 Subject: Fix linter --- .../ts/components/documentation/docs_content_top_bar.tsx | 10 ++-------- packages/website/ts/pages/documentation/home.tsx | 6 +----- 2 files changed, 3 insertions(+), 13 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 9b86c7296..74c9022fe 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,11 +1,5 @@ -import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; -import { - colors, - constants as sharedConstants, - MenuSubsectionsBySection, - NestedSidebarMenu, - Styles, -} from '@0xproject/react-shared'; +import { DocsMenu } from '@0xproject/react-docs'; +import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 568564873..b7fa8462b 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,6 +1,5 @@ import { colors, - constants, constants as sharedConstants, MarkdownLinkBlock, NestedSidebarMenu, @@ -330,9 +329,6 @@ export class Home extends React.Component { pkg => pkg.name, ), }; - _.each(TUTORIALS, tutorialInfo => { - const id = sharedUtils.getIdFromName(this.props.translate.get(tutorialInfo.title as Key, Deco.Cap)); - }); return ( { isHoveringMainContent: false, }); } -} +} // tslint:disable:max-file-line-count -- cgit v1.2.3 From 6a33c4685ea64e2e96d7d91429f7e0d687b576bd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:02:57 +0100 Subject: Further shorten description --- packages/website/translations/chinese.json | 4 ++-- packages/website/translations/english.json | 2 +- packages/website/translations/korean.json | 2 +- packages/website/translations/russian.json | 2 +- packages/website/translations/spanish.json | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) (limited to 'packages') diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 5390b5484..3ca98cee1 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -84,9 +84,9 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", - "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", + "USE_SHARED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", "SANDBOX": "0x.js sandbox", "GITHUB": "github", diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 5d999e2d7..eee79356e 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -87,7 +87,7 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 87bad68af..fabb2f80d 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -84,7 +84,7 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 8e352c234..b703cdafb 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -84,7 +84,7 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 10123b88c..c80f69622 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -85,7 +85,7 @@ "DEVELOP_ON_ETHEREUM": "develop on Ethereum", "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", "ORDER_BASICS": "0x order basics", - "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order over 0x protocol", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", "USE_SHARED_LIQUIDITY": "use shared liquidity", "USE_SHARED_LIQUIDITY_DESCRIPTION": "Learn how to tap into shared liquidity using the Standard Relayer API", "VIEW_ALL_DOCUMENTATION": "view all documentation", -- cgit v1.2.3 From 8daf2df6e6739239b3f00032f784a7136819dd82 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:03:23 +0100 Subject: Prefer basscss over style --- packages/website/ts/components/documentation/tutorial_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 22480888e..e0839bbf2 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -26,7 +26,7 @@ export class TutorialButton extends React.Component -- cgit v1.2.3 From 42f68428446dfaa5c336c94f94e6c92325e470da Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:04:06 +0100 Subject: Fix bug where button wouldn't be highlighted after hitting browser back button despite the cursor resting above it --- packages/website/ts/components/documentation/tutorial_button.tsx | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index e0839bbf2..aee094b86 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -28,6 +28,7 @@ export class TutorialButton extends React.Component
): void { + if (this.state.isHovering) { + return; + } this.setState({ isHovering: true, }); -- cgit v1.2.3 From 136ef3827700005b50df0e99b2ee67923d80c206 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:04:21 +0100 Subject: Move colors to colors.ts file --- packages/react-shared/src/utils/colors.ts | 4 +++- packages/website/ts/components/documentation/tutorial_button.tsx | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 778a5bc20..596c17e83 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -9,7 +9,8 @@ const baseColors = { grey300: '#E0E0E0', beigeWhite: '#E4E4E4', lightBgGrey: '#EDEDED', - grey350: '#cacaca', + grey325: '#dfdfdf', + grey350: '#CACACA', grey400: '#BDBDBD', lightGrey: '#BBBBBB', grey500: '#9E9E9E', @@ -24,6 +25,7 @@ const baseColors = { heroGrey: '#404040', projectsGrey: '#343333', darkestGrey: '#272727', + lightestBlue: '#E7F1FD', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', lightLinkBlue: '#3289F1', diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index aee094b86..b4056753c 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -35,10 +35,10 @@ export class TutorialButton extends React.Component
@@ -48,7 +48,7 @@ export class TutorialButton extends React.Component {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} - + {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)}
-- cgit v1.2.3 From 67a2359014d933561425258ae774f7005ef52b15 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:07:03 +0100 Subject: Add comment about link component --- packages/website/ts/components/ui/link.tsx | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'packages') diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index 252199457..f7bca370b 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -9,6 +9,11 @@ export interface LinkProps { className?: string; } +/** + * A generic link component which let's the developer render internal & external links, and their associated + * behaviors with a single link component. Many times we want a menu including both internal & external links + * and this abstracts away the differences of rendering both types of links. + */ export const Link: React.StatelessComponent = ({ style, className, -- cgit v1.2.3 From 457ed57d70c1b34b243a151f16fd3d41bfa12bb3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:08:59 +0100 Subject: Move constants before configs and add TODO comment --- packages/website/ts/pages/documentation/home.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index b7fa8462b..e202ff1bc 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -21,14 +21,6 @@ import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -interface Package { - name: string; - description: string; - to: string; - isExternal?: boolean; - shouldOpenInNewTab?: boolean; -} - const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; const SCROLLER_WIDTH = 4; @@ -63,6 +55,7 @@ enum Categories { Ethereum = 'Ethereum', CommunityMaintained = 'Community Maintained', } +// TODO(fabio): Move this to it's own file const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { [Categories.ZeroExProtocol]: [ { @@ -275,6 +268,14 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { ], }; +interface Package { + name: string; + description: string; + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; +} + export interface HomeProps { location: Location; translate: Translate; -- cgit v1.2.3 From 0d57ed6c933a8332253cf673a521dddcae601872 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:25:45 +0100 Subject: Rename for clarity --- packages/website/ts/pages/documentation/home.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index e202ff1bc..ee118ab1e 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -306,7 +306,7 @@ export class Home extends React.Component { window.removeEventListener('resize', this._throttledScreenWidthUpdate); } public render(): React.ReactNode { - const mainContainerStyle: React.CSSProperties = { + const scrollableContainerStyles: React.CSSProperties = { position: 'absolute', top: 80, left: 0, @@ -351,7 +351,7 @@ export class Home extends React.Component {
{ id={sharedConstants.SCROLL_CONTAINER_ID} className="absolute" style={{ - ...mainContainerStyle, + ...scrollableContainerStyles, paddingTop: 30, paddingLeft: mainContentPadding, paddingRight: this.state.isHoveringMainContent -- cgit v1.2.3 From 3a9791e7943c5572d24b257217bfe1558beff5fc Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:26:06 +0100 Subject: Make menuSubsectionsBySection optional --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 8 ++++++-- .../website/ts/components/documentation/docs_content_top_bar.tsx | 1 - packages/website/ts/pages/documentation/home.tsx | 1 - 3 files changed, 6 insertions(+), 4 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 14b233cd6..9933f3b38 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,7 @@ import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection: MenuSubsectionsBySection; + menuSubsectionsBySection?: MenuSubsectionsBySection; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,6 +44,7 @@ export class NestedSidebarMenu extends React.Component { @@ -122,7 +123,10 @@ export class NestedSidebarMenu extends React.Component { > -- cgit v1.2.3 From c42b340042b8ff5ca9537e5e162776e513e63f2a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:07:53 +0100 Subject: Move more copy to translation files --- packages/website/translations/chinese.json | 7 ++++++- packages/website/translations/english.json | 7 ++++++- packages/website/translations/korean.json | 7 ++++++- packages/website/translations/russian.json | 7 ++++++- packages/website/translations/spanish.json | 7 ++++++- packages/website/ts/pages/documentation/home.tsx | 6 +++--- packages/website/ts/types.ts | 3 +++ 7 files changed, 36 insertions(+), 8 deletions(-) (limited to 'packages') diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 3ca98cee1..2d3ad6974 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -92,5 +92,10 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", - "MORE": "more" + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index eee79356e..6ee780c78 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -95,6 +95,8 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", "OUR_MISSION_AND_VALUES": "our mission & values", "GAMING_AND_COLLECTABLES": "gaming & collectables", @@ -102,5 +104,8 @@ "artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality to give access and the ability to build marketplaces for NFT trading.", "ORDER_BOOKS": "order books", "ORDER_BOOKS_DESCRIPTION": - "there are thousands of decentralized apps that have native utility tokens. 0x provides market makers and professional exchanges an ability to host order books to facilitate the exchange of these assets." + "there are thousands of decentralized apps that have native utility tokens. 0x provides market makers and professional exchanges an ability to host order books to facilitate the exchange of these assets.", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index fabb2f80d..8470bf9a0 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -92,5 +92,10 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", - "MORE": "more" + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index b703cdafb..b2bc151ab 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -92,5 +92,10 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", - "MORE": "more" + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index c80f69622..fefb92447 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -93,5 +93,10 @@ "GITHUB": "github", "LIVE_CHAT": "live chat", "LIBRARIES_AND_TOOLS": "Libraries & Tools", - "MORE": "more" + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 9356c504b..7f833cc1f 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -395,10 +395,10 @@ export class Home extends React.Component { onMouseLeave={this._onMainContentHoverOff.bind(this)} >
- {this._renderSectionTitle('Start building on 0x')} + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} {this._renderSectionDescription( - 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap), )} {_.map(TUTORIALS, tutorialInfo => ( @@ -423,7 +423,7 @@ export class Home extends React.Component { )} {this._renderSectionDescription( - 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), )} {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index ece036858..f93d998b6 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -471,7 +471,10 @@ export enum Key { Github = 'GITHUB', LiveChat = 'LIVE_CHAT', LibrariesAndTools = 'LIBRARIES_AND_TOOLS', + LibrariesAndToolsDescription = 'LIBRARIES_AND_TOOLS_DESCRIPTION', More = 'MORE', + StartBuildOn0x = 'START_BUILDING_ON_0X', + StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION', } export enum SmartContractDocSections { -- cgit v1.2.3 From d435341f9b2577008fd6746c198305374a1b7994 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:11:50 +0100 Subject: Use container instead of div --- packages/website/ts/pages/documentation/home.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7f833cc1f..a2405a9d2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -451,14 +451,7 @@ export class Home extends React.Component { return (
-
+
Date: Tue, 2 Oct 2018 09:15:33 +0100 Subject: Use colors module --- packages/website/ts/pages/documentation/home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a2405a9d2..311470d2c 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -500,14 +500,14 @@ export class Home extends React.Component { } private _renderSectionTitle(text: string): React.ReactNode { return ( - + {text} ); } private _renderSectionDescription(text: string): React.ReactNode { return ( - + {text} ); -- cgit v1.2.3 From b79e3eaec62e073d86fdd5b83e7516da81046951 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:15:41 +0100 Subject: Simplify helper methods --- packages/website/ts/pages/documentation/home.tsx | 36 +++++++++--------------- 1 file changed, 13 insertions(+), 23 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 311470d2c..57de52de2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -355,8 +355,8 @@ export class Home extends React.Component { paddingTop: 35, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} + onMouseEnter={this._onSidebarHover.bind(this, true)} + onMouseLeave={this._onSidebarHover.bind(this, false)} > { : mainContentPadding, overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden', }} - onMouseEnter={this._onMainContentHover.bind(this)} - onMouseOver={this._onMainContentHover.bind(this)} - onMouseLeave={this._onMainContentHoverOff.bind(this)} + onMouseEnter={this._onMainContentHover.bind(this, true)} + onMouseOver={this._onMainContentHover.bind(this, true)} + onMouseLeave={this._onMainContentHover.bind(this, false)} >
{this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} @@ -512,30 +512,20 @@ export class Home extends React.Component { ); } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - this.props.dispatcher.updateScreenWidth(newScreenWidth); - } - private _onSidebarHover(_event: React.FormEvent): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { + private _onSidebarHover(_event: React.FormEvent, isHovering: boolean): void { this.setState({ - isHoveringSidebar: false, + isHoveringSidebar: isHovering, }); } - private _onMainContentHover(_event: React.FormEvent): void { - if (!this.state.isHoveringMainContent) { + private _onMainContentHover(_event: React.FormEvent, isHovering: boolean): void { + if (isHovering !== this.state.isHoveringMainContent) { this.setState({ - isHoveringMainContent: true, + isHoveringMainContent: isHovering, }); } } - private _onMainContentHoverOff(): void { - this.setState({ - isHoveringMainContent: false, - }); + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); } } // tslint:disable:max-file-line-count -- cgit v1.2.3 From 91afc37d2a9fd15dc34d3c0911fb19ec7dd3493b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 10:30:44 +0100 Subject: Fix hovering --- packages/website/ts/pages/documentation/home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 57de52de2..6bb30b368 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -512,12 +512,12 @@ export class Home extends React.Component { ); } - private _onSidebarHover(_event: React.FormEvent, isHovering: boolean): void { + private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { this.setState({ isHoveringSidebar: isHovering, }); } - private _onMainContentHover(_event: React.FormEvent, isHovering: boolean): void { + private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { if (isHovering !== this.state.isHoveringMainContent) { this.setState({ isHoveringMainContent: isHovering, -- cgit v1.2.3 From 0c996803969e7ff3f62c023651f64468b3f76bd3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 10:51:41 +0100 Subject: Improve mobile padding --- packages/website/ts/components/documentation/tutorial_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index b4056753c..094bc3d92 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -44,7 +44,7 @@ export class TutorialButton extends React.Component
-
+
{this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} -- cgit v1.2.3 From c07412a992284b2f3045be1c620ea2e0a351139a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 20:10:59 +0100 Subject: Use new Link UI component everywhere, and add complementary ALink type --- .../documentation/docs_content_top_bar.tsx | 11 +- .../ts/components/documentation/docs_logo.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 5 +- .../components/dropdowns/developers_drop_down.tsx | 98 +++--- packages/website/ts/components/fill_order.tsx | 2 +- packages/website/ts/components/footer.tsx | 95 +++--- .../ts/components/inputs/token_amount_input.tsx | 4 +- .../website/ts/components/portal/back_button.tsx | 4 +- .../website/ts/components/portal/drawer_menu.tsx | 2 +- packages/website/ts/components/portal/menu.tsx | 6 +- packages/website/ts/components/portal/portal.tsx | 9 +- packages/website/ts/components/top_bar/top_bar.tsx | 46 ++- .../ts/components/top_bar/top_bar_menu_item.tsx | 22 +- .../website/ts/components/ui/custom_menu_item.tsx | 51 +++ packages/website/ts/components/ui/link.tsx | 43 ++- packages/website/ts/components/ui/menu_item.tsx | 51 --- packages/website/ts/components/ui/simple_menu.tsx | 4 +- packages/website/ts/pages/about/about.tsx | 4 +- packages/website/ts/pages/documentation/home.tsx | 373 +++++++++++++-------- packages/website/ts/pages/landing/landing.tsx | 11 +- packages/website/ts/types.ts | 16 +- 21 files changed, 468 insertions(+), 391 deletions(-) create mode 100644 packages/website/ts/components/ui/custom_menu_item.tsx delete mode 100644 packages/website/ts/components/ui/menu_item.tsx (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index b5f51e1aa..7edb51587 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,19 +1,19 @@ -import { DocsMenu } from '@0xproject/react-docs'; import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; import { Link } from 'ts/components/ui/link'; -import { Deco, Key, WebsitePaths } from 'ts/types'; +import { ALink, 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; - menu?: DocsMenu; + sectionNameToLinks?: ObjectMap; } interface DocsContentTopBarState { @@ -146,12 +146,13 @@ export class DocsContentTopBar extends React.Component
- + /> */}
); diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 570a81bca..9bd742749 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -10,7 +10,7 @@ export interface DocsLogoProps { export const DocsLogo: React.StatelessComponent = props => { return (
- +
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 094bc3d92..7ed9c6e4e 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -25,8 +25,7 @@ export class TutorialButton extends React.Component
- {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)} + {this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)} {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 88522b665..675357f41 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,61 +1,68 @@ import { colors } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; -import { Deco, Key, WebsitePaths } from 'ts/types'; +import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -interface LinkInfo { - link: string; - shouldOpenInNewTab?: boolean; -} - -const gettingStartedKeyToLinkInfo1: ObjectMap = { - [Key.BuildARelayer]: { - link: `${WebsitePaths.Wiki}#Build-A-Relayer`, +const gettingStartedKeyToLinkInfo1: ALink[] = [ + { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, }, - [Key.OrderBasics]: { - link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, }, -}; -const gettingStartedKeyToLinkInfo2: ObjectMap = { - [Key.DevelopOnEthereum]: { - link: `${WebsitePaths.Wiki}#Ethereum-Development`, +]; +const gettingStartedKeyToLinkInfo2: ALink[] = [ + { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, }, - [Key.UseSharedLiquidity]: { - link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + { + title: Key.UseSharedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, -}; -const popularDocsToLinkInfos: ObjectMap = { - [Key.ZeroExJs]: { - link: WebsitePaths.ZeroExJs, +]; +const popularDocsToLinkInfos: ALink[] = [ + { + title: Key.ZeroExJs, + to: WebsitePaths.ZeroExJs, }, - [Key.Connect]: { - link: WebsitePaths.Connect, + { + title: Key.Connect, + to: WebsitePaths.Connect, }, - [Key.SmartContract]: { - link: WebsitePaths.SmartContracts, + { + title: Key.SmartContract, + to: WebsitePaths.SmartContracts, }, -}; -const usefulLinksToLinkInfo: ObjectMap = { - [Key.Github]: { - link: constants.URL_GITHUB_ORG, +]; +const usefulLinksToLinkInfo: ALink[] = [ + { + title: Key.Github, + to: constants.URL_GITHUB_ORG, + type: LinkType.External, shouldOpenInNewTab: true, }, - [Key.Whitepaper]: { - link: WebsitePaths.Whitepaper, + { + title: Key.Whitepaper, + to: WebsitePaths.Whitepaper, + type: LinkType.External, shouldOpenInNewTab: true, }, - [Key.Sandbox]: { - link: constants.URL_SANDBOX, + { + title: Key.Sandbox, + to: constants.URL_SANDBOX, + type: LinkType.External, shouldOpenInNewTab: true, }, -}; +]; interface DevelopersDropDownProps { translate: Translate; @@ -123,7 +130,6 @@ export class DevelopersDropDown extends React.Component ); } - private _renderLinkSection(keyToLinkInfo: ObjectMap): React.ReactNode { + private _renderLinkSection(links: ALink[]): React.ReactNode { const linkStyle: React.CSSProperties = { color: colors.lightBlueA700, fontFamily: 'Roboto, Roboto Mono', }; - const numLinks = _.size(keyToLinkInfo); + const numLinks = links.length; let i = 0; - const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => { + const renderLinks = _.map(links, (link: ALink) => { i++; const isLast = i === numLinks; - const linkText = this.props.translate.get(key as Key, Deco.Cap); + const linkText = this.props.translate.get(link.title as Key, Deco.Cap); return ( -
- +
+ {linkText}
); }); - return
{links}
; + return
{renderLinks}
; } } diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 3c3155349..ec1d698f3 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -8,7 +8,6 @@ import { Card, CardHeader, CardText } from 'material-ui/Card'; import Divider from 'material-ui/Divider'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog'; import { FillOrderJSON } from 'ts/components/fill_order_json'; @@ -17,6 +16,7 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; import { Alert } from 'ts/components/ui/alert'; import { EthereumAddress } from 'ts/components/ui/ethereum_address'; import { Identicon } from 'ts/components/ui/identicon'; +import { Link } from 'ts/components/ui/link'; import { VisualOrder } from 'ts/components/visual_order'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 6dcb5a0e9..bec3c17f7 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,24 +1,16 @@ import { colors } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; + import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, Language, WebsitePaths } from 'ts/types'; +import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -interface MenuItemsBySection { - [sectionName: string]: FooterMenuItem[]; -} - -interface FooterMenuItem { - title: string; - path?: string; - isExternal?: boolean; -} - const ICON_DIMENSION = 16; const linkStyle = { @@ -51,76 +43,74 @@ export class Footer extends React.Component { }; } public render(): React.ReactNode { - const menuItemsBySection: MenuItemsBySection = { + const sectionNameToLinks: ObjectMap = { [Key.Documentation]: [ { title: '0x.js', - path: WebsitePaths.ZeroExJs, + to: WebsitePaths.ZeroExJs, }, { title: this.props.translate.get(Key.SmartContracts, Deco.Cap), - path: WebsitePaths.SmartContracts, + to: WebsitePaths.SmartContracts, }, { title: this.props.translate.get(Key.Connect, Deco.Cap), - path: WebsitePaths.Connect, + to: WebsitePaths.Connect, }, { title: this.props.translate.get(Key.Whitepaper, Deco.Cap), - path: WebsitePaths.Whitepaper, - isExternal: true, + to: WebsitePaths.Whitepaper, + type: LinkType.External, }, { title: this.props.translate.get(Key.Wiki, Deco.Cap), - path: WebsitePaths.Wiki, + to: WebsitePaths.Wiki, }, { title: this.props.translate.get(Key.Faq, Deco.Cap), - path: WebsitePaths.FAQ, + to: WebsitePaths.FAQ, }, ], [Key.Community]: [ { title: this.props.translate.get(Key.RocketChat, Deco.Cap), - isExternal: true, - path: constants.URL_ZEROEX_CHAT, + type: LinkType.External, + to: constants.URL_ZEROEX_CHAT, }, { title: this.props.translate.get(Key.Blog, Deco.Cap), - isExternal: true, - path: constants.URL_BLOG, + type: LinkType.External, + to: constants.URL_BLOG, }, { title: 'Twitter', - isExternal: true, - path: constants.URL_TWITTER, + type: LinkType.External, + to: constants.URL_TWITTER, }, { title: 'Reddit', - isExternal: true, - path: constants.URL_REDDIT, + type: LinkType.External, + to: constants.URL_REDDIT, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), - isExternal: true, - path: constants.URL_DISCOURSE_FORUM, + type: LinkType.External, + to: constants.URL_DISCOURSE_FORUM, }, ], [Key.Organization]: [ { title: this.props.translate.get(Key.About, Deco.Cap), - isExternal: false, - path: WebsitePaths.About, + to: WebsitePaths.About, }, { title: this.props.translate.get(Key.Careers, Deco.Cap), - isExternal: false, - path: WebsitePaths.Careers, + to: WebsitePaths.Careers, }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - isExternal: true, - path: 'mailto:team@0xproject.com', + type: LinkType.External, + to: 'mailto:team@0xproject.com', }, ], }; @@ -160,19 +150,19 @@ export class Footer extends React.Component {
{this._renderHeader(Key.Documentation)} - {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
{this._renderHeader(Key.Community)} - {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
{this._renderHeader(Key.Organization)} - {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
@@ -187,7 +177,7 @@ export class Footer extends React.Component {
); } - private _renderMenuItem(item: FooterMenuItem): React.ReactNode { + private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', @@ -195,30 +185,21 @@ export class Footer extends React.Component { Reddit: 'reddit.png', [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png', }; - const iconIfExists = titleToIcon[item.title]; + const iconIfExists = titleToIcon[link.title]; return ( -
- {item.isExternal ? ( - +
+ +
{!_.isUndefined(iconIfExists) ? (
{this._renderIcon(iconIfExists)}
-
{item.title}
+
{link.title}
) : ( - item.title + link.title )} - - ) : ( - -
- {!_.isUndefined(iconIfExists) && ( -
{this._renderIcon(iconIfExists)}
- )} - {item.title} -
- - )} +
+
); } diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index db093fb68..adf96f9ee 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -3,9 +3,9 @@ import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; +import { Link } from 'ts/components/ui/link'; import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; interface TokenAmountInputProps { @@ -112,7 +112,7 @@ export class TokenAmountInput extends React.Component Set allowance diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index ca35abc2b..bdbcef343 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,6 +1,6 @@ import { Styles } from '@0xproject/react-shared'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; @@ -27,7 +27,7 @@ const styles: Styles = { export const BackButton = (props: BackButtonProps) => { return (
- +
diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index a6707e86c..3a8c69a70 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -39,7 +39,7 @@ export interface DrawerMenuProps { } export const DrawerMenu = (props: DrawerMenuProps) => { const relayerItemEntry = { - to: `${WebsitePaths.Portal}`, + to: WebsitePaths.Portal, labelText: 'Relayer ecosystem', iconName: 'zmdi-portable-wifi', }; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 39dab77f5..a3352529c 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -1,7 +1,7 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { MenuItem } from 'ts/components/ui/menu_item'; +import { CustomMenuItem } from 'ts/components/ui/custom_menu_item'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; @@ -67,14 +67,14 @@ export const Menu: React.StatelessComponent = (props: MenuProps) => { {_.map(props.menuItemEntries, entry => { const isSelected = entry.to === props.selectedPath; return ( - + - + ); })}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index b42954f60..a9ccf9e11 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -3,7 +3,8 @@ import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -317,7 +318,7 @@ export class Portal extends React.Component { }; return (
} + header={} body={} /> ); @@ -389,9 +390,7 @@ export class Portal extends React.Component { ); return !shouldStartOnboarding ? ( - - {startOnboarding} - + {startOnboarding} ) : ( startOnboarding ); diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index c2d753e31..3da2307e0 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -10,15 +10,15 @@ import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down'; import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; +import { Link } from 'ts/components/ui/link'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; +import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -151,7 +151,7 @@ export class TopBar extends React.Component { paddingLeft={this.props.paddingLeft} paddingRight={this.props.paddingRight} > - +
@@ -165,40 +165,36 @@ export class TopBar extends React.Component { />
@@ -260,20 +256,16 @@ export class TopBar extends React.Component {
{this.props.translate.get(Key.Website, Deco.Cap)}
- + {this.props.translate.get(Key.Home, Deco.Cap)} - + {this.props.translate.get(Key.Wiki, Deco.Cap)} {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => { if (!this._doesUrlInclude(websitePath)) { return ( - + {this.props.translate.get(key, Deco.Cap)}{' '} {this.props.translate.get(Key.Docs, Deco.Cap)} @@ -284,25 +276,25 @@ export class TopBar extends React.Component { return null; })} {!this._isViewingPortal() && ( - + {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} )} - + {this.props.translate.get(Key.Whitepaper, Deco.Cap)} - - + + {this.props.translate.get(Key.About, Deco.Cap)} - + {this.props.translate.get(Key.Careers, Deco.Cap)} - + {this.props.translate.get(Key.Blog, Deco.Cap)} - - + + {this.props.translate.get(Key.Faq, Deco.Cap)} diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index 25fab2868..89fd9e8a8 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -1,7 +1,8 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; +import { LinkType } from 'ts/types'; import { CallToAction } from 'ts/components/ui/button'; @@ -13,7 +14,7 @@ interface TopBarMenuItemProps { title: string; path?: string; isPrimary?: boolean; - isExternal: boolean; + linkType: LinkType; style?: React.CSSProperties; className?: string; isNightVersion?: boolean; @@ -38,20 +39,9 @@ export class TopBarMenuItem extends React.Component - {this.props.isExternal ? ( - - {itemContent} - - ) : ( - - {itemContent} - - )} + + {itemContent} +
); } diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx new file mode 100644 index 000000000..c51095709 --- /dev/null +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -0,0 +1,51 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link } from 'ts/components/ui/link'; + +interface CustomMenuItemProps { + to: string; + style?: React.CSSProperties; + onClick?: () => void; + className?: string; +} + +interface CustomMenuItemState { + isHovering: boolean; +} + +export class CustomMenuItem extends React.Component { + public static defaultProps: Partial = { + onClick: _.noop.bind(_), + className: '', + }; + public constructor(props: CustomMenuItemProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + const menuItemStyles = { + cursor: 'pointer', + opacity: this.state.isHovering ? 0.5 : 1, + }; + return ( + +
+ {this.props.children} +
+ + ); + } + private _onToggleHover(isHovering: boolean): void { + this.setState({ + isHovering, + }); + } +} diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index f7bca370b..ae62aad0c 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { Link as ReactRounterLink } from 'react-router-dom'; +import { LinkType } from 'ts/types'; export interface LinkProps { to: string; - isExternal?: boolean; + type?: LinkType; shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; @@ -17,29 +18,39 @@ export interface LinkProps { export const Link: React.StatelessComponent = ({ style, className, - isExternal, + type, to, shouldOpenInNewTab, children, }) => { - if (isExternal) { - return ( - - {children} - - ); - } else { - return ( - - {children} - - ); + const styleWithDefault = { + textDecoration: 'none', + ...style, + }; + + switch (type) { + case LinkType.External: + return ( + + {children} + + ); + case LinkType.ReactRoute: + return ( + + {children} + + ); + case LinkType.ReactScroll: + return
TODO
; + default: + throw new Error(`Unrecognized LinkType: ${type}`); } }; Link.defaultProps = { - isExternal: false, - shouldOpenInNewTab: false, + type: LinkType.ReactRoute, + shouldOpenInNewTab: true, style: {}, className: '', }; diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx deleted file mode 100644 index 0cb4b387c..000000000 --- a/packages/website/ts/components/ui/menu_item.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import { Link } from 'react-router-dom'; - -interface MenuItemProps { - to: string; - style?: React.CSSProperties; - onClick?: () => void; - className?: string; -} - -interface MenuItemState { - isHovering: boolean; -} - -export class MenuItem extends React.Component { - public static defaultProps: Partial = { - onClick: _.noop.bind(_), - className: '', - }; - public constructor(props: MenuItemProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render(): React.ReactNode { - const menuItemStyles = { - cursor: 'pointer', - opacity: this.state.isHovering ? 0.5 : 1, - }; - return ( - -
- {this.props.children} -
- - ); - } - private _onToggleHover(isHovering: boolean): void { - this.setState({ - isHovering, - }); - } -} diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 8a9349c6d..767da3675 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; @@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent< GoToAccountManagementSimpleMenuItemProps > = ({ onClick }) => { return ( - + ); diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index e097578bc..ba1b423b9 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -2,9 +2,9 @@ import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Link } from 'ts/components/ui/link'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo, WebsitePaths } from 'ts/types'; @@ -370,7 +370,7 @@ export class About extends React.Component { }} > We are seeking outstanding candidates to{' '} - + join our team . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 6bb30b368..42ed1db8c 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,11 +1,7 @@ -import { - colors, - constants as sharedConstants, - MarkdownLinkBlock, - NestedSidebarMenu, - utils as sharedUtils, -} from '@0xproject/react-shared'; +import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; +import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import * as ReactMarkdown from 'react-markdown'; @@ -17,7 +13,7 @@ import { Container } from 'ts/components/ui/container'; import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -26,28 +22,36 @@ const TOP_BAR_HEIGHT = 80; const SCROLLER_WIDTH = 4; const TUTORIALS: TutorialInfo[] = [ { - title: Key.DevelopOnEthereum, iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', description: Key.DevelopOnEthereumDescription, - location: `${WebsitePaths.Wiki}#Ethereum-Development`, + link: { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, }, { - title: Key.BuildARelayer, iconUrl: '/images/developers/tutorials/build_a_relayer.svg', description: Key.BuildARelayerDescription, - location: `${WebsitePaths.Wiki}#Build-A-Relayer`, + link: { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, }, { - title: Key.OrderBasics, iconUrl: '/images/developers/tutorials/0x_order_basics.svg', description: Key.OrderBasicsDescription, - location: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + link: { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, }, { - title: Key.UseSharedLiquidity, iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', description: Key.UseSharedLiquidityDescription, - location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + link: { + title: Key.UseSharedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, }, ]; enum Categories { @@ -59,221 +63,276 @@ enum Categories { const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { [Categories.ZeroExProtocol]: [ { - name: '0x.js', description: 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', - to: WebsitePaths.ZeroExJs, + link: { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + }, }, { - name: '0x starter project', description: 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', - to: 'https://github.com/0xProject/0x-starter-project', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: '0x starter project', + to: 'https://github.com/0xProject/0x-starter-project', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, { - name: '@0xproject/connect', description: 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', - to: WebsitePaths.Connect, + link: { + title: '@0xproject/connect', + to: WebsitePaths.Connect, + }, }, { - name: '@0xproject/contract-wrappers', description: 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', - to: WebsitePaths.ContractWrappers, + link: { + title: '@0xproject/contract-wrappers', + to: WebsitePaths.ContractWrappers, + }, }, { - name: '@0xproject/json-schemas', description: 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', - to: WebsitePaths.JSONSchemas, + link: { + title: '@0xproject/json-schemas', + to: WebsitePaths.JSONSchemas, + }, }, { - name: '@0xproject/order-utils', description: 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', - to: WebsitePaths.OrderUtils, + link: { + title: '@0xproject/order-utils', + to: WebsitePaths.OrderUtils, + }, }, { - name: '@0xproject/order-watcher', description: "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", - to: WebsitePaths.OrderWatcher, + link: { + title: '@0xproject/order-watcher', + to: WebsitePaths.OrderWatcher, + }, }, { - name: '@0xproject/sra-spec', description: 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: '@0xproject/sra-spec', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, ], [Categories.Ethereum]: [ { - name: 'abi-gen', description: "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: 'abi-gen', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, { - name: 'ethereum-types', description: 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', - to: WebsitePaths.EthereumTypes, + link: { + title: 'ethereum-types', + to: WebsitePaths.EthereumTypes, + }, }, { - name: '@0xproject/sol-compiler', description: 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', - to: WebsitePaths.SolCompiler, + link: { + title: '@0xproject/sol-compiler', + to: WebsitePaths.SolCompiler, + }, }, { - name: '@0xproject/sol-cov', description: 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', - to: WebsitePaths.SolCov, + link: { + title: '@0xproject/sol-cov', + to: WebsitePaths.SolCov, + }, }, { - name: '@0xproject/subproviders', description: 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', - to: WebsitePaths.Subproviders, + link: { + title: '@0xproject/subproviders', + to: WebsitePaths.Subproviders, + }, }, { - name: '@0xproject/web3-wrapper', description: 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', - to: WebsitePaths.Web3Wrapper, + link: { + title: '@0xproject/web3-wrapper', + to: WebsitePaths.Web3Wrapper, + }, }, ], [Categories.CommunityMaintained]: [ { - name: '0x Event Extractor', description: 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', - to: 'https://github.com/0xTracker/0x-event-extractor', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: '0x Event Extractor', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: '0x Tracker Worker', description: 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', - to: 'https://github.com/0xTracker/0x-tracker-worker', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: '0x Tracker Worker', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Aquaduct', description: "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://www.npmjs.com/package/aqueduct', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Aquaduct', + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Aquaduct Server SDK', description: 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', - to: 'https://github.com/ERCdEX/aqueduct-server-sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Aquaduct Server SDK', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'DDEX Node.js SDK', description: 'A node.js SDK for trading on the DDEX relayer', - to: 'https://www.npmjs.com/package/ddex-api', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://www.npmjs.com/package/ddex-api', + title: 'DDEX Node.js SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Widget', description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", - to: 'https://github.com/ERCdEX/widget', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/widget', + title: 'ERCdex Widget', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Java SDK', description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://github.com/ERCdEX/java', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/java', + title: 'ERCdex Java SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Python SDK', description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://github.com/ERCdEX/python', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/python', + title: 'ERCdex Python SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Massive', description: 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', - to: 'https://github.com/NoteGio/massive', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Massive', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'OpenRelay', description: 'An open-source API-only Relayer written in Go', - to: 'https://github.com/NoteGio/openrelay', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/NoteGio/openrelay', + title: 'OpenRelay', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'OpenRelay.js', description: 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', - to: 'https://github.com/NoteGio/openrelay.js', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'OpenRelay.js', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Radar SDK', description: 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', - to: 'https://github.com/RadarRelay/sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Radar SDK', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'The Ocean Javascript SDK', description: 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', - to: 'https://github.com/TheOceanTrade/theoceanx-javascript', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'The Ocean Javascript SDK', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Tokenlon Javascript SDK', description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", - to: 'https://www.npmjs.com/package/tokenlon-sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://www.npmjs.com/package/tokenlon-sdk', + title: 'Tokenlon Javascript SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'AssetData decoder library in Java', description: 'A small library that implements the 0x order assetData encoding/decoding in Java', - to: 'https://github.com/wildnothing/asset-data-decoder', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/wildnothing/asset-data-decoder', + title: 'AssetData decoder library in Java', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, ], }; interface Package { - name: string; description: string; - to: string; - isExternal?: boolean; - shouldOpenInNewTab?: boolean; + link: ALink; } export interface HomeProps { @@ -319,15 +378,18 @@ export class Home extends React.Component { }; const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const mainContentPadding = isSmallScreen ? 20 : 50; - const topLevelMenu = { - 'Starter guides': _.map(TUTORIALS, tutorialInfo => - this.props.translate.get(tutorialInfo.title as Key, Deco.Cap), - ), - [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.name), - [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.name), + const sectionNameToLinks: ObjectMap = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => { + return { + ...tutorialInfo.link, + title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + }; + }), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), [Categories.CommunityMaintained]: _.map( CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], - pkg => pkg.name, + pkg => pkg.link, ), }; return ( @@ -358,11 +420,7 @@ export class Home extends React.Component { onMouseEnter={this._onSidebarHover.bind(this, true)} onMouseLeave={this._onSidebarHover.bind(this, false)} > - + {this._renderMenu(sectionNameToLinks)}
{
{ {_.map(TUTORIALS, tutorialInfo => ( { ); } + private _renderMenu(sectionNameToLinks: ObjectMap): React.ReactNode { + const navigation = _.map(sectionNameToLinks, (links: ALink[], sectionName: string) => { + // tslint:disable-next-line:no-unused-variable + return ( +
+
+ {sectionName.toUpperCase()} +
+ {this._renderMenuItems(links)} +
+ ); + }); + return
{navigation}
; + } + private _renderMenuItems(links: ALink[]): React.ReactNode { + const menuItems = _.map(links, link => { + return ( +
+ + + {link.title} + + +
+ ); + }); + return menuItems; + } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return (
@@ -447,22 +541,21 @@ export class Home extends React.Component { ); } private _renderPackage(pkg: Package): React.ReactNode { - const id = sharedUtils.getIdFromName(pkg.name); + const id = sharedUtils.getIdFromName(pkg.link.title); return ( - +
- {pkg.name} + {pkg.link.title}
@@ -476,11 +569,11 @@ export class Home extends React.Component {
{this.props.translate.get(Key.More, Deco.Cap)}
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 388e83d51..b4462407f 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -2,13 +2,13 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; +import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -213,14 +213,14 @@ export class Landing extends React.Component { className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
- + {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} @@ -320,8 +320,7 @@ export class Landing extends React.Component { {this.props.translate.get(Key.FullListPrompt)}{' '} {this.props.translate.get(Key.FullListLink)} @@ -603,7 +602,7 @@ export class Landing extends React.Component { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)}
- + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index f93d998b6..7c79b271f 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -618,10 +618,22 @@ export interface InjectedWeb3 { }; } -export interface TutorialInfo { +export interface ALink { title: string; + to: string; + shouldOpenInNewTab?: boolean; + type?: LinkType; +} + +export interface TutorialInfo { iconUrl: string; description: string; - location: string; + link: ALink; +} + +export enum LinkType { + External = 'EXTERNAL', + ReactScroll = 'REACT_SCROLL', + ReactRoute = 'REACT_ROUTE', } // tslint:disable:max-file-line-count -- cgit v1.2.3 From 4fb7b3515389439e1ffafebf520d0cfd84efb5d1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 10:52:37 +0100 Subject: Convert remaining Links to new UI component --- .../ts/components/documentation/docs_logo.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 3 ++- packages/website/ts/components/ui/link.tsx | 30 ++++++++++++++++++++-- 3 files changed, 31 insertions(+), 4 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 9bd742749..c16499158 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { WebsitePaths } from 'ts/types'; export interface DocsLogoProps { diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 7ed9c6e4e..42aa37bc7 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,7 +1,7 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; @@ -26,6 +26,7 @@ export class TutorialButton extends React.Component) => void; + onMouseLeave?: (event: React.MouseEvent) => void; + onMouseEnter?: (event: React.MouseEvent) => void; } /** @@ -22,6 +26,9 @@ export const Link: React.StatelessComponent = ({ to, shouldOpenInNewTab, children, + onMouseOver, + onMouseLeave, + onMouseEnter, }) => { const styleWithDefault = { textDecoration: 'none', @@ -31,13 +38,29 @@ export const Link: React.StatelessComponent = ({ switch (type) { case LinkType.External: return ( - + {children} ); case LinkType.ReactRoute: return ( - + {children} ); @@ -53,6 +76,9 @@ Link.defaultProps = { shouldOpenInNewTab: true, style: {}, className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), }; Link.displayName = 'Link'; -- cgit v1.2.3 From 0c80fea8216ede2b77c448e3e1b4d013c1c76669 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 10:52:48 +0100 Subject: Make tutorial buttons also open in a new tab --- packages/website/ts/pages/documentation/home.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 42ed1db8c..86999b8fe 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -27,6 +27,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.DevelopOnEthereum, to: `${WebsitePaths.Wiki}#Ethereum-Development`, + shouldOpenInNewTab: true, }, }, { @@ -35,6 +36,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.BuildARelayer, to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + shouldOpenInNewTab: true, }, }, { @@ -43,6 +45,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.OrderBasics, to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + shouldOpenInNewTab: true, }, }, { @@ -51,6 +54,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.UseSharedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + shouldOpenInNewTab: true, }, }, ]; @@ -68,6 +72,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '0x.js', to: WebsitePaths.ZeroExJs, + shouldOpenInNewTab: true, }, }, { @@ -76,8 +81,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '0x starter project', to: 'https://github.com/0xProject/0x-starter-project', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, { @@ -86,6 +91,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/connect', to: WebsitePaths.Connect, + shouldOpenInNewTab: true, }, }, { @@ -94,6 +100,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/contract-wrappers', to: WebsitePaths.ContractWrappers, + shouldOpenInNewTab: true, }, }, { @@ -102,6 +109,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/json-schemas', to: WebsitePaths.JSONSchemas, + shouldOpenInNewTab: true, }, }, { @@ -110,6 +118,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/order-utils', to: WebsitePaths.OrderUtils, + shouldOpenInNewTab: true, }, }, { @@ -118,6 +127,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/order-watcher', to: WebsitePaths.OrderWatcher, + shouldOpenInNewTab: true, }, }, { @@ -126,8 +136,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sra-spec', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, ], @@ -138,8 +148,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: 'abi-gen', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, { @@ -148,6 +158,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: 'ethereum-types', to: WebsitePaths.EthereumTypes, + shouldOpenInNewTab: true, }, }, { @@ -156,6 +167,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sol-compiler', to: WebsitePaths.SolCompiler, + shouldOpenInNewTab: true, }, }, { @@ -164,6 +176,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sol-cov', to: WebsitePaths.SolCov, + shouldOpenInNewTab: true, }, }, { @@ -172,6 +185,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/subproviders', to: WebsitePaths.Subproviders, + shouldOpenInNewTab: true, }, }, { @@ -180,6 +194,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/web3-wrapper', to: WebsitePaths.Web3Wrapper, + shouldOpenInNewTab: true, }, }, ], -- cgit v1.2.3 From 773220f84037680b17a8eccfbaa04cd265197390 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 11:27:28 +0100 Subject: Fix link --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 675357f41..a314f0f54 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -171,7 +171,12 @@ export class DevelopersDropDown extends React.Component - + {linkText}
-- cgit v1.2.3 From 188564a343e2d0842bf4ac435c438df81c29ca2d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 11:28:56 +0100 Subject: Add padding to bottom of scroll area --- packages/website/ts/pages/documentation/home.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 86999b8fe..320fc6af2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -489,8 +489,7 @@ export class Home extends React.Component { ))} -
-
+ {this._renderSectionTitle( this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} @@ -504,6 +503,7 @@ export class Home extends React.Component { )} +
@@ -523,7 +523,11 @@ export class Home extends React.Component {
); }); - return
{navigation}
; + return ( + + {navigation} + + ); } private _renderMenuItems(links: ALink[]): React.ReactNode { const menuItems = _.map(links, link => { -- cgit v1.2.3 From f13c48216160e0e1e58354ff09d0c583dfe30d10 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 11:43:17 +0100 Subject: Align logo and menu --- packages/website/ts/pages/documentation/home.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 320fc6af2..0aefc4662 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -490,20 +490,20 @@ export class Home extends React.Component { - {this._renderSectionTitle( - this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), - )} - - {this._renderSectionDescription( - this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), + {this._renderSectionTitle( + this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} - - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), + + {this._renderSectionDescription( + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + -
@@ -524,7 +524,7 @@ export class Home extends React.Component { ); }); return ( - + {navigation} ); -- cgit v1.2.3 From 55d61b0dc759255ce15b7c6be1a4dab2d9df792d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 12:14:22 +0100 Subject: Add border underneath logo while user is scrolling --- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/pages/documentation/home.tsx | 35 ++++++++++++++++++++---- 2 files changed, 30 insertions(+), 6 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 1e0bfd959..782ab3b6f 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -17,6 +17,7 @@ export interface ContainerProps { backgroundColor?: string; background?: string; borderRadius?: StringOrNum; + borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 0aefc4662..19a3f9eaf 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -360,24 +360,35 @@ export interface HomeProps { export interface HomeState { isHoveringSidebar: boolean; isHoveringMainContent: boolean; + isSidebarScrolling: boolean; } export class Home extends React.Component { private readonly _throttledScreenWidthUpdate: () => void; + private readonly _throttledSidebarScrolling: () => void; + private _sidebarScrollClearingInterval: number; constructor(props: HomeProps) { super(props); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); this.state = { isHoveringSidebar: false, isHoveringMainContent: false, + isSidebarScrolling: false, }; } public componentDidMount(): void { window.addEventListener('resize', this._throttledScreenWidthUpdate); window.scrollTo(0, 0); + this._sidebarScrollClearingInterval = window.setInterval(() => { + this.setState({ + isSidebarScrolling: false, + }); + }, 1000); } public componentWillUnmount(): void { window.removeEventListener('resize', this._throttledScreenWidthUpdate); + window.clearInterval(this._sidebarScrollClearingInterval); } public render(): React.ReactNode { const scrollableContainerStyles: React.CSSProperties = { @@ -422,10 +433,14 @@ export class Home extends React.Component { width={234} paddingLeft={22} paddingRight={22} - paddingTop={2} + paddingTop={0} backgroundColor={colors.grey100} > - + + +
{ }} onMouseEnter={this._onSidebarHover.bind(this, true)} onMouseLeave={this._onSidebarHover.bind(this, false)} + onWheel={this._throttledSidebarScrolling} > {this._renderMenu(sectionNameToLinks)}
@@ -524,7 +540,7 @@ export class Home extends React.Component { ); }); return ( - + {navigation} ); @@ -625,9 +641,11 @@ export class Home extends React.Component { ); } private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { - this.setState({ - isHoveringSidebar: isHovering, - }); + if (isHovering !== this.state.isHoveringSidebar) { + this.setState({ + isHoveringSidebar: isHovering, + }); + } } private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { if (isHovering !== this.state.isHoveringMainContent) { @@ -636,6 +654,11 @@ export class Home extends React.Component { }); } } + private _onSidebarScroll(_event: React.FormEvent): void { + this.setState({ + isSidebarScrolling: true, + }); + } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); -- cgit v1.2.3 From 80a6e6fe8dce9daeb69f0fd7529062780a58d5be Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:26:16 +0100 Subject: Decrease size of section descriptions --- packages/website/ts/pages/documentation/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 19a3f9eaf..52a486c2d 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -635,7 +635,7 @@ export class Home extends React.Component { } private _renderSectionDescription(text: string): React.ReactNode { return ( - + {text} ); -- cgit v1.2.3 From 6d8427a024d0175c4e0305503321b4169ff9ce05 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:26:30 +0100 Subject: Don't make opening links in new tab a default --- packages/website/ts/components/ui/link.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index 30c76e3c9..f8522ca2b 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -39,7 +39,7 @@ export const Link: React.StatelessComponent = ({ case LinkType.External: return ( = ({ ); case LinkType.ReactRoute: + if (to === '/') { + console.log('got here!'); + } return ( = ({ Link.defaultProps = { type: LinkType.ReactRoute, - shouldOpenInNewTab: true, + shouldOpenInNewTab: false, style: {}, className: '', onMouseOver: _.noop.bind(_), -- cgit v1.2.3 From 688325491fd9549c81ea65a4ad95fa42c2589927 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:37:49 +0100 Subject: Make whole bottom bar clickable not just the text --- .../components/dropdowns/developers_drop_down.tsx | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index a314f0f54..af0ae825c 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -119,26 +119,26 @@ export class DevelopersDropDown extends React.Component{this._renderLinkSection(usefulLinksToLinkInfo)}
-
- {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} - -
+
+
); return dropdownMenu; -- cgit v1.2.3 From ab855cdd1cfa2e4fcc45499508dca9c9e8733b61 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:43:25 +0100 Subject: remove stray console --- packages/website/ts/components/ui/link.tsx | 3 --- 1 file changed, 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx index f8522ca2b..ad98efa6c 100644 --- a/packages/website/ts/components/ui/link.tsx +++ b/packages/website/ts/components/ui/link.tsx @@ -51,9 +51,6 @@ export const Link: React.StatelessComponent = ({ ); case LinkType.ReactRoute: - if (to === '/') { - console.log('got here!'); - } return ( Date: Wed, 3 Oct 2018 16:37:59 +0100 Subject: Use same Link UI component for react-scroll links --- .../react-docs/src/components/documentation.tsx | 9 +- packages/react-docs/src/docs_info.ts | 54 ++++++++--- packages/react-shared/package.json | 5 +- packages/react-shared/src/components/link.tsx | 100 +++++++++++++++++++++ .../src/components/nested_sidebar_menu.tsx | 66 ++++++-------- packages/react-shared/src/index.ts | 11 ++- packages/react-shared/src/types.ts | 13 +++ packages/website/package.json | 2 - .../documentation/docs_content_top_bar.tsx | 11 ++- .../ts/components/documentation/docs_logo.tsx | 2 +- .../components/documentation/tutorial_button.tsx | 3 +- .../components/dropdowns/developers_drop_down.tsx | 5 +- packages/website/ts/components/fill_order.tsx | 3 +- packages/website/ts/components/footer.tsx | 5 +- .../ts/components/inputs/token_amount_input.tsx | 3 +- .../website/ts/components/portal/back_button.tsx | 4 +- packages/website/ts/components/portal/portal.tsx | 3 +- packages/website/ts/components/top_bar/top_bar.tsx | 24 ++--- .../ts/components/top_bar/top_bar_menu_item.tsx | 4 +- .../website/ts/components/ui/custom_menu_item.tsx | 2 +- packages/website/ts/components/ui/link.tsx | 84 ----------------- packages/website/ts/components/ui/simple_menu.tsx | 2 +- packages/website/ts/pages/about/about.tsx | 3 +- .../website/ts/pages/documentation/doc_page.tsx | 8 +- packages/website/ts/pages/documentation/home.tsx | 13 ++- packages/website/ts/pages/landing/landing.tsx | 3 +- packages/website/ts/pages/wiki/wiki.tsx | 29 +++--- packages/website/ts/types.ts | 14 +-- 28 files changed, 267 insertions(+), 218 deletions(-) create mode 100644 packages/react-shared/src/components/link.tsx delete mode 100644 packages/website/ts/components/ui/link.tsx (limited to 'packages') diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index 3cd14923c..1ed829b01 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -98,7 +98,10 @@ export class Documentation extends React.Component {_.isUndefined(this.props.docAgnosticFormat) ? ( @@ -128,8 +131,8 @@ export class Documentation extends React.Component
diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index 6355a2f88..1c11e07de 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -1,5 +1,5 @@ -import { MenuSubsectionsBySection } from '@0xproject/react-shared'; -import { DocAgnosticFormat, TypeDefinitionByName } from '@0xproject/types'; +import { ALink, LinkType, MenuSubsectionsBySection, utils as sharedUtils } from '@0xproject/react-shared'; +import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types'; import * as _ from 'lodash'; import { @@ -32,10 +32,10 @@ export class DocsInfo { this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion; this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId; } - public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection { - const menuSubsectionsBySection = {} as MenuSubsectionsBySection; + public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap { + const subsectionNameToLinks: ObjectMap = {}; if (_.isUndefined(docAgnosticFormat)) { - return menuSubsectionsBySection; + return subsectionNameToLinks; } const docSections = _.keys(this.sections); @@ -56,7 +56,14 @@ export class DocsInfo { if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) { const sortedTypesNames = _.sortBy(docSection.types, 'name'); const typeNames = _.map(sortedTypesNames, t => t.name); - menuSubsectionsBySection[sectionName] = typeNames; + const typeLinks = _.map(typeNames, typeName => { + return { + to: `${sectionName}-${typeName}`, + title: typeName, + type: LinkType.ReactScroll, + }; + }); + subsectionNameToLinks[sectionName] = typeLinks; } else if (isExportedFunctionSection) { // Noop so that we don't have the method listed underneath itself. } else { @@ -71,15 +78,20 @@ export class DocsInfo { const methodNames = _.map(methodsSortedByName, m => m.name); const sortedFunctionNames = _.sortBy(docSection.functions, 'name'); const functionNames = _.map(sortedFunctionNames, m => m.name); - menuSubsectionsBySection[sectionName] = [ - ...eventNames, - ...propertyNames, - ...functionNames, - ...methodNames, - ]; + const names = [...eventNames, ...propertyNames, ...functionNames, ...methodNames]; + + const links = _.map(names, name => { + return { + to: `${sectionName}-${name}`, + title: name, + type: LinkType.ReactScroll, + }; + }); + + subsectionNameToLinks[sectionName] = links; } }); - return menuSubsectionsBySection; + return subsectionNameToLinks; } public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } { if (_.isUndefined(this.sections.types)) { @@ -90,4 +102,20 @@ export class DocsInfo { const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name') as any; return typeDefinitionByName; } + public getSectionNameToLinks(): ObjectMap { + const sectionNameToLinks: ObjectMap = {}; + _.each(this.menu, (linkTitles, sectionName) => { + sectionNameToLinks[sectionName] = []; + _.each(linkTitles, linkTitle => { + const to = sharedUtils.getIdFromName(linkTitle); + const links = sectionNameToLinks[sectionName]; + links.push({ + title: linkTitle, + to, + type: LinkType.ReactScroll, + }); + }); + }); + return sectionNameToLinks; + } } diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 67c644bf3..eaaa57ea2 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -33,6 +33,7 @@ "typescript": "3.0.1" }, "dependencies": { + "@0xproject/types": "^1.1.2", "@material-ui/core": "^3.0.1", "@types/is-mobile": "0.3.0", "@types/lodash": "4.14.104", @@ -40,6 +41,7 @@ "@types/node": "*", "@types/react": "*", "@types/react-dom": "*", + "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "basscss": "^8.0.3", "change-case": "^3.0.2", @@ -50,7 +52,8 @@ "react-dom": "^16.4.2", "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162", "react-markdown": "^3.2.2", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330" + "react-scroll": "0xproject/react-scroll#similar-to-pr-330", + "react-router-dom": "^4.1.1" }, "publishConfig": { "access": "public" diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx new file mode 100644 index 000000000..7425b9365 --- /dev/null +++ b/packages/react-shared/src/components/link.tsx @@ -0,0 +1,100 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link as ReactRounterLink } from 'react-router-dom'; +import { Link as ScrollLink } from 'react-scroll'; + +import { LinkType } from '../types'; +import { constants } from '../utils/constants'; + +export interface LinkProps { + to: string; + type?: LinkType; + shouldOpenInNewTab?: boolean; + style?: React.CSSProperties; + className?: string; + onMouseOver?: (event: React.MouseEvent) => void; + onMouseLeave?: (event: React.MouseEvent) => void; + onMouseEnter?: (event: React.MouseEvent) => void; + containerId?: string; +} + +/** + * A generic link component which let's the developer render internal & external links, and their associated + * behaviors with a single link component. Many times we want a menu including both internal & external links + * and this abstracts away the differences of rendering both types of links. + */ +export const Link: React.StatelessComponent = ({ + style, + className, + type, + to, + shouldOpenInNewTab, + children, + onMouseOver, + onMouseLeave, + onMouseEnter, + containerId, +}) => { + const styleWithDefault = { + textDecoration: 'none', + ...style, + }; + + switch (type) { + case LinkType.External: + return ( + + {children} + + ); + case LinkType.ReactRoute: + return ( + + {children} + + ); + case LinkType.ReactScroll: + return ( + + {children} + + ); + default: + throw new Error(`Unrecognized LinkType: ${type}`); + } +}; + +Link.defaultProps = { + type: LinkType.ReactRoute, + shouldOpenInNewTab: false, + style: {}, + className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), + containerId: constants.DOCS_CONTAINER_ID, +}; + +Link.displayName = 'Link'; diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 9933f3b38..2242349df 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -1,18 +1,19 @@ +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link as ScrollLink } from 'react-scroll'; -import { MenuSubsectionsBySection, Styles } from '../types'; +import { ALink, LinkType, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; +import { Link } from './Link'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { - topLevelMenu: { [topLevel: string]: string[] }; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks: ObjectMap; + subsectionNameToLinks?: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,10 +45,10 @@ export class NestedSidebarMenu extends React.Component { + const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); if (this.props.shouldDisplaySectionHeaders) { // tslint:disable-next-line:no-unused-variable @@ -56,11 +57,11 @@ export class NestedSidebarMenu extends React.Component {finalSectionName.toUpperCase()}
- {this._renderMenuItems(menuItems)} + {this._renderMenuItems(links)}
); } else { - return
{this._renderMenuItems(menuItems)}
; + return
{this._renderMenuItems(links)}
; } }); const maxWidthWithScrollbar = 307; @@ -82,26 +83,18 @@ export class NestedSidebarMenu extends React.Component ); } - private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { + private _renderMenuItems(links: ALink[]): React.ReactNode[] { const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; - const menuItems = _.map(menuItemNames, menuItemName => { + const menuItems = _.map(links, link => { const finalMenuItemName = this.props.shouldReformatMenuItemNames - ? utils.convertDashesToSpaces(menuItemName) - : menuItemName; - const id = utils.getIdFromName(menuItemName); + ? utils.convertDashesToSpaces(link.title) + : link.title; return ( -
- +
+ - - {this._renderMenuItemSubsections(menuItemName)} + + {this._renderMenuItemSubsections(link.title)}
); }); @@ -124,28 +117,21 @@ export class NestedSidebarMenu extends React.Component - {_.map(entityNames, entityName => { - const name = `${menuItemName}-${entityName}`; - const id = utils.getIdFromName(name); + {_.map(links, link => { + const name = `${menuItemName}-${link.title}`; return (
  • - + - {entityName} + {link.title} - +
    • ); })} diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 3b50c0117..793214a87 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -4,8 +4,17 @@ export { MarkdownCodeBlock } from './components/markdown_code_block'; export { MarkdownSection } from './components/markdown_section'; export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; +export { Link } from './components/link'; -export { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types'; +export { + HeaderSizes, + Styles, + MenuSubsectionsBySection, + EtherscanLinkSuffixes, + Networks, + LinkType, + ALink, +} from './types'; export { utils } from './utils/utils'; export { constants } from './utils/constants'; diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts index 88fadcc09..b3dd4045b 100644 --- a/packages/react-shared/src/types.ts +++ b/packages/react-shared/src/types.ts @@ -23,3 +23,16 @@ export enum Networks { Ropsten = 'Ropsten', Rinkeby = 'Rinkeby', } + +export enum LinkType { + External = 'EXTERNAL', + ReactScroll = 'REACT_SCROLL', + ReactRoute = 'REACT_ROUTE', +} + +export interface ALink { + title: string; + to: string; + shouldOpenInNewTab?: boolean; + type?: LinkType; +} diff --git a/packages/website/package.json b/packages/website/package.json index ab8835248..37e75e84e 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -52,7 +52,6 @@ "react-helmet": "^5.2.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", - "react-router-dom": "^4.1.1", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", @@ -81,7 +80,6 @@ "@types/react-dom": "^16.0.7", "@types/react-helmet": "^5.0.6", "@types/react-redux": "^4.4.37", - "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index 7edb51587..d3735f2be 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -1,12 +1,11 @@ -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import * as React from 'react'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; -import { ALink, Deco, Key, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -147,12 +146,12 @@ export class DocsContentTopBar extends React.Component
    TODO - {/* */} + />
    ); diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index c16499158..6f3c3c6e8 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -1,5 +1,5 @@ +import { Link } from '@0xproject/react-shared'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; import { WebsitePaths } from 'ts/types'; export interface DocsLogoProps { diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 42aa37bc7..a0d99e175 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,7 +1,6 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index af0ae825c..4167b3d23 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -1,11 +1,10 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link, LinkType } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; -import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types'; +import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index ec1d698f3..99939ce43 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,5 +1,5 @@ import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils'; -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as accounting from 'accounting'; @@ -16,7 +16,6 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; import { Alert } from 'ts/components/ui/alert'; import { EthereumAddress } from 'ts/components/ui/ethereum_address'; import { Identicon } from 'ts/components/ui/identicon'; -import { Link } from 'ts/components/ui/link'; import { VisualOrder } from 'ts/components/visual_order'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index bec3c17f7..02770c073 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,13 +1,12 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link, LinkType } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types'; +import { Deco, Key, Language, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index adf96f9ee..562f670e2 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,11 +1,10 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; -import { Link } from 'ts/components/ui/link'; import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; interface TokenAmountInputProps { diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index bdbcef343..64a332e07 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,7 +1,5 @@ -import { Styles } from '@0xproject/react-shared'; +import { Link, Styles } from '@0xproject/react-shared'; import * as React from 'react'; -import { Link } from 'ts/components/ui/link'; - import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index a9ccf9e11..b8cd45661 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,10 +1,9 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Route, RouteComponentProps, Switch } from 'react-router-dom'; -import { Link } from 'ts/components/ui/link'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 3da2307e0..e25c0a0f7 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,11 +1,14 @@ -import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; +import { DocsInfo } from '@0xproject/react-docs'; import { + ALink, colors, constants as sharedConstants, - MenuSubsectionsBySection, + Link, + LinkType, NestedSidebarMenu, Styles, } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import MenuItem from 'material-ui/MenuItem'; @@ -16,9 +19,8 @@ import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types'; +import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -40,8 +42,8 @@ export interface TopBarProps { translate: Translate; docsVersion?: string; availableDocVersions?: string[]; - menu?: DocsMenu; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks?: ObjectMap; + subsectionNameToLinks?: ObjectMap; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -311,14 +313,14 @@ export class TopBar extends React.Component { // because the sidebar renders `react-scroll` links which depend on the scroll container already // being rendered. const documentationContainer = document.getElementById(sharedConstants.SCROLL_CONTAINER_ID); - if (!isViewingDocsPage || _.isUndefined(this.props.menu) || _.isNull(documentationContainer)) { + if (!isViewingDocsPage || _.isUndefined(this.props.sectionNameToLinks) || _.isNull(documentationContainer)) { return undefined; } return (
    { return (
    ) => void; - onMouseLeave?: (event: React.MouseEvent) => void; - onMouseEnter?: (event: React.MouseEvent) => void; -} - -/** - * A generic link component which let's the developer render internal & external links, and their associated - * behaviors with a single link component. Many times we want a menu including both internal & external links - * and this abstracts away the differences of rendering both types of links. - */ -export const Link: React.StatelessComponent = ({ - style, - className, - type, - to, - shouldOpenInNewTab, - children, - onMouseOver, - onMouseLeave, - onMouseEnter, -}) => { - const styleWithDefault = { - textDecoration: 'none', - ...style, - }; - - switch (type) { - case LinkType.External: - return ( - - {children} - - ); - case LinkType.ReactRoute: - return ( - - {children} - - ); - case LinkType.ReactScroll: - return
    TODO
    ; - default: - throw new Error(`Unrecognized LinkType: ${type}`); - } -}; - -Link.defaultProps = { - type: LinkType.ReactRoute, - shouldOpenInNewTab: false, - style: {}, - className: '', - onMouseOver: _.noop.bind(_), - onMouseLeave: _.noop.bind(_), - onMouseEnter: _.noop.bind(_), -}; - -Link.displayName = 'Link'; diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 767da3675..bdaf0701e 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -1,7 +1,7 @@ +import { Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'ts/components/ui/link'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index ba1b423b9..efdf631b2 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,10 +1,9 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Link, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; -import { Link } from 'ts/components/ui/link'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo, WebsitePaths } from 'ts/types'; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 6f029b6a2..9092a5cde 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -79,9 +79,9 @@ export class DocPage extends React.Component { this._isUnmounted = true; } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) + const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) ? {} - : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); + : this.props.docsInfo.getSubsectionNameToLinks(this.state.docAgnosticFormat); const sourceUrl = this._getSourceUrl(); const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON; const iconUrl = `/images/doc_icons/${iconFileName}`; @@ -93,8 +93,8 @@ export class DocPage extends React.Component { location={this.props.location} docsVersion={this.props.docsVersion} availableDocVersions={this.props.availableDocVersions} - menu={this.props.docsInfo.menu} - menuSubsectionsBySection={menuSubsectionsBySection} + sectionNameToLinks={this.props.docsInfo.getSectionNameToLinks()} + subsectionNameToLinks={subsectionNameToLinks} docsInfo={this.props.docsInfo} translate={this.props.translate} onVersionSelected={this._onVersionSelected.bind(this)} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 52a486c2d..72e507a7b 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,4 +1,12 @@ -import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared'; +import { + ALink, + colors, + constants as sharedConstants, + Link, + LinkType, + MarkdownLinkBlock, + utils as sharedUtils, +} from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; @@ -10,10 +18,9 @@ import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index b4462407f..c819cd8a1 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -8,7 +8,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 55f532b11..3d8b8ef52 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,12 +1,15 @@ import { + ALink, colors, constants as sharedConstants, HeaderSizes, + LinkType, MarkdownSection, NestedSidebarMenu, Styles, utils as sharedUtils, } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; @@ -78,9 +81,10 @@ export class Wiki extends React.Component { window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) + const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); + : this._getSectionNameToLinks(this.state.articlesBySection); + console.log('sectionNameToLinks', sectionNameToLinks); const mainContainersStyle: React.CSSProperties = { ...styles.mainContainers, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', @@ -92,7 +96,7 @@ export class Wiki extends React.Component { @@ -131,8 +135,7 @@ export class Wiki extends React.Component { onMouseLeave={this._onSidebarHoverOff.bind(this)} >
    @@ -223,15 +226,21 @@ export class Wiki extends React.Component { } } } - private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } { + private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: { [section: string]: string[] } = {}; + const sectionNameToLinks: ObjectMap = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; - const articleNames = _.map(articles, article => article.title); - menuSubsectionsBySection[sectionName] = articleNames; + const articleLinks = _.map(articles, article => { + return { + to: sharedUtils.getIdFromName(article.title), + title: article.title, + type: LinkType.ReactScroll, + }; + }); + sectionNameToLinks[sectionName] = articleLinks; } - return menuSubsectionsBySection; + return sectionNameToLinks; } private _onSidebarHover(_event: React.FormEvent): void { this.setState({ diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 7c79b271f..a3d248a9d 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,3 +1,4 @@ +import { ALink } from '@0xproject/react-shared'; import { ObjectMap, SignedOrder } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import { Provider } from 'ethereum-types'; @@ -618,22 +619,9 @@ export interface InjectedWeb3 { }; } -export interface ALink { - title: string; - to: string; - shouldOpenInNewTab?: boolean; - type?: LinkType; -} - export interface TutorialInfo { iconUrl: string; description: string; link: ALink; } - -export enum LinkType { - External = 'EXTERNAL', - ReactScroll = 'REACT_SCROLL', - ReactRoute = 'REACT_ROUTE', -} // tslint:disable:max-file-line-count -- cgit v1.2.3 From 751e8eafe483efb8b416b88c7edca6676ae9d607 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 16:41:44 +0100 Subject: Remove stray console.log --- packages/react-docs/src/components/documentation.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages') diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index 1ed829b01..aa6d27402 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -99,9 +99,7 @@ export class Documentation extends React.Component {_.isUndefined(this.props.docAgnosticFormat) ? ( -- cgit v1.2.3 From 72b1c60f392c8c8fc445223f2149ca3a62a83fed Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 16:44:18 +0100 Subject: Fix nit --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 4167b3d23..6133c8b4d 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -128,7 +128,7 @@ export class DevelopersDropDown extends React.Component
    Date: Wed, 3 Oct 2018 17:03:05 +0100 Subject: Use nestedSidebarMenu component for Dev home --- .../src/components/nested_sidebar_menu.tsx | 14 ++++++- packages/website/ts/pages/documentation/home.tsx | 49 ++++------------------ 2 files changed, 20 insertions(+), 43 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 2242349df..c871e77d4 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,7 +94,12 @@ export class NestedSidebarMenu extends React.Component - + - + { pkg => pkg.link, ), }; + console.log('sectionNameToLinks', sectionNameToLinks); return ( { onMouseLeave={this._onSidebarHover.bind(this, false)} onWheel={this._throttledSidebarScrolling} > - {this._renderMenu(sectionNameToLinks)} + + +
    { ); } - private _renderMenu(sectionNameToLinks: ObjectMap): React.ReactNode { - const navigation = _.map(sectionNameToLinks, (links: ALink[], sectionName: string) => { - // tslint:disable-next-line:no-unused-variable - return ( -
    -
    - {sectionName.toUpperCase()} -
    - {this._renderMenuItems(links)} -
    - ); - }); - return ( - - {navigation} - - ); - } - private _renderMenuItems(links: ALink[]): React.ReactNode { - const menuItems = _.map(links, link => { - return ( -
    - - - {link.title} - - -
    - ); - }); - return menuItems; - } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return (
    -- cgit v1.2.3 From 1bef42cdcb45e4614ffdc8d8a1e455b4fe970a45 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:17:16 +0100 Subject: Improve comment --- packages/react-shared/src/components/link.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 7425b9365..6200bfbd3 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -19,9 +19,10 @@ export interface LinkProps { } /** - * A generic link component which let's the developer render internal & external links, and their associated - * behaviors with a single link component. Many times we want a menu including both internal & external links - * and this abstracts away the differences of rendering both types of links. + * A generic link component which let's the developer render internal, external and scroll-to-hash links, and + * their associated behaviors with a single link component. Many times we want a menu including a combination of + * internal, external and scroll links and the abstraction of the differences of rendering each types of link + * makes it much easier to do so. */ export const Link: React.StatelessComponent = ({ style, -- cgit v1.2.3 From a7955c0964f3debaeaf77a58cdc5309535ad0ec0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:19:39 +0100 Subject: Remove todo --- packages/website/ts/components/documentation/docs_content_top_bar.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx index d3735f2be..04385cfdb 100644 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx @@ -145,7 +145,6 @@ export class DocsContentTopBar extends React.Component
    - TODO Date: Wed, 3 Oct 2018 17:23:43 +0100 Subject: Fix linter --- packages/react-docs/src/docs_info.ts | 2 +- .../src/components/nested_sidebar_menu.tsx | 6 +- packages/react-shared/src/index.ts | 10 +- packages/react-shared/src/types.ts | 4 - .../documentation/docs_content_top_bar.tsx | 163 --------------------- .../ts/components/documentation/docs_top_bar.tsx | 163 +++++++++++++++++++++ packages/website/ts/pages/documentation/home.tsx | 5 +- 7 files changed, 170 insertions(+), 183 deletions(-) delete mode 100644 packages/website/ts/components/documentation/docs_content_top_bar.tsx create mode 100644 packages/website/ts/components/documentation/docs_top_bar.tsx (limited to 'packages') diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index 1c11e07de..12d571136 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -1,4 +1,4 @@ -import { ALink, LinkType, MenuSubsectionsBySection, utils as sharedUtils } from '@0xproject/react-shared'; +import { ALink, LinkType, utils as sharedUtils } from '@0xproject/react-shared'; import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types'; import * as _ from 'lodash'; diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index c871e77d4..ec42c8265 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -3,7 +3,7 @@ import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { ALink, LinkType, Styles } from '../types'; +import { ALink, Styles } from '../types'; import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; @@ -127,9 +127,9 @@ export class NestedSidebarMenu extends React.Component {_.map(links, link => { diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index 793214a87..1842e8af3 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -6,15 +6,7 @@ export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; export { Link } from './components/link'; -export { - HeaderSizes, - Styles, - MenuSubsectionsBySection, - EtherscanLinkSuffixes, - Networks, - LinkType, - ALink, -} from './types'; +export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, LinkType, ALink } from './types'; export { utils } from './utils/utils'; export { constants } from './utils/constants'; diff --git a/packages/react-shared/src/types.ts b/packages/react-shared/src/types.ts index b3dd4045b..daae7b115 100644 --- a/packages/react-shared/src/types.ts +++ b/packages/react-shared/src/types.ts @@ -8,10 +8,6 @@ export enum HeaderSizes { H3 = 'h3', } -export interface MenuSubsectionsBySection { - [section: string]: string[]; -} - export enum EtherscanLinkSuffixes { Address = 'address', Tx = 'tx', diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx deleted file mode 100644 index 04385cfdb..000000000 --- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; -import * as _ from 'lodash'; -import Drawer from 'material-ui/Drawer'; -import * as React from 'react'; -import { DocsLogo } from 'ts/components/documentation/docs_logo'; -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; - sectionNameToLinks?: ObjectMap; -} - -interface DocsContentTopBarState { - isDrawerOpen: boolean; -} - -interface MenuItemInfo { - title: string; - url: string; - iconUrl: string; - textStyle: React.CSSProperties; -} - -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 menuItemInfos: MenuItemInfo[] = [ - { - title: this.props.translate.get(Key.Github, Deco.Cap), - url: constants.URL_GITHUB_ORG, - iconUrl: '/images/developers/github_icon.svg', - textStyle: { color: colors.linkSectionGrey }, - }, - { - title: this.props.translate.get(Key.Forum, Deco.Cap), - url: constants.URL_FORUM, - iconUrl: '/images/developers/forum_icon.svg', - textStyle: { color: colors.linkSectionGrey }, - }, - { - title: this.props.translate.get(Key.LiveChat, Deco.Cap), - url: constants.URL_ZEROEX_CHAT, - iconUrl: '/images/developers/chat_icon.svg', - textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' }, - }, - ]; - return ( - - -
    - - -
    - 0xproject.com -
    - -
    -
    -
    -
    - {this._renderMenuItems(menuItemInfos)} -
    -
    -
    - -
    -
    -
    - -
    -
    - -
    - {this._renderDrawer()} - - ); - } - private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { - const menuItems = _.map(menuItemInfos, menuItemInfo => { - return ( - -
    - -
    - {menuItemInfo.title} -
    -
    -     - ); - }); - return menuItems; - } - private _renderDrawer(): React.ReactNode { - return ( - -
    - -
    -     - ); - } - private _onMenuButtonClick(): void { - this.setState({ - isDrawerOpen: !this.state.isDrawerOpen, - }); - } -} diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx new file mode 100644 index 000000000..6a050d398 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -0,0 +1,163 @@ +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; +import * as _ from 'lodash'; +import Drawer from 'material-ui/Drawer'; +import * as React from 'react'; +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +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 DocsTopBarProps { + location: Location; + translate: Translate; + sectionNameToLinks?: ObjectMap; +} + +interface DocsTopBarState { + isDrawerOpen: boolean; +} + +interface MenuItemInfo { + title: string; + url: string; + iconUrl: string; + textStyle: React.CSSProperties; +} + +export class DocsTopBar extends React.Component { + constructor(props: DocsTopBarProps) { + super(props); + this.state = { + isDrawerOpen: false, + }; + } + public componentWillReceiveProps(nextProps: DocsTopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } + public render(): React.ReactNode { + const menuItemInfos: MenuItemInfo[] = [ + { + title: this.props.translate.get(Key.Github, Deco.Cap), + url: constants.URL_GITHUB_ORG, + iconUrl: '/images/developers/github_icon.svg', + textStyle: { color: colors.linkSectionGrey }, + }, + { + title: this.props.translate.get(Key.Forum, Deco.Cap), + url: constants.URL_FORUM, + iconUrl: '/images/developers/forum_icon.svg', + textStyle: { color: colors.linkSectionGrey }, + }, + { + title: this.props.translate.get(Key.LiveChat, Deco.Cap), + url: constants.URL_ZEROEX_CHAT, + iconUrl: '/images/developers/chat_icon.svg', + textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' }, + }, + ]; + return ( + + +
    + + +
    + 0xproject.com +
    + +
    +
    +
    +
    + {this._renderMenuItems(menuItemInfos)} +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    + {this._renderDrawer()} + + ); + } + private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { + const menuItems = _.map(menuItemInfos, menuItemInfo => { + return ( + +
    + +
    + {menuItemInfo.title} +
    +
    +     + ); + }); + return menuItems; + } + private _renderDrawer(): React.ReactNode { + return ( + +
    + +
    +     + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isDrawerOpen: !this.state.isDrawerOpen, + }); + } +} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7c0bf433e..c0b50fab7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -10,13 +10,12 @@ import { } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; -import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import * as ReactMarkdown from 'react-markdown'; import { Element as ScrollElement } from 'react-scroll'; -import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; @@ -475,7 +474,7 @@ export class Home extends React.Component { backgroundColor={colors.white} > - Date: Wed, 3 Oct 2018 17:25:23 +0100 Subject: rename for clarity --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index ec42c8265..0e6a06a3b 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -127,9 +127,9 @@ export class NestedSidebarMenu extends React.Component {_.map(links, link => { -- cgit v1.2.3 From 4184c5db8597a7311f3efe82bce9a5e2668daf51 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:30:23 +0100 Subject: Use Container and Text where possible --- .../ts/components/documentation/docs_top_bar.tsx | 23 +++++++++++----------- 1 file changed, 11 insertions(+), 12 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 6a050d398..e5aa2ea29 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -5,6 +5,7 @@ import Drawer from 'material-ui/Drawer'; import * as React from 'react'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -71,9 +72,11 @@ export class DocsTopBar extends React.Component -
    - 0xproject.com -
    + + + 0xproject.com + +
    @@ -86,19 +89,15 @@ export class DocsTopBar extends React.Component
    -
    - -
    + onClick={this._onMenuButtonClick.bind(this)} + />
    Date: Wed, 3 Oct 2018 19:00:59 +0100 Subject: Convert more divs to Containers --- .../ts/components/documentation/docs_top_bar.tsx | 39 +++++++--------- packages/website/ts/pages/documentation/home.tsx | 54 +++++++++++----------- 2 files changed, 44 insertions(+), 49 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index e5aa2ea29..3fea1c714 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -65,7 +65,7 @@ export class DocsTopBar extends React.Component -
    + -
    -
    -
    -
    + + + + {this._renderMenuItems(menuItemInfos)} -
    -
    -
    + + + -
    -
    + + -
    + -
    + {this._renderDrawer()} ); @@ -124,12 +117,12 @@ export class DocsTopBar extends React.Component -
    +
    {menuItemInfo.title}
    -
    + ); }); @@ -143,14 +136,14 @@ export class DocsTopBar extends React.Component -
    + -
    + ); } diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index c0b50fab7..b95aa17f8 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -435,7 +435,7 @@ export class Home extends React.Component { } 50%, ${colors.white} 100%)`} > -
    + { onMouseOver={this._onMainContentHover.bind(this, true)} onMouseLeave={this._onMainContentHover.bind(this, false)} > -
    + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} {this._renderSectionDescription( @@ -533,29 +533,29 @@ export class Home extends React.Component { -
    +
    -
    + ); } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return ( -
    + {category} -
    {_.map(pkgs, pkg => this._renderPackage(pkg))}
    -
    + {_.map(pkgs, pkg => this._renderPackage(pkg))} + ); } private _renderPackage(pkg: Package): React.ReactNode { const id = sharedUtils.getIdFromName(pkg.link.title); return ( -
    + -
    -
    + + { {pkg.link.title} -
    -
    - -
    -
    + + + + + + + { type={pkg.link.type} shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} > -
    -
    {this.props.translate.get(Key.More, Deco.Cap)}
    + + {this.props.translate.get(Key.More, Deco.Cap)} -
    +     -
    -
    -
    + + +     ); } -- cgit v1.2.3 From 85045267fe0643ab7f2af324df6135141aa8edb1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 4 Oct 2018 19:26:50 +0100 Subject: remove stray logs --- packages/website/ts/pages/documentation/home.tsx | 1 - packages/website/ts/pages/wiki/wiki.tsx | 1 - 2 files changed, 2 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index b95aa17f8..a8788aea7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -425,7 +425,6 @@ export class Home extends React.Component { pkg => pkg.link, ), }; - console.log('sectionNameToLinks', sectionNameToLinks); return ( { const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} : this._getSectionNameToLinks(this.state.articlesBySection); - console.log('sectionNameToLinks', sectionNameToLinks); const mainContainersStyle: React.CSSProperties = { ...styles.mainContainers, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', -- cgit v1.2.3 From 60ba8d57d45aedde7a08e4638215453f899b8e0d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 10:13:19 +0100 Subject: Fix react warning --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 0e6a06a3b..709d0ace9 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -8,7 +8,7 @@ import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; -import { Link } from './Link'; +import { Link } from './link'; import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { -- cgit v1.2.3 From 055763cceb9951b038b07488ddc7ae35210f1efe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 11:13:33 +0100 Subject: Fix bug where wiki links in dev dropdown weren't working when on the wiki --- packages/react-shared/src/components/link.tsx | 154 +++++++++++---------- .../components/dropdowns/developers_drop_down.tsx | 16 ++- packages/website/ts/components/top_bar/top_bar.tsx | 1 + 3 files changed, 93 insertions(+), 78 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 6200bfbd3..7b22dc4fa 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -18,84 +18,94 @@ export interface LinkProps { containerId?: string; } +export interface LinkState {} + /** * A generic link component which let's the developer render internal, external and scroll-to-hash links, and * their associated behaviors with a single link component. Many times we want a menu including a combination of * internal, external and scroll links and the abstraction of the differences of rendering each types of link * makes it much easier to do so. */ -export const Link: React.StatelessComponent = ({ - style, - className, - type, - to, - shouldOpenInNewTab, - children, - onMouseOver, - onMouseLeave, - onMouseEnter, - containerId, -}) => { - const styleWithDefault = { - textDecoration: 'none', - ...style, +export class Link extends React.Component { + public static defaultProps: Partial = { + type: LinkType.ReactRoute, + shouldOpenInNewTab: false, + style: {}, + className: '', + onMouseOver: _.noop.bind(_), + onMouseLeave: _.noop.bind(_), + onMouseEnter: _.noop.bind(_), + containerId: constants.DOCS_CONTAINER_ID, }; - - switch (type) { - case LinkType.External: - return ( - - {children} - - ); - case LinkType.ReactRoute: - return ( - - {children} - - ); - case LinkType.ReactScroll: - return ( - - {children} - - ); - default: - throw new Error(`Unrecognized LinkType: ${type}`); + private _outerReactScrollSpan: HTMLSpanElement | null; + constructor(props: LinkProps) { + super(props); + this._outerReactScrollSpan = null; } -}; - -Link.defaultProps = { - type: LinkType.ReactRoute, - shouldOpenInNewTab: false, - style: {}, - className: '', - onMouseOver: _.noop.bind(_), - onMouseLeave: _.noop.bind(_), - onMouseEnter: _.noop.bind(_), - containerId: constants.DOCS_CONTAINER_ID, -}; + public render(): React.ReactNode { + const styleWithDefault = { + textDecoration: 'none', + cursor: 'pointer', + ...this.props.style, + }; -Link.displayName = 'Link'; + switch (this.props.type) { + case LinkType.External: + return ( + + {this.props.children} + + ); + case LinkType.ReactRoute: + return ( + + {this.props.children} + + ); + case LinkType.ReactScroll: + return ( + (this._outerReactScrollSpan = input)}> + + + {this.props.children} + + + + ); + default: + throw new Error(`Unrecognized LinkType: ${this.props.type}`); + } + } + // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. + // We do however rely on these events being propagated in certain scenarios (e.g when the link + // is within a dropdown we want to close upon being clicked). Because of this, we registry the + // click event of an inner span, and pass it around the react-scroll link to an outer span. + private _onClickPropagateClickEventAroundScrollLink(): void { + if (!_.isNull(this._outerReactScrollSpan)) { + this._outerReactScrollSpan.click(); + } + } +} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 6133c8b4d..ac1d82c75 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -64,6 +64,7 @@ const usefulLinksToLinkInfo: ALink[] = [ ]; interface DevelopersDropDownProps { + location: Location; translate: Translate; menuItemStyles: React.CSSProperties; menuIconStyle: React.CSSProperties; @@ -165,17 +166,20 @@ export class DevelopersDropDown extends React.Component { + const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#'); + const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki; + let to = link.to; + let type = link.type; + if (isWikiLink && isOnWiki) { + to = `${link.to.split('#')[1]}`; + type = LinkType.ReactScroll; + } i++; const isLast = i === numLinks; const linkText = this.props.translate.get(link.title as Key, Deco.Cap); return (
    - + {linkText}
    diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index e25c0a0f7..d05b72d98 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -161,6 +161,7 @@ export class TopBar extends React.Component {
    Date: Fri, 5 Oct 2018 11:46:35 +0100 Subject: Render paragraphs with spans so we don't get margin added --- packages/website/ts/pages/documentation/home.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a8788aea7..7e34136a8 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -572,6 +572,7 @@ export class Home extends React.Component { source={pkg.description} renderers={{ link: MarkdownLinkBlock, + paragraph: 'span', }} /> -- cgit v1.2.3 From e7de4b953fe8aaefee9c043679b021a485dc6dee Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 11:51:52 +0100 Subject: Apply props to all link variants when possible --- packages/react-shared/src/components/link.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 7b22dc4fa..ee55cc642 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -80,13 +80,19 @@ export class Link extends React.Component { ); case LinkType.ReactScroll: return ( - (this._outerReactScrollSpan = input)}> + (this._outerReactScrollSpan = input)} + onMouseOver={this.props.onMouseOver} + onMouseEnter={this.props.onMouseEnter} + onMouseLeave={this.props.onMouseLeave} + > -- cgit v1.2.3 From f7aee9c7a9df36e20888c10616a249c2a79ed749 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 12:00:24 +0100 Subject: Remove containerId option and throw if passing in shouldOpenInNewTab with type ReactScroll --- packages/react-shared/src/components/link.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index ee55cc642..e8a13d506 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -6,7 +6,7 @@ import { Link as ScrollLink } from 'react-scroll'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; -export interface LinkProps { +interface LinkProps { to: string; type?: LinkType; shouldOpenInNewTab?: boolean; @@ -15,7 +15,6 @@ export interface LinkProps { onMouseOver?: (event: React.MouseEvent) => void; onMouseLeave?: (event: React.MouseEvent) => void; onMouseEnter?: (event: React.MouseEvent) => void; - containerId?: string; } export interface LinkState {} @@ -35,7 +34,6 @@ export class Link extends React.Component { onMouseOver: _.noop.bind(_), onMouseLeave: _.noop.bind(_), onMouseEnter: _.noop.bind(_), - containerId: constants.DOCS_CONTAINER_ID, }; private _outerReactScrollSpan: HTMLSpanElement | null; constructor(props: LinkProps) { @@ -43,6 +41,10 @@ export class Link extends React.Component { this._outerReactScrollSpan = null; } public render(): React.ReactNode { + if (this.props.type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) { + throw new Error(`Cannot open LinkType.ReactScroll links in new tab. link.to: ${this.props.to}`); + } + const styleWithDefault = { textDecoration: 'none', cursor: 'pointer', @@ -91,7 +93,7 @@ export class Link extends React.Component { offset={0} hashSpy={true} duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={this.props.containerId} + containerId={constants.DOCS_CONTAINER_ID} className={this.props.className} style={styleWithDefault} > -- cgit v1.2.3 From e0355a2e395fc056fd1d5c5e1780784853546acd Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 12:03:15 +0100 Subject: Rename scroll container --- packages/react-docs/src/components/type.tsx | 2 +- packages/react-shared/src/components/anchor_title.tsx | 2 +- packages/react-shared/src/components/link.tsx | 2 +- .../react-shared/src/components/nested_sidebar_menu.tsx | 14 ++------------ packages/react-shared/src/utils/constants.ts | 3 +-- 5 files changed, 6 insertions(+), 17 deletions(-) (limited to 'packages') diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 5c018f5dd..2e0003198 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -228,7 +228,7 @@ export const Type: React.SFC = (props: TypeProps): any => { offset={0} hashSpy={true} duration={sharedConstants.DOCS_SCROLL_DURATION_MS} - containerId={sharedConstants.DOCS_CONTAINER_ID} + containerId={sharedConstants.SCROLL_CONTAINER_ID} > {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? ( {typeName} diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index 8f7e4af27..a83881b67 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -71,7 +71,7 @@ export class AnchorTitle extends React.Component { offset={0} hashSpy={true} duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} + containerId={constants.SCROLL_CONTAINER_ID} className={this.props.className} style={styleWithDefault} > diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 709d0ace9..0bc516223 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,12 +94,7 @@ export class NestedSidebarMenu extends React.Component - + - + Date: Fri, 5 Oct 2018 13:54:37 +0100 Subject: Remove style prop from Link --- packages/react-docs/src/components/source_link.tsx | 8 ++--- packages/react-shared/src/components/link.tsx | 12 ++++--- .../ts/components/documentation/docs_logo.tsx | 8 ++--- .../ts/components/documentation/docs_top_bar.tsx | 6 ++-- .../components/dropdowns/developers_drop_down.tsx | 21 ++++------- packages/website/ts/components/fill_order.tsx | 2 +- packages/website/ts/components/footer.tsx | 7 +--- .../ts/components/inputs/token_amount_input.tsx | 3 +- .../ts/components/top_bar/top_bar_menu_item.tsx | 2 +- .../website/ts/components/ui/custom_menu_item.tsx | 3 +- packages/website/ts/pages/about/about.tsx | 2 +- packages/website/ts/pages/documentation/home.tsx | 41 ++++++++++++---------- packages/website/ts/pages/landing/landing.tsx | 5 +-- 13 files changed, 56 insertions(+), 64 deletions(-) (limited to 'packages') diff --git a/packages/react-docs/src/components/source_link.tsx b/packages/react-docs/src/components/source_link.tsx index 3096ad8d5..c6dd09adb 100644 --- a/packages/react-docs/src/components/source_link.tsx +++ b/packages/react-docs/src/components/source_link.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import { Source } from '@0xproject/types'; import * as React from 'react'; @@ -13,9 +13,9 @@ export const SourceLink = (props: SourceLinkProps) => { const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`; return (
    - - Source - + + {'Source'} +
    ); }; diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 51ffa1e1d..60891dd7a 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -10,11 +10,12 @@ interface LinkProps { to: string; type?: LinkType; shouldOpenInNewTab?: boolean; - style?: React.CSSProperties; className?: string; onMouseOver?: (event: React.MouseEvent) => void; onMouseLeave?: (event: React.MouseEvent) => void; onMouseEnter?: (event: React.MouseEvent) => void; + textDecoration?: string; + fontColor?: string; } export interface LinkState {} @@ -29,11 +30,12 @@ export class Link extends React.Component { public static defaultProps: Partial = { type: LinkType.ReactRoute, shouldOpenInNewTab: false, - style: {}, className: '', onMouseOver: _.noop.bind(_), onMouseLeave: _.noop.bind(_), onMouseEnter: _.noop.bind(_), + textDecoration: 'none', + fontColor: 'inherit', }; private _outerReactScrollSpan: HTMLSpanElement | null; constructor(props: LinkProps) { @@ -46,11 +48,13 @@ export class Link extends React.Component { } const styleWithDefault = { - textDecoration: 'none', + textDecoration: this.props.textDecoration, cursor: 'pointer', - ...this.props.style, + color: this.props.fontColor, }; + console.log('styleWithDefault', styleWithDefault); + switch (this.props.type) { case LinkType.External: return ( diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx index 6f3c3c6e8..b727fea36 100644 --- a/packages/website/ts/components/documentation/docs_logo.tsx +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -9,11 +9,9 @@ export interface DocsLogoProps { export const DocsLogo: React.StatelessComponent = props => { return ( -
    - - - -
    + + + ); }; diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 3fea1c714..0b563a76b 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -68,7 +68,7 @@ export class DocsTopBar extends React.Component @@ -86,7 +86,9 @@ export class DocsTopBar extends React.Component - + + + {this._renderLinkSection(usefulLinksToLinkInfo)}
    - +
    {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} @@ -159,10 +154,6 @@ export class DevelopersDropDown extends React.Component { @@ -179,8 +170,10 @@ export class DevelopersDropDown extends React.Component - - {linkText} + + + {linkText} +
    ); diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 99939ce43..c1bbadfde 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -323,7 +323,7 @@ export class FillOrder extends React.Component { return (
    Order successfully filled. See the trade details in your{' '} - + trade history
    diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 02770c073..d90f2f708 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -12,11 +12,6 @@ import { Translate } from 'ts/utils/translate'; const ICON_DIMENSION = 16; -const linkStyle = { - color: colors.white, - cursor: 'pointer', -}; - const languageToMenuTitle = { [Language.English]: 'English', [Language.Russian]: 'Русский', @@ -187,7 +182,7 @@ export class Footer extends React.Component { const iconIfExists = titleToIcon[link.title]; return (
    - +
    {!_.isUndefined(iconIfExists) ? (
    diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 562f670e2..134d1cc76 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -111,7 +111,8 @@ export class TokenAmountInput extends React.Component Set allowance diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index d5ee96850..c88db95fa 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -37,7 +37,7 @@ export class TopBarMenuItem extends React.Component - + {itemContent}
    diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx index 11f61b336..c25da6be6 100644 --- a/packages/website/ts/components/ui/custom_menu_item.tsx +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; interface CustomMenuItemProps { to: string; - style?: React.CSSProperties; onClick?: () => void; className?: string; } @@ -30,7 +29,7 @@ export class CustomMenuItem extends React.Component +
    { }} > We are seeking outstanding candidates to{' '} - + join our team . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7e34136a8..abe0ae6af 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -446,12 +446,14 @@ export class Home extends React.Component { - + + +
    { @@ -578,23 +580,24 @@ export class Home extends React.Component { - - - {this.props.translate.get(Key.More, Deco.Cap)} - - + + + + {this.props.translate.get(Key.More, Deco.Cap)} + + + - - + + diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index c819cd8a1..395cdabf8 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -317,10 +317,7 @@ export class Landing extends React.Component { }} > {this.props.translate.get(Key.FullListPrompt)}{' '} - + {this.props.translate.get(Key.FullListLink)}
    -- cgit v1.2.3 From fa6bd348992674192d07fef3d60950980212ecbb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 14:55:28 +0100 Subject: Remove type prop and instead infer it from the value of to --- .../react-docs/src/components/documentation.tsx | 23 ++++++++++++---------- packages/react-docs/src/components/type.tsx | 11 +++-------- packages/react-docs/src/docs_info.ts | 5 +---- packages/react-shared/src/components/link.tsx | 22 ++++++++++++++------- .../src/components/markdown_section.tsx | 13 ++++++------ .../src/components/nested_sidebar_menu.tsx | 4 ++-- packages/react-shared/src/index.ts | 2 +- packages/react-shared/src/types.ts | 1 - packages/website/package.json | 2 ++ .../components/dialogs/blockchain_err_dialog.tsx | 2 +- .../components/dropdowns/developers_drop_down.tsx | 10 +++------- packages/website/ts/components/footer.tsx | 23 +++++++++++++--------- packages/website/ts/components/top_bar/top_bar.tsx | 16 ++++----------- .../ts/components/top_bar/top_bar_menu_item.tsx | 7 ++++--- packages/website/ts/pages/documentation/home.tsx | 21 -------------------- packages/website/ts/pages/wiki/wiki.tsx | 2 -- 16 files changed, 69 insertions(+), 95 deletions(-) (limited to 'packages') diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx index de2ccca8b..6a08d50e0 100644 --- a/packages/react-docs/src/components/documentation.tsx +++ b/packages/react-docs/src/components/documentation.tsx @@ -2,6 +2,7 @@ import { colors, constants as sharedConstants, EtherscanLinkSuffixes, + Link, MarkdownSection, NestedSidebarMenu, Networks, @@ -319,9 +320,9 @@ export class Documentation extends React.Component {`import { `} - + {exportName} - + {` } from '${this.props.docsInfo.packageName}'`}
    @@ -350,14 +351,16 @@ export class Documentation extends React.Component - - +
    + + + +
    ); }, ); diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx index 2e0003198..1ae1324c6 100644 --- a/packages/react-docs/src/components/type.tsx +++ b/packages/react-docs/src/components/type.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, constants as sharedConstants, Link, utils as sharedUtils } from '@0xproject/react-shared'; import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types'; import { errorUtils } from '@0xproject/utils'; import * as _ from 'lodash'; @@ -205,14 +205,9 @@ export const Type: React.SFC = (props: TypeProps): any => { const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined; if (!_.isUndefined(typeNameUrlIfExists)) { typeName = ( - + {typeName} - + ); } else if ( (isReference || isArray) && diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts index f3bdf4964..549106c77 100644 --- a/packages/react-docs/src/docs_info.ts +++ b/packages/react-docs/src/docs_info.ts @@ -1,4 +1,4 @@ -import { ALink, LinkType, utils as sharedUtils } from '@0xproject/react-shared'; +import { ALink, utils as sharedUtils } from '@0xproject/react-shared'; import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types'; import * as _ from 'lodash'; @@ -62,7 +62,6 @@ export class DocsInfo { return { to: `${sectionName}-${typeName}`, title: typeName, - type: LinkType.ReactScroll, }; }); subsectionNameToLinks[sectionName] = typeLinks; @@ -86,7 +85,6 @@ export class DocsInfo { return { to: `${sectionName}-${name}`, title: name, - type: LinkType.ReactScroll, }; }); @@ -114,7 +112,6 @@ export class DocsInfo { links.push({ title: linkTitle, to, - type: LinkType.ReactScroll, }); }); }); diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 60891dd7a..05ca93cc5 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -2,13 +2,13 @@ import * as _ from 'lodash'; import * as React from 'react'; import { Link as ReactRounterLink } from 'react-router-dom'; import { Link as ScrollLink } from 'react-scroll'; +import * as validUrl from 'valid-url'; import { LinkType } from '../types'; import { constants } from '../utils/constants'; interface LinkProps { to: string; - type?: LinkType; shouldOpenInNewTab?: boolean; className?: string; onMouseOver?: (event: React.MouseEvent) => void; @@ -28,7 +28,6 @@ export interface LinkState {} */ export class Link extends React.Component { public static defaultProps: Partial = { - type: LinkType.ReactRoute, shouldOpenInNewTab: false, className: '', onMouseOver: _.noop.bind(_), @@ -43,7 +42,18 @@ export class Link extends React.Component { this._outerReactScrollSpan = null; } public render(): React.ReactNode { - if (this.props.type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) { + let type: LinkType; + const isReactRoute = _.startsWith(this.props.to, '/'); + const isExternal = validUrl.isWebUri(this.props.to) || _.startsWith(this.props.to, 'mailto:'); + if (isReactRoute) { + type = LinkType.ReactRoute; + } else if (isExternal) { + type = LinkType.External; + } else { + type = LinkType.ReactScroll; + } + + if (type === LinkType.ReactScroll && this.props.shouldOpenInNewTab) { throw new Error(`Cannot open LinkType.ReactScroll links in new tab. link.to: ${this.props.to}`); } @@ -53,9 +63,7 @@ export class Link extends React.Component { color: this.props.fontColor, }; - console.log('styleWithDefault', styleWithDefault); - - switch (this.props.type) { + switch (type) { case LinkType.External: return ( { ); default: - throw new Error(`Unrecognized LinkType: ${this.props.type}`); + throw new Error(`Unrecognized LinkType: ${type}`); } } // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 09b214548..e84d2b078 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,6 +8,7 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { AnchorTitle } from './anchor_title'; +import { Link } from './link'; import { MarkdownCodeBlock } from './markdown_code_block'; import { MarkdownLinkBlock } from './markdown_link_block'; @@ -63,13 +64,11 @@ export class MarkdownSection extends React.Component
    diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 0bc516223..7f5e16f01 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -94,7 +94,7 @@ export class NestedSidebarMenu extends React.Component - + - + - + {linkText} diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index d90f2f708..f11ecae19 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,4 +1,4 @@ -import { ALink, colors, Link, LinkType } from '@0xproject/react-shared'; +import { ALink, colors, Link } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; @@ -54,7 +54,7 @@ export class Footer extends React.Component { { title: this.props.translate.get(Key.Whitepaper, Deco.Cap), to: WebsitePaths.Whitepaper, - type: LinkType.External, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Wiki, Deco.Cap), @@ -68,28 +68,28 @@ export class Footer extends React.Component { [Key.Community]: [ { title: this.props.translate.get(Key.RocketChat, Deco.Cap), - type: LinkType.External, to: constants.URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Blog, Deco.Cap), - type: LinkType.External, to: constants.URL_BLOG, + shouldOpenInNewTab: true, }, { title: 'Twitter', - type: LinkType.External, to: constants.URL_TWITTER, + shouldOpenInNewTab: true, }, { title: 'Reddit', - type: LinkType.External, to: constants.URL_REDDIT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), - type: LinkType.External, to: constants.URL_DISCOURSE_FORUM, + shouldOpenInNewTab: true, }, ], [Key.Organization]: [ @@ -103,8 +103,8 @@ export class Footer extends React.Component { }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - type: LinkType.External, to: 'mailto:team@0xproject.com', + shouldOpenInNewTab: true, }, ], }; @@ -182,7 +182,12 @@ export class Footer extends React.Component { const iconIfExists = titleToIcon[link.title]; return (
    - +
    {!_.isUndefined(iconIfExists) ? (
    diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index d05b72d98..3297befad 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,13 +1,5 @@ import { DocsInfo } from '@0xproject/react-docs'; -import { - ALink, - colors, - constants as sharedConstants, - Link, - LinkType, - NestedSidebarMenu, - Styles, -} from '@0xproject/react-shared'; +import { ALink, colors, constants as sharedConstants, Link, NestedSidebarMenu, Styles } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; @@ -177,7 +169,7 @@ export class TopBar extends React.Component { path={constants.URL_BLOG} style={styles.menuItem} isNightVersion={isNightVersion} - linkType={LinkType.External} + shouldOpenInNewTab={true} /> { )} - + {this.props.translate.get(Key.Whitepaper, Deco.Cap)} @@ -294,7 +286,7 @@ export class TopBar extends React.Component { {this.props.translate.get(Key.Careers, Deco.Cap)} - + {this.props.translate.get(Key.Blog, Deco.Cap)} diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index c88db95fa..eff5ba66d 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -1,4 +1,4 @@ -import { colors, Link, LinkType } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; @@ -12,7 +12,7 @@ interface TopBarMenuItemProps { title: string; path?: string; isPrimary?: boolean; - linkType: LinkType; + shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; isNightVersion?: boolean; @@ -25,6 +25,7 @@ export class TopBarMenuItem extends React.Component - + {itemContent}
    diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index abe0ae6af..f7c4839b4 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -3,7 +3,6 @@ import { colors, constants as sharedConstants, Link, - LinkType, MarkdownLinkBlock, NestedSidebarMenu, utils as sharedUtils, @@ -89,7 +88,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x starter project', to: 'https://github.com/0xProject/0x-starter-project', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -144,7 +142,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '@0xproject/sra-spec', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', shouldOpenInNewTab: true, - type: LinkType.External, }, }, ], @@ -156,7 +153,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'abi-gen', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -213,7 +209,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x Event Extractor', to: 'https://github.com/0xTracker/0x-event-extractor', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -223,7 +218,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x Tracker Worker', to: 'https://github.com/0xTracker/0x-tracker-worker', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -233,7 +227,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Aquaduct', to: 'https://www.npmjs.com/package/aqueduct', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -243,7 +236,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Aquaduct Server SDK', to: 'https://github.com/ERCdEX/aqueduct-server-sdk', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -252,7 +244,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://www.npmjs.com/package/ddex-api', title: 'DDEX Node.js SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -261,7 +252,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/widget', title: 'ERCdex Widget', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -270,7 +260,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/java', title: 'ERCdex Java SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -279,7 +268,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/python', title: 'ERCdex Python SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -289,7 +277,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Massive', to: 'https://github.com/NoteGio/massive', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -298,7 +285,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/NoteGio/openrelay', title: 'OpenRelay', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -308,7 +294,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'OpenRelay.js', to: 'https://github.com/NoteGio/openrelay.js', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -318,7 +303,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Radar SDK', to: 'https://github.com/RadarRelay/sdk', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -328,7 +312,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'The Ocean Javascript SDK', to: 'https://github.com/TheOceanTrade/theoceanx-javascript', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -337,7 +320,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://www.npmjs.com/package/tokenlon-sdk', title: 'Tokenlon Javascript SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -346,7 +328,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/wildnothing/asset-data-decoder', title: 'AssetData decoder library in Java', shouldOpenInNewTab: true, - type: LinkType.External, }, }, ], @@ -560,7 +541,6 @@ export class Home extends React.Component { @@ -584,7 +564,6 @@ export class Home extends React.Component { diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 230fff410..70f54aceb 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -3,7 +3,6 @@ import { colors, constants as sharedConstants, HeaderSizes, - LinkType, MarkdownSection, NestedSidebarMenu, Styles, @@ -234,7 +233,6 @@ export class Wiki extends React.Component { return { to: sharedUtils.getIdFromName(article.title), title: article.title, - type: LinkType.ReactScroll, }; }); sectionNameToLinks[sectionName] = articleLinks; -- cgit v1.2.3 From ded6742ddd70e295f15dab6363c935777a6a5588 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 15:06:59 +0100 Subject: remove inline style --- packages/website/ts/components/documentation/docs_top_bar.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index 0b563a76b..f95dbb5e1 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -115,14 +115,11 @@ export class DocsTopBar extends React.Component
    - {menuItemInfo.title} + {menuItemInfo.title}
    -- cgit v1.2.3 From df7210163ad2835dcb6e461da173d1873d3195d4 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 15:33:15 +0100 Subject: Convert more divs to containers and text components --- .../ts/components/documentation/docs_top_bar.tsx | 22 ++++-- .../components/dropdowns/developers_drop_down.tsx | 86 +++++++++------------- packages/website/ts/components/ui/container.tsx | 2 + packages/website/ts/components/ui/text.tsx | 4 + 4 files changed, 57 insertions(+), 57 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx index f95dbb5e1..9a2146f9c 100644 --- a/packages/website/ts/components/documentation/docs_top_bar.tsx +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -24,7 +24,8 @@ interface MenuItemInfo { title: string; url: string; iconUrl: string; - textStyle: React.CSSProperties; + fontColor: string; + fontWeight?: string; } export class DocsTopBar extends React.Component { @@ -47,19 +48,20 @@ export class DocsTopBar extends React.Component -
    - {menuItemInfo.title} -
    + + + {menuItemInfo.title} + +     ); diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index 8a5ad53e2..df5dc173d 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -91,63 +91,50 @@ export class DevelopersDropDown extends React.Component + {this._renderTitle('Getting started')} -
    -
    {this._renderLinkSection(gettingStartedKeyToLinkInfo1)}
    -
    {this._renderLinkSection(gettingStartedKeyToLinkInfo2)}
    -
    + + + {this._renderLinkSection(gettingStartedKeyToLinkInfo1)} + + {this._renderLinkSection(gettingStartedKeyToLinkInfo2)} + +     + + + + {this._renderTitle('Popular docs')} + {this._renderLinkSection(popularDocsToLinkInfos)} + + + {this._renderTitle('Useful links')} + {this._renderLinkSection(usefulLinksToLinkInfo)} + -
    -
    -
    -
    {this._renderTitle('Popular docs')}
    -
    {this._renderLinkSection(popularDocsToLinkInfos)}
    -
    -
    -
    {this._renderTitle('Useful links')}
    -
    {this._renderLinkSection(usefulLinksToLinkInfo)}
    -
    -
    -
    - {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} -
    + + {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} + + -
    +     ); return dropdownMenu; } private _renderTitle(title: string): React.ReactNode { return ( -
    - {title.toUpperCase()} -
    + + + {title.toUpperCase()} + + ); } private _renderLinkSection(links: ALink[]): React.ReactNode { @@ -157,7 +144,6 @@ export class DevelopersDropDown extends React.Component + {linkText} -
    + ); }); - return
    {renderLinks}
    ; + return {renderLinks}; } } diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 782ab3b6f..ece077563 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -17,6 +17,8 @@ export interface ContainerProps { backgroundColor?: string; background?: string; borderRadius?: StringOrNum; + borderBottomLeftRadius?: StringOrNum; + borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index cd8f290e3..4415962b1 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -19,7 +19,9 @@ export interface TextProps { textDecorationLine?: string; onClick?: (event: React.MouseEvent) => void; hoverColor?: string; + letterSpacing?: string | number; noWrap?: boolean; + textAlign?: string; display?: string; } @@ -34,6 +36,8 @@ export const Text = styled(PlainText)` font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-align: ${props => props.textAlign}; + letter-spacing: ${props => props.letterSpacing}; text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; -- cgit v1.2.3 From a5d0066d0016056ca0d01ad8bebef76b35848280 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:28:03 +0100 Subject: Convert TutorialButton to styled component --- .../components/documentation/tutorial_button.tsx | 109 +++++++++------------ 1 file changed, 45 insertions(+), 64 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index a0d99e175..9c13ec732 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -1,79 +1,60 @@ import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; +import { darken, saturate } from 'polished'; +import { styled } from 'ts/style/theme'; + export interface TutorialButtonProps { + className?: string; translate: Translate; tutorialInfo: TutorialInfo; } -export interface TutorialButtonState { - isHovering: boolean; -} - -export class TutorialButton extends React.Component { - constructor(props: TutorialButtonProps) { - super(props); - this.state = { - isHovering: false, - }; - } - public render(): React.ReactNode { - return ( - -
    -
    - -
    -
    - - {this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)} - - - {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)} - -
    -
    -
    - -
    +const PlainTutorialButton: React.StatelessComponent = ({ translate, tutorialInfo, className }) => ( + + +
    +
    + +
    +
    + + {translate.get(tutorialInfo.link.title as Key, Deco.Cap)} + + + {translate.get(tutorialInfo.description as Key, Deco.Cap)} + +
    +
    +
    +
    - - ); - } - private _onHover(_event: React.FormEvent): void { - if (this.state.isHovering) { - return; - } - this.setState({ - isHovering: true, - }); - } - private _onHoverOff(): void { - this.setState({ - isHovering: false, - }); +
    + +     +); + +export const TutorialButton = styled(PlainTutorialButton)` + border-radius: 4px; + border: 1px solid ${colors.grey325}; + background-color: ${colors.white}; + &:hover { + border: 1px solid ${colors.lightLinkBlue}; + background-color: ${colors.lightestBlue}; } -} + padding: 20px; + margin-bottom: 15px; +`; + +TutorialButton.defaultProps = {}; + +TutorialButton.displayName = 'TutorialButton'; -- cgit v1.2.3 From 03bfc7dd404c1ec9e4a2587d28014d3117f0e66a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:34:46 +0100 Subject: Fix liinter --- packages/website/ts/components/dialogs/blockchain_err_dialog.tsx | 2 +- packages/website/ts/components/documentation/tutorial_button.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index d50fd6592..18c060991 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -1,4 +1,4 @@ -import { colors, Link, Networks } from '@0xproject/react-shared'; +import { colors, Networks } from '@0xproject/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx index 9c13ec732..dc00bf743 100644 --- a/packages/website/ts/components/documentation/tutorial_button.tsx +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -6,7 +6,6 @@ import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; -import { darken, saturate } from 'polished'; import { styled } from 'ts/style/theme'; export interface TutorialButtonProps { -- cgit v1.2.3 From 3ce665eeabb9fc75dd50847304242de096e54d46 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:58:22 +0100 Subject: Fix comment --- packages/react-shared/src/components/link.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx index 05ca93cc5..5a456109b 100644 --- a/packages/react-shared/src/components/link.tsx +++ b/packages/react-shared/src/components/link.tsx @@ -121,7 +121,7 @@ export class Link extends React.Component { } // HACK(fabio): For some reason, the react-scroll link decided to stop the propagation of click events. // We do however rely on these events being propagated in certain scenarios (e.g when the link - // is within a dropdown we want to close upon being clicked). Because of this, we registry the + // is within a dropdown we want to close upon being clicked). Because of this, we register the // click event of an inner span, and pass it around the react-scroll link to an outer span. private _onClickPropagateClickEventAroundScrollLink(): void { if (!_.isNull(this._outerReactScrollSpan)) { -- cgit v1.2.3 From 2966ab12e009ed214978b1fd9209fc13cc7d3630 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:58:34 +0100 Subject: Move valid-url import to react-shared --- packages/react-shared/package.json | 4 +++- packages/website/package.json | 2 -- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json index 5629ec915..490933fb3 100644 --- a/packages/react-shared/package.json +++ b/packages/react-shared/package.json @@ -44,6 +44,7 @@ "@types/react-dom": "*", "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", + "@types/valid-url": "^1.0.2", "basscss": "^8.0.3", "change-case": "^3.0.2", "is-mobile": "^0.2.2", @@ -54,7 +55,8 @@ "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162", "react-markdown": "^3.2.2", "react-scroll": "0xproject/react-scroll#similar-to-pr-330", - "react-router-dom": "^4.1.1" + "react-router-dom": "^4.1.1", + "valid-url": "^1.0.9" }, "publishConfig": { "access": "public" diff --git a/packages/website/package.json b/packages/website/package.json index 89135b4f9..3073eca72 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -62,7 +62,6 @@ "styled-components": "^3.3.0", "thenby": "^1.2.3", "truffle-contract": "2.0.1", - "valid-url": "^1.0.9", "web3-provider-engine": "14.0.6", "xml-js": "^1.6.4" }, @@ -85,7 +84,6 @@ "@types/react-scroll": "1.5.3", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", - "@types/valid-url": "^1.0.2", "@types/web3-provider-engine": "^14.0.0", "awesome-typescript-loader": "^5.2.1", "copyfiles": "^2.0.0", -- cgit v1.2.3 From 6cc9631ef6458d88249a5abd5c7c5ee7b3614e62 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 17:58:54 +0100 Subject: remove unused import --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 7f5e16f01..5b6076df6 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { ALink, Styles } from '../types'; import { colors } from '../utils/colors'; -import { constants } from '../utils/constants'; import { utils } from '../utils/utils'; import { Link } from './link'; -- cgit v1.2.3