diff options
Diffstat (limited to 'packages/website/ts/components/top_bar.tsx')
| -rw-r--r-- | packages/website/ts/components/top_bar.tsx | 162 |
1 files changed, 67 insertions, 95 deletions
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx index eec48b21a..cd835930b 100644 --- a/packages/website/ts/components/top_bar.tsx +++ b/packages/website/ts/components/top_bar.tsx @@ -2,17 +2,17 @@ import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; import ReactTooltip = require('react-tooltip'); -import {PortalMenu} from 'ts/components/portal_menu'; -import {TopBarMenuItem} from 'ts/components/top_bar_menu_item'; -import {DropDownMenuItem} from 'ts/components/ui/drop_down_menu_item'; -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 {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; +import { PortalMenu } from 'ts/components/portal_menu'; +import { TopBarMenuItem } from 'ts/components/top_bar_menu_item'; +import { DropDownMenuItem } from 'ts/components/ui/drop_down_menu_item'; +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 { DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; interface TopBarProps { userAddress?: string; @@ -81,26 +81,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { const isFullWidthPage = this.props.shouldFullWidth; const parentClassNames = `flex mx-auto ${isFullWidthPage ? 'pl2' : 'max-width-4'}`; const developerSectionMenuItems = [ - <Link - key="subMenuItem-zeroEx" - to={WebsitePaths.ZeroExJs} - className="text-decoration-none" - > - <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="0x.js" /> + <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none"> + <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" /> + <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none"> + <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Smart Contracts" /> </Link>, - <Link - key="subMenuItem-0xconnect" - to={WebsitePaths.Connect} - className="text-decoration-none" - > - <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="0x Connect" /> + <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none"> + <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x Connect" /> </Link>, <a key="subMenuItem-standard-relayer-api" @@ -108,7 +96,7 @@ 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="Standard Relayer API" /> </a>, <a key="subMenuItem-github" @@ -116,7 +104,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { className="text-decoration-none" href={constants.URL_GITHUB_ORG} > - <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="GitHub" /> + <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" /> </a>, <a key="subMenuItem-whitePaper" @@ -124,7 +112,7 @@ 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="Whitepaper" /> </a>, ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; @@ -138,19 +126,17 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { paddingTop: 16, }; return ( - <div style={{...styles.topBar, ...bottomBorderStyle, ...this.props.style}} className="pb1"> + <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style }} className="pb1"> <div className={parentClassNames}> - <div className="col col-2 sm-pl2 md-pl2 lg-pl0" style={{paddingTop: 15}}> + <div className="col col-2 sm-pl2 md-pl2 lg-pl0" style={{ paddingTop: 15 }}> <Link to={`${WebsitePaths.Home}`} className="text-decoration-none"> <img src={logoUrl} height="30" /> </Link> </div> <div className={`col col-${isFullWidthPage ? '8' : '9'} lg-hide md-hide`} /> <div className={`col col-${isFullWidthPage ? '6' : '5'} sm-hide xs-hide`} /> - {!this._isViewingPortal() && - <div - className={menuClasses} - > + {!this._isViewingPortal() && ( + <div className={menuClasses}> <div className="flex justify-between"> <DropDownMenuItem title="Developers" @@ -180,24 +166,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { /> </div> </div> - } - {this.props.blockchainIsLoaded && !_.isEmpty(this.props.userAddress) && - <div className="col col-5"> - {this._renderUser()} - </div> - } - {!this._isViewingPortal() && - <div - className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`} - > + )} + {this.props.blockchainIsLoaded && + !_.isEmpty(this.props.userAddress) && <div className="col col-5">{this._renderUser()}</div>} + {!this._isViewingPortal() && ( + <div className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}> <div style={menuIconStyle}> - <i - className="zmdi zmdi-menu" - onClick={this._onMenuButtonClick.bind(this)} - /> + <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} /> </div> </div> - } + )} </div> {this._renderDrawer()} </div> @@ -214,55 +192,46 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { {this._renderPortalMenu()} {this._renderDocsMenu()} {this._renderWiki()} - <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightGrey}}>Website</div> + <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> + Website + </div> <Link to={WebsitePaths.Home} className="text-decoration-none"> <MenuItem className="py2">Home</MenuItem> </Link> <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> <MenuItem className="py2">Wiki</MenuItem> </Link> - {!this._isViewing0xjsDocs() && + {!this._isViewing0xjsDocs() && ( <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> <MenuItem className="py2">0x.js Docs</MenuItem> </Link> - } - {!this._isViewingConnectDocs() && + )} + {!this._isViewingConnectDocs() && ( <Link to={WebsitePaths.Connect} className="text-decoration-none"> <MenuItem className="py2">0x Connect Docs</MenuItem> </Link> - } - {!this._isViewingSmartContractsDocs() && + )} + {!this._isViewingSmartContractsDocs() && ( <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> <MenuItem className="py2">Smart Contract Docs</MenuItem> </Link> - } - {!this._isViewingPortal() && + )} + {!this._isViewingPortal() && ( <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> <MenuItem className="py2">Portal DApp</MenuItem> </Link> - } - <a - className="text-decoration-none" - target="_blank" - href={`${WebsitePaths.Whitepaper}`} - > + )} + <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> <MenuItem className="py2">Whitepaper</MenuItem> </a> <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> <MenuItem className="py2">About</MenuItem> </Link> - <a - className="text-decoration-none" - target="_blank" - href={constants.URL_BLOG} - > + <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> <MenuItem className="py2">Blog</MenuItem> </a> <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> - <MenuItem - className="py2" - onTouchTap={this._onMenuButtonClick.bind(this)} - > + <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}> FAQ </MenuItem> </Link> @@ -270,15 +239,19 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { ); } private _renderDocsMenu() { - if (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs() - || _.isUndefined(this.props.menu)) { + if ( + (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()) || + _.isUndefined(this.props.menu) + ) { return; } const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>{sectionTitle}</div> + <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}> + {sectionTitle} + </div> <NestedSidebarMenu topLevelMenu={this.props.menu} menuSubsectionsBySection={this.props.menuSubsectionsBySection} @@ -298,7 +271,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>0x Protocol Wiki</div> + <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}> + 0x Protocol Wiki + </div> <NestedSidebarMenu topLevelMenu={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection} @@ -315,11 +290,10 @@ 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</div> - <PortalMenu - menuItemStyle={{color: 'black'}} - onClick={this._onMenuButtonClick.bind(this)} - /> + <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}> + Portal DApp + </div> + <PortalMenu menuItemStyle={{ color: 'black' }} onClick={this._onMenuButtonClick.bind(this)} /> </div> ); } @@ -327,15 +301,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { const userAddress = this.props.userAddress; const identiconDiameter = 26; return ( - <div - className="flex right lg-pr0 md-pr2 sm-pr2" - style={{paddingTop: 16}} - > - <div - style={styles.address} - data-tip={true} - data-for="userAddressTooltip" - > + <div className="flex right lg-pr0 md-pr2 sm-pr2" style={{ paddingTop: 16 }}> + <div style={styles.address} data-tip={true} data-for="userAddressTooltip"> {!_.isEmpty(userAddress) ? userAddress : ''} </div> <ReactTooltip id="userAddressTooltip">{userAddress}</ReactTooltip> @@ -369,7 +336,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { return _.includes(this.props.location.pathname, WebsitePaths.Wiki); } private _shouldDisplayBottomBar() { - return this._isViewingWiki() || this._isViewing0xjsDocs() || this._isViewingFAQ() || - this._isViewingSmartContractsDocs() || this._isViewingConnectDocs(); + return ( + this._isViewingWiki() || + this._isViewing0xjsDocs() || + this._isViewingFAQ() || + this._isViewingSmartContractsDocs() || + this._isViewingConnectDocs() + ); } } |