merge

2018-10-01 13:11:27 +01:00
parent ac14dd2b29 fe38adfa08
commit e7ab9938ce
12 changed files with 253 additions and 129 deletions
--- a/packages/react-shared/src/utils/colors.ts
+++ b/packages/react-shared/src/utils/colors.ts
@@ -8,6 +8,7 @@ const baseColors = {
    greyishPink: '#E6E5E5',
    grey300: '#E0E0E0',
    beigeWhite: '#E4E4E4',
+    lightBgGrey: '#EDEDED',
    grey350: '#cacaca',
    grey400: '#BDBDBD',
    lightGrey: '#BBBBBB',
@@ -15,6 +16,7 @@ const baseColors = {
    grey: '#A5A5A5',
    darkGrey: '#818181',
    landingLinkGrey: '#919191',
+    linkSectionGrey: '#999999',
    grey700: '#616161',
    grey750: '#515151',
    grey800: '#424242',
--- a/packages/website/translations/chinese.json
+++ b/packages/website/translations/chinese.json
@@ -78,5 +78,12 @@
    "WEBSITE": "网站",
    "DEVELOPERS": "首页",
    "HOME": "Rocket.chat",
-    "ROCKETCHAT": "开发人员"
+    "ROCKETCHAT": "开发人员",
+    "BUILD_A_RELAYER": "build a relayer",
+    "ETHEREUM_DEVELOPMENT": "ethereum development",
+    "INTRO_TUTORIAL": "intro tutorial",
+    "TRADING_TUTORIAL": "trading tutorial",
+    "VIEW_ALL_DOCUMENTATION": "view all documentation",
+    "SANDBOX": "0x.js sandbox",
+    "GITHUB": "github"
 }
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -88,5 +88,12 @@
        "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.",
+    "BUILD_A_RELAYER": "build a relayer",
+    "ETHEREUM_DEVELOPMENT": "ethereum development",
+    "INTRO_TUTORIAL": "intro tutorial",
+    "TRADING_TUTORIAL": "trading tutorial",
+    "VIEW_ALL_DOCUMENTATION": "view all documentation",
+    "SANDBOX": "0x.js sandbox",
+    "GITHUB": "github"
+    }
--- a/packages/website/translations/korean.json
+++ b/packages/website/translations/korean.json
@@ -78,5 +78,12 @@
    "WEBSITE": "Website",
    "HOME": "홈",
    "ROCKETCHAT": "Rocket.chat",
-    "DEVELOPERS": "개발자"
+    "DEVELOPERS": "개발자",
+    "BUILD_A_RELAYER": "build a relayer",
+    "ETHEREUM_DEVELOPMENT": "ethereum development",
+    "INTRO_TUTORIAL": "intro tutorial",
+    "TRADING_TUTORIAL": "trading tutorial",
+    "VIEW_ALL_DOCUMENTATION": "view all documentation",
+    "SANDBOX": "0x.js sandbox",
+    "GITHUB": "github"
 }
--- a/packages/website/translations/russian.json
+++ b/packages/website/translations/russian.json
@@ -78,5 +78,12 @@
    "WEBSITE": "Веб-сайт",
    "DEVELOPERS": "Домашняя страница",
    "HOME": "Rocket.chat",
-    "ROCKETCHAT": "Для разработчиков"
+    "ROCKETCHAT": "Для разработчиков",
+    "BUILD_A_RELAYER": "build a relayer",
+    "ETHEREUM_DEVELOPMENT": "ethereum development",
+    "INTRO_TUTORIAL": "intro tutorial",
+    "TRADING_TUTORIAL": "trading tutorial",
+    "VIEW_ALL_DOCUMENTATION": "view all documentation",
+    "SANDBOX": "0x.js sandbox",
+    "GITHUB": "github"
 }
--- a/packages/website/translations/spanish.json
+++ b/packages/website/translations/spanish.json
@@ -79,5 +79,12 @@
    "WEBSITE": "website",
    "DEVELOPERS": "inicio",
    "HOME": "rocket.chat",
