diff options
Diffstat (limited to 'packages/website/ts/components')
| -rw-r--r-- | packages/website/ts/components/footer.tsx | 236 | ||||
| -rw-r--r-- | packages/website/ts/components/portal.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/components/top_bar/top_bar.tsx | 68 | ||||
| -rw-r--r-- | packages/website/ts/components/top_bar/top_bar_menu_item.tsx | 2 |
4 files changed, 184 insertions, 127 deletions
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index a0f1a0c96..810460cac 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,9 +1,13 @@ 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 { WebsitePaths } from 'ts/types'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Deco, Key, Language, WebsitePaths } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; interface MenuItemsBySection { [sectionName: string]: FooterMenuItem[]; @@ -15,105 +19,114 @@ interface FooterMenuItem { isExternal?: boolean; } -enum Sections { - Documentation = 'Documentation', - Community = 'Community', - Organization = 'Organization', -} - const ICON_DIMENSION = 16; -const menuItemsBySection: MenuItemsBySection = { - Documentation: [ - { - title: '0x.js', - path: WebsitePaths.ZeroExJs, - }, - { - title: '0x Smart Contracts', - path: WebsitePaths.SmartContracts, - }, - { - title: '0x Connect', - path: WebsitePaths.Connect, - }, - { - title: 'Whitepaper', - path: WebsitePaths.Whitepaper, - isExternal: true, - }, - { - title: 'Wiki', - path: WebsitePaths.Wiki, - }, - { - title: 'FAQ', - path: WebsitePaths.FAQ, - }, - ], - Community: [ - { - title: 'Rocket.chat', - isExternal: true, - path: constants.URL_ZEROEX_CHAT, - }, - { - title: 'Blog', - isExternal: true, - path: constants.URL_BLOG, - }, - { - title: 'Twitter', - isExternal: true, - path: constants.URL_TWITTER, - }, - { - title: 'Reddit', - isExternal: true, - path: constants.URL_REDDIT, - }, - { - title: 'Forum', - isExternal: true, - path: constants.URL_DISCOURSE_FORUM, - }, - ], - Organization: [ - { - title: 'About', - isExternal: false, - path: WebsitePaths.About, - }, - { - title: 'Careers', - isExternal: true, - path: constants.URL_ANGELLIST, - }, - { - title: 'Contact', - isExternal: true, - path: 'mailto:team@0xproject.com', - }, - ], -}; + const linkStyle = { color: colors.white, cursor: 'pointer', }; -const titleToIcon: { [title: string]: string } = { - 'Rocket.chat': 'rocketchat.png', - Blog: 'medium.png', - Twitter: 'twitter.png', - Reddit: 'reddit.png', - Forum: 'discourse.png', +const languageToMenuTitle = { + [Language.English]: 'English', + [Language.Russian]: 'Русский', + [Language.Spanish]: 'Español', + [Language.Korean]: '한국어', + [Language.Chinese]: '中文', }; -export interface FooterProps {} +export interface FooterProps { + translate: Translate; + dispatcher: Dispatcher; +} -interface FooterState {} +interface FooterState { + selectedLanguage: Language; +} export class Footer extends React.Component<FooterProps, FooterState> { + constructor(props: FooterProps) { + super(); + this.state = { + selectedLanguage: props.translate.getLanguage(), + }; + } public render() { + const menuItemsBySection: MenuItemsBySection = { + [Key.Documentation]: [ + { + title: '0x.js', + path: WebsitePaths.ZeroExJs, + }, + { + title: this.props.translate.get(Key.SmartContracts, Deco.Cap), + path: WebsitePaths.SmartContracts, + }, + { + title: this.props.translate.get(Key.Connect, Deco.Cap), + path: WebsitePaths.Connect, + }, + { + title: this.props.translate.get(Key.Whitepaper, Deco.Cap), + path: WebsitePaths.Whitepaper, + isExternal: true, + }, + { + title: this.props.translate.get(Key.Wiki, Deco.Cap), + path: WebsitePaths.Wiki, + }, + { + title: this.props.translate.get(Key.Faq, Deco.Cap), + path: WebsitePaths.FAQ, + }, + ], + [Key.Community]: [ + { + title: this.props.translate.get(Key.RocketChat, Deco.Cap), + isExternal: true, + path: constants.URL_ZEROEX_CHAT, + }, + { + title: this.props.translate.get(Key.Blog, Deco.Cap), + isExternal: true, + path: constants.URL_BLOG, + }, + { + title: 'Twitter', + isExternal: true, + path: constants.URL_TWITTER, + }, + { + title: 'Reddit', + isExternal: true, + path: constants.URL_REDDIT, + }, + { + title: this.props.translate.get(Key.Forum, Deco.Cap), + isExternal: true, + path: constants.URL_DISCOURSE_FORUM, + }, + ], + [Key.Organization]: [ + { + title: this.props.translate.get(Key.About, Deco.Cap), + isExternal: false, + path: WebsitePaths.About, + }, + { + title: this.props.translate.get(Key.Careers, Deco.Cap), + isExternal: true, + path: constants.URL_ANGELLIST, + }, + { + title: this.props.translate.get(Key.Contact, Deco.Cap), + isExternal: true, + path: 'mailto:team@0xproject.com', + }, + ], + }; + const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => { + return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />; + }); return ( <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}> <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}> @@ -132,25 +145,34 @@ export class Footer extends React.Component<FooterProps, FooterState> { > © ZeroEx, Intl. </div> + <div className="pt4 center"> + <DropDownMenu + labelStyle={{ color: colors.white }} + value={this.state.selectedLanguage} + onChange={this._updateLanguage.bind(this)} + > + {languageMenuItems} + </DropDownMenu> + </div> </div> </div> <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4"> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> - {this._renderHeader(Sections.Documentation)} - {_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))} + {this._renderHeader(Key.Documentation)} + {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2"> <div className="lg-right md-right sm-center"> - {this._renderHeader(Sections.Community)} - {_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))} + {this._renderHeader(Key.Community)} + {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> - {this._renderHeader(Sections.Organization)} - {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))} + {this._renderHeader(Key.Organization)} + {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))} </div> </div> </div> @@ -166,17 +188,22 @@ export class Footer extends React.Component<FooterProps, FooterState> { ); } private _renderMenuItem(item: FooterMenuItem) { + 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', + Twitter: 'twitter.png', + Reddit: 'reddit.png', + [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png', + }; const iconIfExists = titleToIcon[item.title]; return ( <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}> {item.isExternal ? ( <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}> {!_.isUndefined(iconIfExists) ? ( - <div className="sm-mx-auto" style={{ width: 65 }}> - <div className="flex"> - <div className="pr1">{this._renderIcon(iconIfExists)}</div> - <div>{item.title}</div> - </div> + <div className="inline-block"> + <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div> + <div className="table-cell">{item.title}</div> </div> ) : ( item.title @@ -195,9 +222,8 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private _renderHeader(title: string) { + private _renderHeader(key: Key) { const headerStyle = { - textTransform: 'uppercase', color: colors.grey400, letterSpacing: 2, fontFamily: 'Roboto Mono', @@ -205,8 +231,14 @@ export class Footer extends React.Component<FooterProps, FooterState> { }; return ( <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}> - {title} + {this.props.translate.get(key, Deco.Upper)} </div> ); } + private _updateLanguage(e: any, index: number, value: Language) { + this.setState({ + selectedLanguage: value, + }); + this.props.dispatcher.updateSelectedLanguage(value); + } } diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx index 0409f28c0..4871997ac 100644 --- a/packages/website/ts/components/portal.tsx +++ b/packages/website/ts/components/portal.tsx @@ -27,6 +27,7 @@ import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAdd import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const THROTTLE_TIMEOUT = 100; @@ -52,6 +53,7 @@ export interface PortalAllProps { location: Location; flashMessage?: string | React.ReactNode; lastForceTokenStateRefetch: number; + translate: Translate; } interface PortalAllState { @@ -166,6 +168,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { blockchainIsLoaded={this.props.blockchainIsLoaded} location={this.props.location} blockchain={this._blockchain} + translate={this.props.translate} /> <div id="portal" className="mx-auto max-width-4" style={{ width: '100%' }}> <Paper className="mb3 mt2"> @@ -259,7 +262,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> { /> )} </div> - <Footer />; + <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> </div> ); } diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index a412007f2..2723c2218 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -14,9 +14,10 @@ import { Identicon } from 'ts/components/ui/identicon'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { DocsMenu, MenuSubsectionsBySection, ProviderType, Styles, WebsitePaths } from 'ts/types'; +import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, Styles, WebsitePaths } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; interface TopBarProps { userAddress?: string; @@ -28,6 +29,7 @@ interface TopBarProps { dispatcher?: Dispatcher; blockchainIsLoaded: boolean; location: Location; + translate: Translate; docsVersion?: string; availableDocVersions?: string[]; menu?: DocsMenu; @@ -95,10 +97,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <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="Smart Contracts" /> + <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="0x Connect" /> + <MenuItem + style={{ fontSize: styles.menuItem.fontSize }} + primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)} + /> </Link>, <a key="subMenuItem-standard-relayer-api" @@ -106,7 +114,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { className="text-decoration-none" href={constants.URL_STANDARD_RELAYER_API_GITHUB} > - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Standard Relayer API" /> + <MenuItem + style={{ fontSize: styles.menuItem.fontSize }} + primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)} + /> </a>, <a key="subMenuItem-github" @@ -122,7 +133,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { className="text-decoration-none" href={`${WebsitePaths.Whitepaper}`} > - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Whitepaper" /> + <MenuItem + style={{ fontSize: styles.menuItem.fontSize }} + primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)} + /> </a>, ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; @@ -137,7 +151,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { }; const hoverActiveNode = ( <div className="flex relative" style={{ color: menuIconStyle.color }}> - <div style={{ paddingRight: 10 }}>Developers</div> + <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> @@ -165,28 +179,28 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { style={styles.menuItem} /> <TopBarMenuItem - title="Wiki" + title={this.props.translate.get(Key.Wiki, Deco.Cap)} path={`${WebsitePaths.Wiki}`} style={styles.menuItem} isNightVersion={isNightVersion} isExternal={false} /> <TopBarMenuItem - title="Blog" + title={this.props.translate.get(Key.Blog, Deco.Cap)} path={constants.URL_BLOG} style={styles.menuItem} isNightVersion={isNightVersion} isExternal={true} /> <TopBarMenuItem - title="About" + title={this.props.translate.get(Key.About, Deco.Cap)} path={`${WebsitePaths.About}`} style={styles.menuItem} isNightVersion={isNightVersion} isExternal={false} /> <TopBarMenuItem - title="Portal DApp" + title={this.props.translate.get(Key.PortalDApp, Deco.CapWords)} path={`${WebsitePaths.Portal}`} isPrimary={true} style={styles.menuItem} @@ -233,46 +247,54 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { {this._renderDocsMenu()} {this._renderWiki()} <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> - Website + {this.props.translate.get(Key.Website, Deco.Cap)} </div> <Link to={WebsitePaths.Home} className="text-decoration-none"> - <MenuItem className="py2">Home</MenuItem> + <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem> </Link> <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> - <MenuItem className="py2">Wiki</MenuItem> + <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem> </Link> {!this._isViewing0xjsDocs() && ( <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem className="py2">0x.js Docs</MenuItem> + <MenuItem className="py2">0x.js {this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem> </Link> )} {!this._isViewingConnectDocs() && ( <Link to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem className="py2">0x Connect Docs</MenuItem> + <MenuItem className="py2"> + {this.props.translate.get(Key.Connect, Deco.Cap)}{' '} + {this.props.translate.get(Key.Docs, Deco.Cap)} + </MenuItem> </Link> )} {!this._isViewingSmartContractsDocs() && ( <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem className="py2">Smart Contract Docs</MenuItem> + <MenuItem className="py2"> + {this.props.translate.get(Key.SmartContract, Deco.Cap)}{' '} + {this.props.translate.get(Key.Docs, Deco.Cap)} + </MenuItem> </Link> )} {!this._isViewingPortal() && ( <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> - <MenuItem className="py2">Portal DApp</MenuItem> + <MenuItem className="py2"> + {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} + </MenuItem> </Link> )} <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> - <MenuItem className="py2">Whitepaper</MenuItem> + <MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem> </a> <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> - <MenuItem className="py2">About</MenuItem> + <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem> </Link> <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> - <MenuItem className="py2">Blog</MenuItem> + <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem> </a> <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}> - FAQ + {this.props.translate.get(Key.Faq, Deco.Cap)} </MenuItem> </Link> </div> @@ -313,7 +335,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <NestedSidebarMenu topLevelMenu={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection} - title="Wiki" + title={this.props.translate.get(Key.Wiki, Deco.Cap)} shouldDisplaySectionHeaders={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} /> @@ -328,7 +350,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { return ( <div className="lg-hide md-hide"> <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}> - Portal DApp + {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} </div> <PortalMenu menuItemStyle={{ color: 'black' }} onClick={this._onMenuButtonClick.bind(this)} /> </div> 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 983050abc..e70381456 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 @@ -34,7 +34,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM marginTop: 15, paddingLeft: 9, paddingRight: 9, - width: 77, + minWidth: 77, } : {}; const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color; |