diff options
Diffstat (limited to 'packages/website/ts')
| -rw-r--r-- | packages/website/ts/components/dropdowns/developers_drop_down.tsx | 188 | ||||
| -rw-r--r-- | packages/website/ts/components/top_bar/top_bar.tsx | 127 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/drop_down.tsx | 3 | ||||
| -rw-r--r-- | packages/website/ts/types.ts | 7 | ||||
| -rw-r--r-- | packages/website/ts/utils/constants.ts | 1 | ||||
| -rw-r--r-- | packages/website/ts/utils/translate.ts | 7 |
6 files changed, 210 insertions, 123 deletions
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx new file mode 100644 index 000000000..d66e75722 --- /dev/null +++ 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>; + } +} diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index bb61e4fb9..c2d753e31 100644 --- 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)} diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 4d5caef08..1daaeb1c3 100644 --- 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)} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 4ec45c46e..f97f8f500 100644 --- 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 { diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 18a4d8100..6e5d21f67 100644 --- 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/', diff --git a/packages/website/ts/utils/translate.ts b/packages/website/ts/utils/translate.ts index 1ee1a59c5..5595e6e0f 100644 --- 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; |