From c4f65681a160c4e62d947ba22b81246ac0b2c6a4 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 20 Feb 2018 14:11:19 -0800 Subject: Add translation infra and replace english text with calls to translate --- packages/website/ts/components/footer.tsx | 180 +++++++++++++++--------------- 1 file changed, 90 insertions(+), 90 deletions(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index a0f1a0c96..a5bddc874 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,9 +1,10 @@ import * as _ from 'lodash'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { WebsitePaths } from 'ts/types'; +import { Deco, Key, 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,86 +16,8 @@ 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', @@ -108,12 +31,90 @@ const titleToIcon: { [title: string]: string } = { Forum: 'discourse.png', }; -export interface FooterProps {} +export interface FooterProps { + translate?: Translate; +} interface FooterState {} export class Footer extends React.Component { + public static defaultProps: Partial = { + translate: new Translate(), + }; 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', + }, + ], + }; return (
@@ -137,20 +138,20 @@ export class Footer extends React.Component {
- {this._renderHeader(Sections.Documentation)} - {_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))} + {this._renderHeader(Key.Documentation)} + {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))}
- {this._renderHeader(Sections.Community)} - {_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))} + {this._renderHeader(Key.Community)} + {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))}
- {this._renderHeader(Sections.Organization)} - {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))} + {this._renderHeader(Key.Organization)} + {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))}
@@ -195,9 +196,8 @@ export class Footer extends React.Component {
); } - private _renderHeader(title: string) { + private _renderHeader(key: Key) { const headerStyle = { - textTransform: 'uppercase', color: colors.grey400, letterSpacing: 2, fontFamily: 'Roboto Mono', @@ -205,7 +205,7 @@ export class Footer extends React.Component { }; return (
- {title} + {this.props.translate.get(key, Deco.Upper)}
); } -- cgit v1.2.3 From 13fed15e0c4a643bb5a80737901c3d85be39e6ee Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 20 Feb 2018 19:53:07 -0800 Subject: Improve homepage and add translations in chinese, russian, korean and spanish --- packages/website/ts/components/footer.tsx | 56 ++++++++++++++++++++++++++----- 1 file changed, 47 insertions(+), 9 deletions(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index a5bddc874..d7ebc4ede 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,7 +1,9 @@ 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 { Deco, Key, WebsitePaths } from 'ts/types'; +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'; @@ -23,24 +25,33 @@ const linkStyle = { 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 { translate?: Translate; + onLanguageSelected?: (language: Language) => void; } -interface FooterState {} +interface FooterState { + selectedLanguage: Language; +} export class Footer extends React.Component { public static defaultProps: Partial = { translate: new Translate(), }; + constructor(props: FooterProps) { + super(); + this.state = { + selectedLanguage: props.translate.getLanguage(), + }; + } public render() { const menuItemsBySection: MenuItemsBySection = { [Key.Documentation]: [ @@ -66,7 +77,7 @@ export class Footer extends React.Component { path: WebsitePaths.Wiki, }, { - title: this.props.translate.get(Key.FAQ, Deco.Cap), + title: this.props.translate.get(Key.Faq, Deco.Cap), path: WebsitePaths.FAQ, }, ], @@ -115,6 +126,9 @@ export class Footer extends React.Component { }, ], }; + const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => { + return ; + }); return (
@@ -133,6 +147,15 @@ export class Footer extends React.Component { > © ZeroEx, Intl.
+
+ + {languageMenuItems} + +
@@ -167,6 +190,13 @@ export class Footer extends React.Component { ); } private _renderMenuItem(item: FooterMenuItem) { + const titleToIcon: { [title: string]: string } = { + 'Rocket.chat': '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 (
@@ -209,4 +239,12 @@ export class Footer extends React.Component {
); } + private _updateLanguage(e: any, index: number, value: Language) { + this.setState({ + selectedLanguage: value, + }); + if (!_.isUndefined(this.props.onLanguageSelected)) { + this.props.onLanguageSelected(value); + } + } } -- cgit v1.2.3 From a50618fcb0de2c9df7510d043a1d851a2f9456a5 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 21 Feb 2018 10:31:15 -0800 Subject: Fix rocket.chat key --- packages/website/ts/components/footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index d7ebc4ede..896b36931 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -191,7 +191,7 @@ export class Footer extends React.Component { } private _renderMenuItem(item: FooterMenuItem) { const titleToIcon: { [title: string]: string } = { - 'Rocket.chat': 'rocketchat.png', + [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', -- cgit v1.2.3 From e2d17d122e25feeabb1d5499065274ec6e30bd4f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 21 Feb 2018 11:46:16 -0800 Subject: Keep topBar and footer language to the one picked by the user --- packages/website/ts/components/footer.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 896b36931..2d03ca576 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -3,6 +3,7 @@ import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import { Link } from 'react-router-dom'; +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'; @@ -35,7 +36,7 @@ const languageToMenuTitle = { export interface FooterProps { translate?: Translate; - onLanguageSelected?: (language: Language) => void; + dispatcher: Dispatcher; } interface FooterState { @@ -243,8 +244,6 @@ export class Footer extends React.Component { this.setState({ selectedLanguage: value, }); - if (!_.isUndefined(this.props.onLanguageSelected)) { - this.props.onLanguageSelected(value); - } + this.props.dispatcher.updateSelectedLanguage(value); } } -- cgit v1.2.3 From 7d8cad8e3a3600aeb1217697546635b04ba83ed0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 21 Feb 2018 11:51:41 -0800 Subject: Make translate required by footer --- packages/website/ts/components/footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 2d03ca576..1b6fabf2b 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -35,7 +35,7 @@ const languageToMenuTitle = { }; export interface FooterProps { - translate?: Translate; + translate: Translate; dispatcher: Dispatcher; } -- cgit v1.2.3 From ef6f52e722ffb07ecf6d0da79f9194c4cf0d14d1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 21 Feb 2018 11:54:03 -0800 Subject: Remove extenuous defaultProps --- packages/website/ts/components/footer.tsx | 3 --- 1 file changed, 3 deletions(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 1b6fabf2b..de20d074d 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -44,9 +44,6 @@ interface FooterState { } export class Footer extends React.Component { - public static defaultProps: Partial = { - translate: new Translate(), - }; constructor(props: FooterProps) { super(); this.state = { -- cgit v1.2.3