diff options
Diffstat (limited to 'packages')
-rw-r--r-- | packages/react-shared/src/utils/colors.ts | 2 | ||||
-rw-r--r-- | packages/website/translations/chinese.json | 9 | ||||
-rw-r--r-- | packages/website/translations/english.json | 9 | ||||
-rw-r--r-- | packages/website/translations/korean.json | 9 | ||||
-rw-r--r-- | packages/website/translations/russian.json | 9 | ||||
-rw-r--r-- | packages/website/translations/spanish.json | 9 | ||||
-rw-r--r-- | packages/website/ts/components/dropdowns/developers_drop_down.tsx | 187 | ||||
-rw-r--r-- | packages/website/ts/components/top_bar/top_bar.tsx | 129 | ||||
-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 |
12 files changed, 252 insertions, 129 deletions
diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 7d047a50e..5a20eeaa1 100644 --- 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', diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index ed1a6044a..93e740a14 100644 --- 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" } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 541c29997..a75b73501 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -80,5 +80,12 @@ "DEVELOPERS": "developers", "HOME": "home", "ROCKETCHAT": "rocket.chat", - "TRADE_CALL_TO_ACTION": "trade on 0x" + "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", + "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 8892f2dee..e6fbcb4cc 100644 --- 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" } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 41a7a990d..779bc8173 100644 --- 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" } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 7780190ac..54a463f98 100644 --- 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" } 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..c2daec475 --- /dev/null +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -0,0 +1,187 @@ +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 { 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 + + /> + <div className="flex relative" style={{ color: this.props.menuIconStyle.color }}> + <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div> + </div> + ); + 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> + <div style={{ padding: '1.75rem' }}> + {this._renderTitle('Getting started')} + <div className="flex"> + <div className="pr4 mr2">{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}</div> + <div>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</div> + </div> + </div> + <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: '1.125rem', + textAlign: 'center', + backgroundColor: colors.lightBgGrey, + borderBottomLeftRadius: 4, + borderBottomRightRadius: 4, + }} + > + <Link + to={WebsitePaths.ZeroExJs/* TODO: Update once we have overview page */} + 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 9ef8211a9..8f1137b44 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -8,18 +8,17 @@ 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, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; +import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -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 c637171dd..2c94fe910 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -468,6 +468,13 @@ export enum Key { Home = 'HOME', RocketChat = 'ROCKETCHAT', TradeCallToAction = 'TRADE_CALL_TO_ACTION', + 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 005d17823..2b4aa5209 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -83,6 +83,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; |