diff options
Diffstat (limited to 'packages/website/ts/components/documentation')
3 files changed, 256 insertions, 0 deletions
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx new file mode 100644 index 000000000..6f3c3c6e8 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -0,0 +1,22 @@ +import { Link } from '@0xproject/react-shared'; +import * as React from 'react'; +import { WebsitePaths } from 'ts/types'; + +export interface DocsLogoProps { + height: number; + containerStyle?: React.CSSProperties; +} + +export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => { + return ( + <div style={props.containerStyle}> + <Link to={WebsitePaths.Docs}> + <img src="/images/docs_logo.svg" height={props.height} /> + </Link> + </div> + ); +}; + +DocsLogo.defaultProps = { + containerStyle: {}, +}; diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx new file mode 100644 index 000000000..3fea1c714 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -0,0 +1,155 @@ +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; +import * as _ from 'lodash'; +import Drawer from 'material-ui/Drawer'; +import * as React from 'react'; +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface DocsTopBarProps { + location: Location; + translate: Translate; + sectionNameToLinks?: ObjectMap<ALink[]>; +} + +interface DocsTopBarState { + isDrawerOpen: boolean; +} + +interface MenuItemInfo { + title: string; + url: string; + iconUrl: string; + textStyle: React.CSSProperties; +} + +export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { + constructor(props: DocsTopBarProps) { + super(props); + this.state = { + isDrawerOpen: false, + }; + } + public componentWillReceiveProps(nextProps: DocsTopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } + public render(): React.ReactNode { + const menuItemInfos: MenuItemInfo[] = [ + { + title: this.props.translate.get(Key.Github, Deco.Cap), + url: constants.URL_GITHUB_ORG, + iconUrl: '/images/developers/github_icon.svg', + textStyle: { color: colors.linkSectionGrey }, + }, + { + title: this.props.translate.get(Key.Forum, Deco.Cap), + url: constants.URL_FORUM, + iconUrl: '/images/developers/forum_icon.svg', + textStyle: { color: colors.linkSectionGrey }, + }, + { + title: this.props.translate.get(Key.LiveChat, Deco.Cap), + url: constants.URL_ZEROEX_CHAT, + iconUrl: '/images/developers/chat_icon.svg', + textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' }, + }, + ]; + return ( + <Container height={80}> + <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%"> + <Container className="col col-2 sm-hide xs-hide"> + <Link + to={WebsitePaths.Home} + style={{ color: colors.linkSectionGrey }} + className="flex items-center text-decoration-none" + > + <i className="zmdi zmdi-chevron-left bold" style={{ fontSize: 16 }} /> + <Container paddingLeft="8px"> + <Text fontSize="16px" fontColor={colors.linkSectionGrey}> + 0xproject.com + </Text> + </Container> + </Link> + </Container> + <Container className="col col-4 md-hide sm-hide xs-hide" /> + <Container className="col col-6 md-pl4 md-ml4 sm-hide xs-hide"> + <Container className="flex items-center justify-between right" width="300px"> + {this._renderMenuItems(menuItemInfos)} + </Container> + </Container> + <Container className="lg-hide md-hide"> + <DocsLogo height={30} containerStyle={{ paddingTop: 6, paddingLeft: 18 }} /> + </Container> + <Container className="md-hide lg-hide absolute" right="18px" top="12px"> + <i + className="zmdi zmdi-menu" + style={{ + color: colors.grey700, + fontSize: 30, + cursor: 'pointer', + }} + onClick={this._onMenuButtonClick.bind(this)} + /> + </Container> + </Container> + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'11px'} /> + {this._renderDrawer()} + </Container> + ); + } + private _renderMenuItems(menuItemInfos: MenuItemInfo[]): React.ReactNode { + const menuItems = _.map(menuItemInfos, menuItemInfo => { + return ( + <a + key={`menu-item-${menuItemInfo.title}`} + href={menuItemInfo.url} + target="_blank" + className="text-decoration-none" + style={{ + fontSize: 16, + }} + > + <Container className="flex"> + <img src={menuItemInfo.iconUrl} width="18" /> + <div className="flex items-center" style={{ ...menuItemInfo.textStyle, paddingLeft: 4 }}> + {menuItemInfo.title} + </div> + </Container> + </a> + ); + }); + return menuItems; + } + private _renderDrawer(): React.ReactNode { + return ( + <Drawer + open={this.state.isDrawerOpen} + docked={false} + openSecondary={true} + onRequestChange={this._onMenuButtonClick.bind(this)} + > + <Container className="clearfix pl1"> + <NestedSidebarMenu + sectionNameToLinks={this.props.sectionNameToLinks} + shouldDisplaySectionHeaders={true} + shouldReformatMenuItemNames={false} + onMenuItemClick={this._onMenuButtonClick.bind(this)} + /> + </Container> + </Drawer> + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isDrawerOpen: !this.state.isDrawerOpen, + }); + } +} diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx new file mode 100644 index 000000000..a0d99e175 --- /dev/null +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -0,0 +1,79 @@ +import { colors, Link } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export interface TutorialButtonProps { + translate: Translate; + tutorialInfo: TutorialInfo; +} + +export interface TutorialButtonState { + isHovering: boolean; +} + +export class TutorialButton extends React.Component<TutorialButtonProps, TutorialButtonState> { + constructor(props: TutorialButtonProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + return ( + <Link + to={this.props.tutorialInfo.link.to} + shouldOpenInNewTab={this.props.tutorialInfo.link.shouldOpenInNewTab} + onMouseEnter={this._onHover.bind(this)} + onMouseOver={this._onHover.bind(this)} + onMouseLeave={this._onHoverOff.bind(this)} + > + <div + className="flex relative" + style={{ + borderRadius: 4, + border: `1px solid ${this.state.isHovering ? colors.lightLinkBlue : colors.grey325}`, + padding: 20, + marginBottom: 15, + backgroundColor: this.state.isHovering ? colors.lightestBlue : colors.white, + }} + > + <div className="col col-1 flex items-center sm-pr3"> + <img src={this.props.tutorialInfo.iconUrl} height={40} /> + </div> + <div className="lg-pl2 md-pl2 sm-pl3 col col-10"> + <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)} + </Text> + <Text Tag="div" fontColor={colors.grey750} fontSize="16"> + {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)} + </Text> + </div> + <div className="col col-1 flex items-center justify-end"> + <div className="right"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 26, color: colors.lightLinkBlue }} + /> + </div> + </div> + </div> + </Link> + ); + } + private _onHover(_event: React.FormEvent<HTMLInputElement>): void { + if (this.state.isHovering) { + return; + } + this.setState({ + isHovering: true, + }); + } + private _onHoverOff(): void { + this.setState({ + isHovering: false, + }); + } +} |