From eca862f8182d7aa8fda2db3a288f403ac96a30f4 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 09:56:34 +0100 Subject: copy: Networked liquidity -> shared liquidity --- packages/website/ts/components/dropdowns/developers_drop_down.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index f5d21535a..b279566e0 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -24,7 +24,7 @@ const gettingStartedKeyToLinkInfo2: ALink[] = [ to: `${WebsitePaths.Wiki}#Ethereum-Development`, }, { - title: Key.UseSharedLiquidity, + title: Key.UseNetworkedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; -- cgit v1.2.3 From 16ba01cd2e8b2af7bdeb6779e913ea4b6453dd78 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 14:05:37 +0100 Subject: chore: fix dropdown bug on Firefox and reduced duplicate code --- .../components/dropdowns/developers_drop_down.tsx | 46 +++++++++++----------- 1 file changed, 22 insertions(+), 24 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx index b279566e0..6e85c1499 100644 --- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -89,26 +89,22 @@ export class DevelopersDropDown extends React.Component - - {this._renderTitle('Getting started')} - - - {this._renderLinkSection(gettingStartedKeyToLinkInfo1)} - - {this._renderLinkSection(gettingStartedKeyToLinkInfo2)} + + + {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')} + {this._renderLinkSection(gettingStartedKeyToLinkInfo2)} - - - {this._renderTitle('Popular docs')} - {this._renderLinkSection(popularDocsToLinkInfos)} + + + {this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')} - {this._renderTitle('Useful links')} - {this._renderLinkSection(usefulLinksToLinkInfo)} + {this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')} @@ -127,16 +123,7 @@ export class DevelopersDropDown extends React.Component - - {title.toUpperCase()} - - - ); - } - private _renderLinkSection(links: ALink[]): React.ReactNode { + private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode { const numLinks = links.length; let i = 0; const renderLinks = _.map(links, (link: ALink) => { @@ -159,6 +146,17 @@ export class DevelopersDropDown extends React.Component ); }); - return {renderLinks}; + return ( + + + {!_.isEmpty(title) && ( + + {title.toUpperCase()} + + )} + + {renderLinks} + + ); } } -- cgit v1.2.3 From 0de654bbd52f7d4702cec9f1a9a5a2cbb793181b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 17:40:55 +0100 Subject: fix: scroll lag on doc reference and wiki pages by using react-scroll `spy` and only updating the sidebar menu items whose active state had changed --- .../website/ts/components/nested_sidebar_menu.tsx | 92 ++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 packages/website/ts/components/nested_sidebar_menu.tsx (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx new file mode 100644 index 000000000..7de91bf8c --- /dev/null +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -0,0 +1,92 @@ +import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Text } from 'ts/components/ui/text'; + +export interface NestedSidebarMenuProps { + sectionNameToLinks: ObjectMap; + sidebarHeader?: React.ReactNode; + shouldReformatMenuItemNames?: boolean; +} + +export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { + const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => { + const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName); + const menuItems = _.map(links, (link, i) => { + const menuItemTitle = props.shouldReformatMenuItemNames + ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title)) + : link.title; + const finalLink = { + ...link, + title: menuItemTitle, + }; + return ; + }); + // tslint:disable-next-line:no-unused-variable + return ( +
+
+ {finalSectionName.toUpperCase()} +
+ {menuItems} +
+ ); + }); + return ( +
+ {props.sidebarHeader} +
{navigation}
+
+ ); +}; + +export interface MenuItemProps { + link: ALink; +} + +export interface MenuItemState { + isActive: boolean; +} + +export class MenuItem extends React.Component { + constructor(props: MenuItemProps) { + super(props); + const isActive = window.location.hash.slice(1) === props.link.to; + this.state = { + isActive, + }; + } + public render(): React.ReactNode { + const isActive = this.state.isActive; + return ( + + + + ); + } + private _onActivityChanged(isActive: boolean): void { + this.setState({ + isActive, + }); + } +} -- cgit v1.2.3 From bce90318687b38c35af75cd78bf3ee69271b42ad Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 17:44:49 +0100 Subject: chore: use `colors` module --- packages/website/ts/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index 7de91bf8c..f83833d69 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -70,7 +70,7 @@ export class MenuItem extends React.Component { borderRadius="4px" padding="0.4em 6px" width="100%" - backgroundColor={isActive ? colors.lightLinkBlue : 'rgb(245, 245, 245)'} + backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100} fontSize="14px" textAlign="left" > -- cgit v1.2.3 From ce4da870d79a589913d1660de8cf012b894357c6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 19:38:12 +0100 Subject: chore: use Text --- packages/website/ts/components/nested_sidebar_menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index f83833d69..021e3f0e5 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -27,9 +27,9 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { // tslint:disable-next-line:no-unused-variable return (
-
+ {finalSectionName.toUpperCase()} -
+ {menuItems}
); -- cgit v1.2.3 From b49e5c76e485beead2554027a3ff8af101bce1d5 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 19:38:20 +0100 Subject: Use em for all --- packages/website/ts/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx index 021e3f0e5..db7d55261 100644 --- a/packages/website/ts/components/nested_sidebar_menu.tsx +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -68,7 +68,7 @@ export class MenuItem extends React.Component { >