-    "ROCKETCHAT": "desarrolladores"
+    "ROCKETCHAT": "desarrolladores",
+    "BUILD_A_RELAYER": "build a relayer",
+    "ETHEREUM_DEVELOPMENT": "ethereum development",
+    "INTRO_TUTORIAL": "intro tutorial",
+    "TRADING_TUTORIAL": "trading tutorial",
+    "VIEW_ALL_DOCUMENTATION": "view all documentation",
+    "SANDBOX": "0x.js sandbox",
+    "GITHUB": "github"
 }
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -0,0 +1,188 @@
+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 { DropDown } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
+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;
+}
+
+const gettingStartedKeyToLinkInfo1: ObjectMap<LinkInfo> = {
+    [Key.BuildARelayer]: {
+        link: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+        shouldOpenNewTab: false,
+    },
+    [Key.IntroTutorial]: {
+        link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+        shouldOpenNewTab: false,
+    },
+};
+const gettingStartedKeyToLinkInfo2: ObjectMap<LinkInfo> = {
+    [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<LinkInfo> = {
+    [Key.ZeroExJs]: {
+        link: WebsitePaths.ZeroExJs,
+        shouldOpenNewTab: false,
+    },
+    [Key.Connect]: {
+        link: WebsitePaths.Connect,
+        shouldOpenNewTab: false,
+    },
+    [Key.SmartContract]: {
+        link: WebsitePaths.SmartContracts,
+        shouldOpenNewTab: false,
+    },
+};
+const usefulLinksToLinkInfo: ObjectMap<LinkInfo> = {
+    [Key.Github]: {
+        link: constants.URL_GITHUB_ORG,
+        shouldOpenNewTab: true,
+    },
+    [Key.Whitepaper]: {
+        link: WebsitePaths.Whitepaper,
+        shouldOpenNewTab: true,
+    },
+    [Key.Sandbox]: {
+        link: constants.URL_SANDBOX,
+        shouldOpenNewTab: true,
+    },
+};
+
+interface DevelopersDropDownProps {
+    translate: Translate;
+    menuItemStyles: React.CSSProperties;
+    menuIconStyle: React.CSSProperties;
+}
+
+interface DevelopersDropDownState {}
+
+export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> {
+    public render(): React.ReactNode {
+        const activeNode = (
+            <Container className="flex relative" paddingRight="10">
+                <Text fontColor={this.props.menuIconStyle.color}>
+                    {this.props.translate.get(Key.Developers, Deco.Cap)}
+                </Text>
+            </Container>
+        );
+        return (
+            <DropDown
+                activeNode={activeNode}
+                popoverContent={this._renderDropdownMenu()}
+                anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+                targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+                style={this.props.menuItemStyles}
+                popoverStyle={{ borderRadius: 4, width: 427, height: 373, marginTop: 10 }}
+            />
+        );
+    }
+    private _renderDropdownMenu(): React.ReactNode {
+        const dropdownMenu = (
+            <div>
+                <Container padding="1.75rem">
+                    {this._renderTitle('Getting started')}
+                    <div className="flex">
+                        <div className="pr4 mr2">{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}</div>
+                        <div>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</div>
+                    </div>
+                </Container>
+                <div
+                    style={{
+                        width: '100%',
+                        height: 1,
+                        backgroundColor: colors.grey300,
+                    }}
+                />
+                <div className="flex" style={{ padding: '1.75rem' }}>
+                    <div className="pr4 mr2">
+                        <div>{this._renderTitle('Popular docs')}</div>
+                        <div>{this._renderLinkSection(popularDocsToLinkInfos)}</div>
+                    </div>
+                    <div>
+                        <div>{this._renderTitle('Useful links')}</div>
+                        <div>{this._renderLinkSection(usefulLinksToLinkInfo)}</div>
+                    </div>
+                </div>
+                <div
+                    style={{
+                        padding: '0.8rem',
+                        textAlign: 'center',
+                        backgroundColor: colors.lightBgGrey,
+                        borderBottomLeftRadius: 4,
+                        borderBottomRightRadius: 4,
+                    }}
+                >
+                    <Link
+                        to={WebsitePaths.ZeroExJs}
+                        className="text-decoration-none"
+                        style={{
+                            color: colors.lightBlueA700,
+                            fontWeight: 'bold',
+                            fontSize: 14,
+                        }}
+                    >
+                        {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)}
+                    </Link>
+                </div>
+            </div>
+        );
+        return dropdownMenu;
+    }
+    private _renderTitle(title: string): React.ReactNode {
+        return (
+            <div
+                style={{
+                    color: colors.linkSectionGrey,
+                    fontSize: 14,
+                    paddingBottom: 12,
+                    fontWeight: 600,
+                    letterSpacing: 1,
+                }}
+            >
+                {title.toUpperCase()}
+            </div>
+        );
+    }
+    private _renderLinkSection(keyToLinkInfo: ObjectMap<LinkInfo>): React.ReactNode {
+        const linkStyle: React.CSSProperties = {
+            color: colors.lightBlueA700,
+            fontFamily: 'Roboto, Roboto Mono',
+        };
+        const numLinks = _.size(keyToLinkInfo);
+        let i = 0;
+        const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => {
+            i++;
+            const isLast = i === numLinks;
+            const linkText = this.props.translate.get(key as Key, Deco.CapWords);
+            return (
+                <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${key}`}>
+                    {linkInfo.shouldOpenNewTab ? (
+                        <a target="_blank" className="text-decoration-none" style={linkStyle} href={linkInfo.link}>
+                            {linkText}
+                        </a>
+                    ) : (
+                        <Link to={linkInfo.link} className="text-decoration-none" style={linkStyle}>
+                            {linkText}
+                        </Link>
+                    )}
+                </div>
+            );
+        });
+        return <div>{links}</div>;
+    }
+}
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -8,16 +8,15 @@ import {
 } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
-import Menu from 'material-ui/Menu';
 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 { DropDown } from 'ts/components/ui/drop_down';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -129,111 +128,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
            ? 'flex mx-auto items-center max-width-4'
            : 'flex mx-auto items-center';
        const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT;
-        const developerSectionMenuItems = [
-            <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" />
-            </Link>,
-            <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.SmartContract, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)}
-                />
-            </Link>,
-            <a
-                key="subMenuItem-standard-relayer-api"
-                target="_blank"
-                className="text-decoration-none"
-                href={constants.URL_STANDARD_RELAYER_API_GITHUB}
-            >
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)}
-                />
-            </a>,
-            <Link key="subMenuItem-jsonSchema" to={WebsitePaths.JSONSchemas} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.JsonSchemas, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-subproviders" to={WebsitePaths.Subproviders} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Subproviders, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)}
-                />
-            </Link>,
-            <Link
-                key="subMenuItem-contractWrappers"
-                to={WebsitePaths.ContractWrappers}
-                className="text-decoration-none"
-            >
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.ContractWrappers, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-orderUtils" to={WebsitePaths.OrderUtils} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-orderWatcher" to={WebsitePaths.OrderWatcher} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.OrderWatcher, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)}
-                />
-            </Link>,
-            <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none">
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)}
-                />
-            </Link>,
-            <a
-                key="subMenuItem-whitePaper"
-                target="_blank"
-                className="text-decoration-none"
-                href={`${WebsitePaths.Whitepaper}`}
-            >
-                <MenuItem
-                    style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)}
-                />
-            </a>,
-            <a
-                key="subMenuItem-github"
-                target="_blank"
-                className="text-decoration-none"
-                href={constants.URL_GITHUB_ORG}
-            >
-                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" />
-            </a>,
-        ];
        const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
        const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
        const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
@@ -245,15 +139,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
            color: isNightVersion ? 'white' : 'black',
            cursor: 'pointer',
        };
-        const activeNode = (
-            <div className="flex relative" style={{ color: menuIconStyle.color }}>
-                <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
-                <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
-                    <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
-                </div>
-            </div>
-        );
-        const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>;
        return (
            <div
                style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }}
@@ -273,12 +158,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                    {!this._isViewingPortal() && (
                        <div className={menuClasses}>
                            <div className="flex items-center justify-between">
-                                <DropDown
-                                    activeNode={activeNode}
-                                    popoverContent={popoverContent}
-                                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
-                                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
-                                    style={styles.menuItem}
+                                <DevelopersDropDown
+                                    menuItemStyles={styles.menuItem}
+                                    translate={this.props.translate}
+                                    menuIconStyle={menuIconStyle}
                                />
                                <TopBarMenuItem
                                    title={this.props.translate.get(Key.Wiki, Deco.Cap)}
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -21,6 +21,7 @@ export interface DropDownProps {
    zDepth?: number;
    activateEvent?: DropdownMouseEvent;
    closeEvent?: DropdownMouseEvent;
+    popoverStyle?: React.CSSProperties;
 }

 interface DropDownState {
@@ -34,6 +35,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
        zDepth: 1,
        activateEvent: DropdownMouseEvent.Hover,
        closeEvent: DropdownMouseEvent.Hover,
+        popoverStyle: {},
    };
    private _isHovering: boolean;
    private _popoverCloseCheckIntervalId: number;
@@ -77,6 +79,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
                    animated={false}
                    zDepth={this.props.zDepth}
+                    style={this.props.popoverStyle}
                >
                    <div
                        onMouseEnter={this._onHover.bind(this)}
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -458,6 +458,13 @@ export enum Key {
    RocketChat = 'ROCKETCHAT',
    TradeCallToAction = 'TRADE_CALL_TO_ACTION',
    OurMissionAndValues = 'OUR_MISSION_AND_VALUES',
+    BuildARelayer = 'BUILD_A_RELAYER',
+    EthereumDevelopment = 'ETHEREUM_DEVELOPMENT',
+    IntroTutorial = 'INTRO_TUTORIAL',
+    TradingTutorial = 'TRADING_TUTORIAL',
+    ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION',
+    Sandbox = 'SANDBOX',
+    Github = 'GITHUB',
 }

 export enum SmartContractDocSections {
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -84,6 +84,7 @@ export const constants = {
    URL_PARITY_CHROME_STORE:
        'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig',
    URL_REDDIT: 'https://reddit.com/r/0xproject',
+    URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j',
    URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
    URL_TWITTER: 'https://twitter.com/0xproject',
    URL_WETH_IO: 'https://weth.io/',
--- a/packages/website/ts/utils/translate.ts
+++ b/packages/website/ts/utils/translate.ts
@@ -80,7 +80,12 @@ export class Translate {

                case Deco.CapWords:
                    const words = text.split(' ');
-                    const capitalizedWords = _.map(words, w => this._capitalize(w));
+                    const capitalizedWords = _.map(words, (w: string, i: number) => {
+                        if (w.length === 1) {
+                            return w;
+                        }
+                        return this._capitalize(w);
+                    });
                    text = capitalizedWords.join(' ');
                    break;