aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-08-29 00:18:40 +0800
committerFabio Berger <me@fabioberger.com>2018-08-29 00:18:40 +0800
commit61bfbb86e121f995c2ebf8bf01e758496d3071cc (patch)
tree6dad30509cb6979217c9d841edff2ffc83631cca /packages/website/ts
parent4a524a5f275b80d2e5122ee8a055cf4cc737e32c (diff)
downloaddexon-sol-tools-61bfbb86e121f995c2ebf8bf01e758496d3071cc.tar
dexon-sol-tools-61bfbb86e121f995c2ebf8bf01e758496d3071cc.tar.gz
dexon-sol-tools-61bfbb86e121f995c2ebf8bf01e758496d3071cc.tar.bz2
dexon-sol-tools-61bfbb86e121f995c2ebf8bf01e758496d3071cc.tar.lz
dexon-sol-tools-61bfbb86e121f995c2ebf8bf01e758496d3071cc.tar.xz
dexon-sol-tools-61bfbb86e121f995c2ebf8bf01e758496d3071cc.tar.zst
dexon-sol-tools-61bfbb86e121f995c2ebf8bf01e758496d3071cc.zip
Implement dev topbar
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/documentation/docs_content_top_bar.tsx98
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx2
2 files changed, 73 insertions, 27 deletions
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index c9bdca61b..c2bbfc417 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -3,9 +3,8 @@ import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import * as React from 'react';
import { Link } from 'react-router-dom';
-import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
import { Container } from 'ts/components/ui/container';
-import { Deco, Key, WebsitePaths } from 'ts/types';
+import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -29,6 +28,13 @@ const styles: Styles = {
},
};
+interface MenuItemInfo {
+ title: string;
+ url: string;
+ iconUrl: string;
+ textStyle: React.CSSProperties;
+}
+
export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, DocsContentTopBarState> {
constructor(props: DocsContentTopBarProps) {
super(props);
@@ -49,35 +55,44 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
color: 'black',
cursor: 'pointer',
};
+ 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: '#3289F1', fontWeight: 'bold' },
+ },
+ ];
return (
- <div style={{ height: 75, color: colors.linkSectionGrey }} className="pb1 flex items-center">
- <Container className="flex items-center" width="100%">
+ <div style={{ height: 75 }} className="pb1">
+ <Container className="flex items-center" paddingTop={30} width="100%">
<div className="col col-2">
- <i className="zmdi zmdi-chevron-left" /> 0xproject.com
+ <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 }} />
+ <div className="pl1" style={{ fontSize: 16 }}>
+ 0xproject.com
+ </div>
+ </Link>
</div>
<div className="col col-10">
<div className="flex items-center justify-between right" style={{ width: 300 }}>
- <TopBarMenuItem
- title={this.props.translate.get(Key.Github, Deco.Cap)}
- path={constants.URL_GITHUB_ORG}
- style={styles.menuItem}
- isNightVersion={false}
- isExternal={true}
- />
- <TopBarMenuItem
- title={this.props.translate.get(Key.Forum, Deco.Cap)}
- path={constants.URL_FORUM}
- style={styles.menuItem}
- isNightVersion={false}
- isExternal={true}
- />
- <TopBarMenuItem
- title={this.props.translate.get(Key.LiveChat, Deco.Cap)}
- path={constants.URL_ZEROEX_CHAT}
- style={styles.menuItem}
- isNightVersion={false}
- isExternal={true}
- />
+ {this._renderMenuItems(menuItemInfos)}
</div>
</div>
<div className={'md-hide lg-hide'}>
@@ -86,10 +101,41 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
</div>
</div>
</Container>
+ <div
+ style={{
+ width: '100%',
+ height: 1,
+ backgroundColor: colors.grey300,
+ marginTop: 11,
+ }}
+ />
{this._renderDrawer()}
</div>
);
}
+ 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,
+ }}
+ >
+ <div className="flex">
+ <img src={menuItemInfo.iconUrl} width="18" />
+ <div className="flex items-center" style={{ ...menuItemInfo.textStyle, paddingLeft: 4 }}>
+ {menuItemInfo.title}
+ </div>
+ </div>
+ </a>
+ );
+ });
+ return menuItems;
+ }
private _renderDrawer(): React.ReactNode {
return (
<Drawer
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index b65a27fd9..2a539c84b 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -6,7 +6,7 @@ export const DocsLogo = () => {
return (
<div style={{ paddingTop: 28 }}>
<Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
- <img src="/images/docs_logo.svg" height="30px" />
+ <img src="/images/docs_logo.svg" height="36px" />
</Link>
</div>
);