diff options
Diffstat (limited to 'packages/website')
| -rw-r--r-- | packages/website/ts/components/documentation/sidebar_header.tsx | 57 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/doc_page.tsx | 39 | ||||
| -rw-r--r-- | packages/website/ts/pages/wiki/wiki.tsx | 29 |
3 files changed, 70 insertions, 55 deletions
diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx new file mode 100644 index 000000000..ec0ada8bd --- /dev/null +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -0,0 +1,57 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { ScreenWidths } from 'ts/types'; + +export interface SidebarHeaderProps { + screenWidth: ScreenWidths; + title: string; + docsVersion?: string; + availableDocVersions?: string[]; + onVersionSelected?: () => void; +} + +export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({ + screenWidth, + title, + docsVersion, + availableDocVersions, + onVersionSelected, +}) => { + return ( + <Container> + <Container className="flex justify-bottom"> + <Container className="left pl1" width="150px"> + <Text + fontColor={colors.lightLinkBlue} + fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'} + fontWeight="bold" + > + {title} + </Text> + </Container> + {!_.isUndefined(docsVersion) && + !_.isUndefined(availableDocVersions) && + !_.isUndefined(onVersionSelected) && ( + <div className="right" style={{ alignSelf: 'flex-end' }}> + <VersionDropDown + selectedVersion={docsVersion} + versions={availableDocVersions} + onVersionSelected={onVersionSelected} + /> + </div> + )} + </Container> + <Container + width={'100%'} + height={'1px'} + backgroundColor={colors.grey300} + marginTop="20px" + marginBottom="27px" + /> + </Container> + ); +}; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 65d9b68a9..a2babeda2 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -6,15 +6,14 @@ import { SupportedDocJson, TypeDocUtils, } from '@0xproject/react-docs'; -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { NestedSidebarMenu } from '@0xproject/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import semverSort = require('semver-sort'); -import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { DocPackages, ScreenWidths } from 'ts/types'; @@ -109,33 +108,13 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { } private _renderSidebarHeader(): React.ReactNode { return ( - <Container> - <Container className="flex justify-bottom"> - <Container className="left pl1" width="150px"> - <Text - fontColor={colors.lightLinkBlue} - fontSize={this.props.screenWidth === ScreenWidths.Sm ? '20px' : '22px'} - fontWeight="bold" - > - {this.props.docsInfo.displayName} - </Text> - </Container> - <div className="right" style={{ alignSelf: 'flex-end' }}> - <VersionDropDown - selectedVersion={this.props.docsVersion} - versions={this.props.availableDocVersions} - onVersionSelected={this._onVersionSelected.bind(this)} - /> - </div> - </Container> - <Container - width={'100%'} - height={'1px'} - backgroundColor={colors.grey300} - marginTop="20px" - marginBottom="27px" - /> - </Container> + <SidebarHeader + screenWidth={this.props.screenWidth} + title={this.props.docsInfo.displayName} + docsVersion={this.props.docsVersion} + availableDocVersions={this.props.availableDocVersions} + onVersionSelected={this._onVersionSelected.bind(this)} + /> ); } private _renderLoading(): React.ReactNode { diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 4b101e45d..e7754fd9d 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,6 +1,5 @@ import { ALink, - colors, constants as sharedConstants, HeaderSizes, MarkdownSection, @@ -11,11 +10,11 @@ import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection, ScreenWidths } from 'ts/types'; +import { Article, ArticlesBySection, Deco, Key, ScreenWidths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -88,28 +87,8 @@ export class Wiki extends React.Component<WikiProps, WikiState> { ); } private _renderSidebarHeader(): React.ReactNode { - return ( - <Container> - <Container className="flex justify-bottom"> - <Container className="left pl1" width="150px"> - <Text - fontColor={colors.lightLinkBlue} - fontSize={this.props.screenWidth === ScreenWidths.Sm ? '20px' : '22px'} - fontWeight="bold" - > - Wiki - </Text> - </Container> - </Container> - <Container - width={'100%'} - height={'1px'} - backgroundColor={colors.grey300} - marginTop="20px" - marginBottom="27px" - /> - </Container> - ); + const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); + return <SidebarHeader screenWidth={this.props.screenWidth} title={wikiTitle} />; } private _renderLoading(): React.ReactNode { return ( |