From de20ef1a49966153f25236ee68b186cd49f8dc20 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 12 Oct 2018 15:54:44 +0200
Subject: Refactor Home so that Dev section chrome is reusable across pages

---
 .../ts/pages/documentation/developers_page.tsx     | 176 +++++++++++++++++++++
 1 file changed, 176 insertions(+)
 create mode 100644 packages/website/ts/pages/documentation/developers_page.tsx

(limited to 'packages/website/ts/pages/documentation/developers_page.tsx')

diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
new file mode 100644
index 000000000..7172a7c66
--- /dev/null
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -0,0 +1,176 @@
+import { ALink, colors, constants as sharedConstants, NestedSidebarMenu } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import DocumentTitle = require('react-document-title');
+import { DocsLogo } from 'ts/components/documentation/docs_logo';
+import { DocsTopBar } from 'ts/components/documentation/docs_top_bar';
+import { Container } from 'ts/components/ui/container';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { ScreenWidths } from 'ts/types';
+import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
+
+const THROTTLE_TIMEOUT = 100;
+const TOP_BAR_HEIGHT = 80;
+const SCROLLER_WIDTH = 4;
+
+export interface DevelopersPageProps {
+    location: Location;
+    translate: Translate;
+    screenWidth: ScreenWidths;
+    dispatcher: Dispatcher;
+    mainContent: React.ReactNode;
+    sectionNameToLinks: ObjectMap<ALink[]>;
+}
+
+export interface DevelopersPageState {
+    isHoveringSidebar: boolean;
+    isHoveringMainContent: boolean;
+    isSidebarScrolling: boolean;
+}
+
+export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> {
+    private readonly _throttledScreenWidthUpdate: () => void;
+    private readonly _throttledSidebarScrolling: () => void;
+    private _sidebarScrollClearingInterval: number;
+    constructor(props: DevelopersPageProps) {
+        super(props);
+        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+        this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT);
+        this.state = {
+            isHoveringSidebar: false,
+            isHoveringMainContent: false,
+            isSidebarScrolling: false,
+        };
+    }
+    public componentDidMount(): void {
+        window.addEventListener('resize', this._throttledScreenWidthUpdate);
+        window.scrollTo(0, 0);
+        this._sidebarScrollClearingInterval = window.setInterval(() => {
+            this.setState({
+                isSidebarScrolling: false,
+            });
+        }, 1000);
+    }
+    public componentWillUnmount(): void {
+        window.removeEventListener('resize', this._throttledScreenWidthUpdate);
+        window.clearInterval(this._sidebarScrollClearingInterval);
+    }
+    public render(): React.ReactNode {
+        const scrollableContainerStyles: React.CSSProperties = {
+            position: 'absolute',
+            top: 80,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            overflowX: 'hidden',
+            overflowY: 'scroll',
+            minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+            WebkitOverflowScrolling: 'touch',
+        };
+        const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
+        const mainContentPadding = isSmallScreen ? 20 : 50;
+        return (
+            <Container
+                className="flex items-center overflow-hidden"
+                width="100%"
+                background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${
+                    colors.white
+                } 50%, ${colors.white} 100%)`}
+            >
+                <DocumentTitle title="0x Docs DevelopersPage" />
+                <Container className="flex mx-auto" height="100vh">
+                    <Container
+                        className="sm-hide xs-hide relative"
+                        width={234}
+                        paddingLeft={22}
+                        paddingRight={22}
+                        paddingTop={0}
+                        backgroundColor={colors.grey100}
+                    >
+                        <Container
+                            borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'}
+                        >
+                            <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px">
+                                <DocsLogo height={36} />
+                            </Container>
+                        </Container>
+                        <div
+                            style={{
+                                ...scrollableContainerStyles,
+                                paddingTop: 27,
+                                overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
+                            }}
+                            onMouseEnter={this._onSidebarHover.bind(this, true)}
+                            onMouseLeave={this._onSidebarHover.bind(this, false)}
+                            onWheel={this._throttledSidebarScrolling}
+                        >
+                            <Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px">
+                                <NestedSidebarMenu
+                                    sectionNameToLinks={this.props.sectionNameToLinks}
+                                    shouldReformatMenuItemNames={false}
+                                />
+                            </Container>
+                        </div>
+                    </Container>
+                    <Container
+                        className="relative"
+                        width={isSmallScreen ? '100vw' : 786}
+                        paddingBottom="100px"
+                        backgroundColor={colors.white}
+                    >
+                        <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}>
+                            <DocsTopBar
+                                location={this.props.location}
+                                translate={this.props.translate}
+                                sectionNameToLinks={this.props.sectionNameToLinks}
+                            />
+                        </Container>
+                        <div
+                            id={sharedConstants.SCROLL_CONTAINER_ID}
+                            className="absolute"
+                            style={{
+                                ...scrollableContainerStyles,
+                                paddingTop: 30,
+                                paddingLeft: mainContentPadding,
+                                paddingRight: this.state.isHoveringMainContent
+                                    ? mainContentPadding - SCROLLER_WIDTH
+                                    : mainContentPadding,
+                                overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden',
+                            }}
+                            onMouseEnter={this._onMainContentHover.bind(this, true)}
+                            onMouseOver={this._onMainContentHover.bind(this, true)}
+                            onMouseLeave={this._onMainContentHover.bind(this, false)}
+                        >
+                            {this.props.mainContent}
+                        </div>
+                    </Container>
+                </Container>
+            </Container>
+        );
+    }
+    private _onSidebarHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void {
+        if (isHovering !== this.state.isHoveringSidebar) {
+            this.setState({
+                isHoveringSidebar: isHovering,
+            });
+        }
+    }
+    private _onMainContentHover(isHovering: boolean, _event: React.FormEvent<HTMLInputElement>): void {
+        if (isHovering !== this.state.isHoveringMainContent) {
+            this.setState({
+                isHoveringMainContent: isHovering,
+            });
+        }
+    }
+    private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void {
+        this.setState({
+            isSidebarScrolling: true,
+        });
+    }
+    private _updateScreenWidth(): void {
+        const newScreenWidth = utils.getScreenWidth();
+        this.props.dispatcher.updateScreenWidth(newScreenWidth);
+    }
+} // tslint:disable:max-file-line-count
-- 
cgit 


From a4604cb2f294f08318aa432b233571ae4e205fd5 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 12 Oct 2018 19:44:18 +0100
Subject: Pass down sidebar instead of sectionNameToLinks

---
 packages/website/ts/pages/documentation/developers_page.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

(limited to 'packages/website/ts/pages/documentation/developers_page.tsx')

diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 7172a7c66..c924fb460 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -1,5 +1,4 @@
-import { ALink, colors, constants as sharedConstants, NestedSidebarMenu } from '@0xproject/react-shared';
-import { ObjectMap } from '@0xproject/types';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
@@ -21,7 +20,7 @@ export interface DevelopersPageProps {
     screenWidth: ScreenWidths;
     dispatcher: Dispatcher;
     mainContent: React.ReactNode;
-    sectionNameToLinks: ObjectMap<ALink[]>;
+    sidebar: React.ReactNode;
 }
 
 export interface DevelopersPageState {
@@ -107,10 +106,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                             onWheel={this._throttledSidebarScrolling}
                         >
                             <Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px">
-                                <NestedSidebarMenu
-                                    sectionNameToLinks={this.props.sectionNameToLinks}
-                                    shouldReformatMenuItemNames={false}
-                                />
+                                {this.props.sidebar}
                             </Container>
                         </div>
                     </Container>
@@ -124,7 +120,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                             <DocsTopBar
                                 location={this.props.location}
                                 translate={this.props.translate}
-                                sectionNameToLinks={this.props.sectionNameToLinks}
+                                sidebar={this.props.sidebar}
                             />
                         </Container>
                         <div
-- 
cgit 


From e0e011eb668a13c25cb5dc64256f89d07e9cbe15 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Sat, 13 Oct 2018 15:10:25 +0100
Subject: Fix sidebar shifting onHover due to scrollbar width

---
 packages/website/ts/pages/documentation/developers_page.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/pages/documentation/developers_page.tsx')

diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index c924fb460..12c00b440 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -70,6 +70,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
         };
         const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
         const mainContentPadding = isSmallScreen ? 20 : 50;
+        const sidebarPadding = 22;
         return (
             <Container
                 className="flex items-center overflow-hidden"
@@ -105,9 +106,17 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                             onMouseLeave={this._onSidebarHover.bind(this, false)}
                             onWheel={this._throttledSidebarScrolling}
                         >
-                            <Container paddingLeft="22px" paddingRight="22px" paddingBottom="100px">
+                            <div
+                                style={{
+                                    paddingBottom: 100,
+                                    paddingLeft: sidebarPadding,
+                                    paddingRight: this.state.isHoveringSidebar
+                                        ? sidebarPadding - SCROLLER_WIDTH
+                                        : sidebarPadding,
+                                }}
+                            >
                                 {this.props.sidebar}
-                            </Container>
+                            </div>
                         </div>
                     </Container>
                     <Container
-- 
cgit 


From c9a0c7872de22cf33f1cb82cf504d0df6923d0e8 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 16:48:39 +0100
Subject: Chore: Only render one sidebar at a time

---
 packages/website/ts/pages/documentation/developers_page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/documentation/developers_page.tsx')

diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 12c00b440..042d80c61 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -115,7 +115,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                                         : sidebarPadding,
                                 }}
                             >
-                                {this.props.sidebar}
+                                {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
                             </div>
                         </div>
                     </Container>
@@ -128,6 +128,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                         <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}>
                             <DocsTopBar
                                 location={this.props.location}
+                                screenWidth={this.props.screenWidth}
                                 translate={this.props.translate}
                                 sidebar={this.props.sidebar}
                             />
-- 
cgit 


From ce151f630d10664353ff1c9172a7495557792abe Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 17:35:40 +0100
Subject: feat: highlighted sidebar as you scroll on doc reference pages

---
 packages/website/ts/pages/documentation/developers_page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/documentation/developers_page.tsx')

diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 042d80c61..e35218a70 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -138,7 +138,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
                             className="absolute"
                             style={{
                                 ...scrollableContainerStyles,
-                                paddingTop: 30,
+                                paddingTop: 0,
                                 paddingLeft: mainContentPadding,
                                 paddingRight: this.state.isHoveringMainContent
                                     ? mainContentPadding - SCROLLER_WIDTH
-- 
cgit 


From 8c6de7f69dc1d2bc543456782c5e70e105026301 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Thu, 18 Oct 2018 13:59:40 +0100
Subject: chore: replace @0xproject with @0x in .tsx files

---
 packages/website/ts/pages/documentation/developers_page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/documentation/developers_page.tsx')

diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index e35218a70..934a4cc36 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
-- 
cgit