aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-02-21 06:11:19 +0800
committerFabio Berger <me@fabioberger.com>2018-02-21 06:11:19 +0800
commitc4f65681a160c4e62d947ba22b81246ac0b2c6a4 (patch)
tree3fa21d23e8b839a3d5bd2a7d1e20483dff3743ed /packages/website/ts/components
parentf600226aa931561a2f5fa7a921046348c2fb8f01 (diff)
downloaddexon-sol-tools-c4f65681a160c4e62d947ba22b81246ac0b2c6a4.tar
dexon-sol-tools-c4f65681a160c4e62d947ba22b81246ac0b2c6a4.tar.gz
dexon-sol-tools-c4f65681a160c4e62d947ba22b81246ac0b2c6a4.tar.bz2
dexon-sol-tools-c4f65681a160c4e62d947ba22b81246ac0b2c6a4.tar.lz
dexon-sol-tools-c4f65681a160c4e62d947ba22b81246ac0b2c6a4.tar.xz
dexon-sol-tools-c4f65681a160c4e62d947ba22b81246ac0b2c6a4.tar.zst
dexon-sol-tools-c4f65681a160c4e62d947ba22b81246ac0b2c6a4.zip
Add translation infra and replace english text with calls to translate
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/footer.tsx180
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx67
2 files changed, 135 insertions, 112 deletions
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<FooterProps, FooterState> {
+ public static defaultProps: Partial<FooterProps> = {
+ 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 (
<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 }}>
@@ -137,20 +138,20 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<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>
@@ -195,9 +196,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,7 +205,7 @@ 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>
);
}
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index a412007f2..15bfe2a39 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;
@@ -36,6 +37,7 @@ interface TopBarProps {
docsInfo?: DocsInfo;
style?: React.CSSProperties;
isNightVersion?: boolean;
+ translate?: Translate;
}
interface TopBarState {
@@ -79,6 +81,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
shouldFullWidth: false,
style: {},
isNightVersion: false,
+ translate: new Translate(),
};
constructor(props: TopBarProps) {
super(props);
@@ -95,10 +98,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 +115,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 +134,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 : {};
@@ -165,28 +180,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 +248,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 +336,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 +351,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>