aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx16
-rw-r--r--packages/react-shared/src/components/version_drop_down.tsx37
-rw-r--r--packages/website/ts/components/documentation/version_drop_down.tsx83
-rw-r--r--packages/website/ts/components/ui/button.tsx4
-rw-r--r--packages/website/ts/pages/documentation/doc_page.tsx46
5 files changed, 124 insertions, 62 deletions
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 85206569c..440db4b16 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -8,15 +8,11 @@ import { colors } from '../utils/colors';
import { utils } from '../utils/utils';
import { Link } from './link';
-import { VersionDropDown } from './version_drop_down';
export interface NestedSidebarMenuProps {
sectionNameToLinks: ObjectMap<ALink[]>;
sidebarHeader?: React.ReactNode;
shouldDisplaySectionHeaders?: boolean;
- selectedVersion?: string;
- versions?: string[];
- onVersionSelected?: (semver: string) => void;
shouldReformatMenuItemNames?: boolean;
}
@@ -59,21 +55,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>;
}
});
- const maxWidthWithScrollbar = 307;
return (
<div>
{this.props.sidebarHeader}
- {!_.isUndefined(this.props.versions) &&
- !_.isUndefined(this.props.selectedVersion) &&
- !_.isUndefined(this.props.onVersionSelected) && (
- <div style={{ maxWidth: maxWidthWithScrollbar }}>
- <VersionDropDown
- selectedVersion={this.props.selectedVersion}
- versions={this.props.versions}
- onVersionSelected={this.props.onVersionSelected}
- />
- </div>
- )}
<div className="pl1">{navigation}</div>
</div>
);
diff --git a/packages/react-shared/src/components/version_drop_down.tsx b/packages/react-shared/src/components/version_drop_down.tsx
deleted file mode 100644
index 5ff4bed54..000000000
--- a/packages/react-shared/src/components/version_drop_down.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-export interface VersionDropDownProps {
- selectedVersion: string;
- versions: string[];
- onVersionSelected: (semver: string) => void;
-}
-
-export interface VersionDropDownState {}
-
-export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
- public render(): React.ReactNode {
- return (
- <div className="mx-auto" style={{ width: 120 }}>
- <Select value={this.props.selectedVersion} onChange={this._updateSelectedVersion.bind(this)}>
- {this._renderDropDownItems()}
- </Select>
- </div>
- );
- }
- private _renderDropDownItems(): React.ReactNode[] {
- const items = _.map(this.props.versions, version => {
- return (
- <MenuItem key={version} value={version}>
- v{version}
- </MenuItem>
- );
- });
- return items;
- }
- private _updateSelectedVersion(event: React.ChangeEvent<HTMLSelectElement>): void {
- this.props.onVersionSelected(event.target.value);
- }
-}
diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx
new file mode 100644
index 000000000..c7b8667d7
--- /dev/null
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -0,0 +1,83 @@
+import { ALink, colors, Link } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
+import { Text } from 'ts/components/ui/text';
+import { styled } from 'ts/style/theme';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+interface ActiveNodeProps {
+ className?: string;
+ selectedVersion: string;
+}
+
+const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => (
+ <Container className={className} width="70px">
+ <Container className="flex justify-center">
+ <Text fontColor={colors.grey700} fontSize="12px">
+ v {selectedVersion}
+ </Text>
+ <Container paddingLeft="6px">
+ <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} />
+ </Container>
+ </Container>
+ </Container>
+);
+
+const ActiveNode = styled(PlainActiveNode)`
+ cursor: pointer;
+ border: 2px solid ${colors.beigeWhite};
+ border-radius: 4px;
+ padding: 4px 6px 4px 8px;
+`;
+
+interface VersionDropDownProps {
+ selectedVersion: string;
+ versions: string[];
+ onVersionSelected: (semver: string) => void;
+}
+
+interface VersionDropDownState {}
+
+export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
+ public render(): React.ReactNode {
+ const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />;
+ return (
+ <DropDown
+ activateEvent={DropdownMouseEvent.Click}
+ activeNode={activeNode}
+ popoverContent={this._renderDropdownMenu()}
+ anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+ popoverStyle={{ borderRadius: 4 }}
+ />
+ );
+ }
+ private _renderDropdownMenu(): React.ReactNode {
+ const items = _.map(this.props.versions, version => {
+ const isSelected = version === this.props.selectedVersion;
+ return (
+ <Container>
+ <Button
+ borderRadius="0px"
+ padding="0.8em 0em"
+ width="100%"
+ isDisabled={isSelected}
+ onClick={this._onClick.bind(this, version)}
+ >
+ v {version}
+ </Button>
+ </Container>
+ );
+ });
+ const dropdownMenu = <Container width="88px">{items}</Container>;
+ return dropdownMenu;
+ }
+ private _onClick(selectedVersion: string): void {
+ this.props.onVersionSelected(selectedVersion);
+ }
+}
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 75ba7bcff..ccaadc800 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -10,6 +10,7 @@ export interface ButtonProps {
fontFamily?: string;
backgroundColor?: string;
borderColor?: string;
+ borderRadius?: string;
width?: string;
padding?: string;
type?: string;
@@ -29,7 +30,7 @@ export const Button = styled(PlainButton)`
color: ${props => props.fontColor};
transition: background-color, opacity 0.5s ease;
padding: ${props => props.padding};
- border-radius: 6px;
+ border-radius: ${props => props.borderRadius};
font-weight: 500;
outline: none;
font-family: ${props => props.fontFamily};
@@ -52,6 +53,7 @@ export const Button = styled(PlainButton)`
Button.defaultProps = {
fontSize: '12px',
+ borderRadius: '6px',
backgroundColor: colors.white,
width: 'auto',
fontFamily: 'Roboto',
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index bc0dc7b6a..ca2652c76 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -6,12 +6,15 @@ import {
SupportedDocJson,
TypeDocUtils,
} from '@0xproject/react-docs';
-import { NestedSidebarMenu } from '@0xproject/react-shared';
+import { colors, 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 { 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';
@@ -89,7 +92,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
/>
);
const sidebar = (
- <NestedSidebarMenu sectionNameToLinks={sectionNameToLinks} shouldReformatMenuItemNames={false} />
+ <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
);
return (
<DevelopersPage
@@ -102,16 +105,43 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
/>
);
}
+ private _renderSidebarHeader(): React.ReactNode {
+ return (
+ <Container>
+ <Container className="clearfix relative">
+ <Container className="pl1 absolute" bottom="0">
+ <Text fontColor={colors.lightLinkBlue} fontSize="22px" fontWeight="bold">
+ 0x.js
+ </Text>
+ </Container>
+ <Container className="right">
+ <VersionDropDown
+ selectedVersion={this.props.docsVersion}
+ versions={this.props.availableDocVersions}
+ onVersionSelected={this._onVersionSelected.bind(this)}
+ />
+ </Container>
+ </Container>
+ <Container
+ width={'100%'}
+ height={'1px'}
+ backgroundColor={colors.grey300}
+ marginTop="20px"
+ marginBottom="27px"
+ />
+ </Container>
+ );
+ }
private _renderLoading(): React.ReactNode {
return (
- <div className="pt4">
- <div className="center pb2">
+ <Container className="pt4">
+ <Container className="center pb2">
<CircularProgress size={40} thickness={5} />
- </div>
- <div className="center pt2" style={{ paddingBottom: 11 }}>
+ </Container>
+ <Container className="center pt2" paddingBottom="11px">
Loading documentation...
- </div>
- </div>
+ </Container>
+ </Container>
);
}
private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> {