diff options
6 files changed, 57 insertions, 38 deletions
diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx index 43ffc39c6..8be7cd62d 100644 --- a/packages/react-docs/src/ts/components/documentation.tsx +++ b/packages/react-docs/src/ts/components/documentation.tsx @@ -51,6 +51,7 @@ export interface DocumentationProps { availableVersions: string[]; docsInfo: DocsInfo; docAgnosticFormat?: DocAgnosticFormat; + sidebarHeader?: React.ReactNode; sourceUrl: string; } @@ -109,7 +110,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta <NestedSidebarMenu selectedVersion={this.props.selectedVersion} versions={this.props.availableVersions} - title={this.props.docsInfo.displayName} + sidebarHeader={this.props.sidebarHeader} topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)} menuSubsectionsBySection={menuSubsectionsBySection} /> diff --git a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx index 2506124af..f907022d6 100644 --- a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx @@ -13,7 +13,7 @@ import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; menuSubsectionsBySection: MenuSubsectionsBySection; - title: string; + sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; selectedVersion?: string; @@ -37,13 +37,6 @@ const styles: Styles = { }, }; -const titleToIcon: { [title: string]: string } = { - '0x.js': 'zeroExJs.png', - '0x Connect': 'connect.png', - '0x Smart Contracts': 'contracts.png', - Wiki: 'wiki.png', -}; - export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> { public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, @@ -68,7 +61,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N }); return ( <div> - {this._renderEmblem()} + {this.props.sidebarHeader} {!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && ( <VersionDropDown selectedVersion={this.props.selectedVersion} versions={this.props.versions} /> @@ -77,31 +70,6 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N </div> ); } - private _renderEmblem() { - return ( - <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> - <div className="flex" style={{ fontSize: 25 }}> - <div className="robotoMono" style={{ fontWeight: 'bold' }}> - 0x - </div> - <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> - docs - </div> - </div> - <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}> - | - </div> - <div className="flex"> - <div> - <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" /> - </div> - <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}> - {this.props.title} - </div> - </div> - </div> - ); - } private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] { const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx new file mode 100644 index 000000000..132606ddd --- /dev/null +++ b/packages/website/ts/components/sidebar_header.tsx @@ -0,0 +1,46 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +const SHOW_DURATION_MS = 4000; + +const titleToIcon: { [title: string]: string } = { + '0x.js': 'zeroExJs.png', + '0x Connect': 'connect.png', + '0x Smart Contracts': 'contracts.png', + Wiki: 'wiki.png', +}; + +interface SidebarHeaderProps { + title: string; +} + +interface SidebarHeaderState {} + +export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> { + public render() { + return ( + <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> + <div className="flex" style={{ fontSize: 25 }}> + <div className="robotoMono" style={{ fontWeight: 'bold' }}> + 0x + </div> + <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> + docs + </div> + </div> + <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}> + | + </div> + <div className="flex"> + <div> + <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" /> + </div> + <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}> + {this.props.title} + </div> + </div> + </div> + ); + } +} diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 0161da2d3..2d6f2b235 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -9,6 +9,7 @@ import { Link } from 'react-router-dom'; import ReactTooltip = require('react-tooltip'); import { Blockchain } from 'ts/blockchain'; import { PortalMenu } from 'ts/components/portal_menu'; +import { SidebarHeader } from 'ts/components/sidebar_header'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { DropDown } from 'ts/components/ui/drop_down'; @@ -314,7 +315,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <NestedSidebarMenu topLevelMenu={this.props.menu} menuSubsectionsBySection={this.props.menuSubsectionsBySection} - title={this.props.docsInfo.displayName} + sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />} shouldDisplaySectionHeaders={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} selectedVersion={this.props.docsVersion} @@ -333,7 +334,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <NestedSidebarMenu topLevelMenu={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection} - title={this.props.translate.get(Key.Wiki, Deco.Cap)} + sidebarHeader={<SidebarHeader title="Wiki" />} shouldDisplaySectionHeaders={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} /> diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index cf2111b29..bc01dc728 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -5,6 +5,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import semverSort = require('semver-sort'); +import { SidebarHeader } from 'ts/components/sidebar_header'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Dispatcher } from 'ts/redux/dispatcher'; import { DocPackages, Environments } from 'ts/types'; @@ -85,6 +86,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { availableVersions={this.props.availableDocVersions} docsInfo={this.props.docsInfo} docAgnosticFormat={this.state.docAgnosticFormat} + sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />} sourceUrl={sourceUrl} /> </div> diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index f338ed9c2..18074c302 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -14,6 +14,7 @@ import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { scroller } from 'react-scroll'; +import { SidebarHeader } from 'ts/components/sidebar_header'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Article, ArticlesBySection, WebsitePaths } from 'ts/types'; @@ -128,7 +129,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { <NestedSidebarMenu topLevelMenu={menuSubsectionsBySection} menuSubsectionsBySection={menuSubsectionsBySection} - title="Wiki" + sidebarHeader={<SidebarHeader title="Wiki" />} /> </div> </div> |