From 7a6a5d75952e8a555fa7f3fc84fdcd26946eea88 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 15 May 2018 14:49:11 -0700 Subject: Modulate number of columns based on screenwidth --- packages/website/ts/components/portal/portal.tsx | 2 +- .../ts/components/relayer_index/relayer_index.tsx | 21 ++++++++++++++++++--- 2 files changed, 19 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index d9d50c5ab..9b1fe69a3 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -383,7 +383,7 @@ export class Portal extends React.Component { return (
} - body={} + body={} /> ); } diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index b327c9817..9e028fc06 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -6,11 +6,12 @@ import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; -import { WebsiteBackendRelayerInfo } from 'ts/types'; +import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; export interface RelayerIndexProps { networkId: number; + screenWidth: ScreenWidths; } interface RelayerIndexState { @@ -35,7 +36,9 @@ const styles: Styles = { }; const CELL_HEIGHT = 290; -const NUMBER_OF_COLUMNS = 4; +const NUMBER_OF_COLUMNS_LARGE = 4; +const NUMBER_OF_COLUMNS_MEDIUM = 3; +const NUMBER_OF_COLUMNS_SMALL = 2; const GRID_PADDING = 20; export class RelayerIndex extends React.Component { @@ -69,11 +72,12 @@ export class RelayerIndex extends React.Component ); } else { + const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth); return (
@@ -107,6 +111,17 @@ export class RelayerIndex extends React.Component Date: Tue, 15 May 2018 14:56:00 -0700 Subject: Fix token link key --- .../website/ts/components/relayer_index/relayer_top_tokens.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index 03c70c9dd..40ab7bd03 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -26,7 +26,14 @@ export const TopTokens: React.StatelessComponent = (props: TopTo {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => { const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel }; const style = index !== 0 ? firstItemStyle : styles.tokenLabel; - return ; + return ( + + ); })}
); @@ -56,7 +63,6 @@ class TokenLink extends React.Component { }; return ( Date: Tue, 15 May 2018 15:11:33 -0700 Subject: Hide wallet component for small screens --- packages/website/ts/components/portal/portal.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9b1fe69a3..121e07e84 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -180,6 +180,8 @@ export class Portal extends React.Component { this.state.tokenManagementState === TokenManagementState.Add ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED; + + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; return (
-- cgit v1.2.3 From 317ff817445c20a64b5978dae1210a515c248f4f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 15 May 2018 16:18:49 -0700 Subject: Set up scaffolding for new drawer --- packages/website/ts/components/top_bar/top_bar.tsx | 17 ++++++++++++++++- packages/website/ts/index.tsx | 17 +++++++++-------- packages/website/ts/utils/utils.ts | 3 +++ 3 files changed, 28 insertions(+), 9 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 5fde007d6..7d5d05c9f 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -18,6 +18,7 @@ import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; export enum TopBarDisplayType { Default, @@ -202,6 +203,8 @@ export class TopBar extends React.Component {
); const popoverContent = {developerSectionMenuItems}; + // TODO : Remove this once we ship portal v2 + const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2(); return (
@@ -274,10 +277,22 @@ export class TopBar extends React.Component {
- {this._renderDrawer()} + {shouldShowPortalV2Drawer ? this._renderPortalV2Drawer() : this._renderDrawer()} ); } + private _renderPortalV2Drawer(): React.ReactNode { + return ( + +
+ + ); + } private _renderDrawer(): React.ReactNode { return ( - System.import(/* webpackChunkName: "portal" */ 'ts/containers/portal'), - ) - : createLazyComponent('LegacyPortal', async () => - System.import(/* webpackChunkName: "legacyPortal" */ 'ts/containers/legacy_portal'), - ); + +// TODO: Remove this once we ship V2 +const LazyPortal = utils.shouldShowPortalV2() + ? createLazyComponent('Portal', async () => + System.import(/* webpackChunkName: "portal" */ 'ts/containers/portal'), + ) + : createLazyComponent('LegacyPortal', async () => + System.import(/* webpackChunkName: "legacyPortal" */ 'ts/containers/legacy_portal'), + ); const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () => System.import(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'), ); diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 3c99bd2fe..c370ac90c 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -314,4 +314,7 @@ export const utils = { return _.includes(window.location.href, configs.DOMAIN_STAGING); }, isDogfood, + shouldShowPortalV2(): boolean { + return this.isDevelopment() || this.isStaging() || this.isDogfood(); + }, }; -- cgit v1.2.3 From 157764c0d9af8eb45a00b78ee392a0df3ad542d1 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 17 May 2018 11:37:30 -0700 Subject: Fix responsiveness broken in rebase --- packages/website/ts/components/portal/portal.tsx | 46 +++++++++++++++++------- 1 file changed, 33 insertions(+), 13 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 121e07e84..e35e99642 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -180,8 +180,6 @@ export class Portal extends React.Component { this.state.tokenManagementState === TokenManagementState.Add ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED; - - const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; return (
@@ -201,14 +199,11 @@ export class Portal extends React.Component { />
- + {
); } - private _renderWalletAndRelayerIndex(): React.ReactNode { - return ; + private _renderMainRoute(): React.ReactNode { + if (this._isSmallScreen()) { + return ; + } else { + return ; + } } - private _renderMenuAndAccountManagement(routeComponentProps: RouteComponentProps): React.ReactNode { - return ; + private _renderOtherRoutes(routeComponentProps: RouteComponentProps): React.ReactNode { + if (this._isSmallScreen()) { + return ; + } else { + return ; + } } private _renderMenu(routeComponentProps: RouteComponentProps): React.ReactNode { return ( @@ -450,13 +453,17 @@ export class Portal extends React.Component { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } + private _isSmallScreen(): boolean { + const result = this.props.screenWidth === ScreenWidths.Sm; + return result; + } } -interface PortalLayoutProps { +interface LargeLayoutProps { left: React.ReactNode; right: React.ReactNode; } -const PortalLayout = (props: PortalLayoutProps) => { +const LargeLayout = (props: LargeLayoutProps) => { return (
@@ -467,4 +474,17 @@ const PortalLayout = (props: PortalLayoutProps) => {
); +}; + +interface SmallLayoutProps { + content: React.ReactNode; +} +const SmallLayout = (props: SmallLayoutProps) => { + return ( +
+
+ {props.content} +
+
+ ); }; // tslint:disable:max-file-line-count -- cgit v1.2.3 From 7c8e9ddc42eb7d58073b3a1b9be587b72cc539bd Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 17 May 2018 11:43:17 -0700 Subject: Fix key issue for portal routes --- packages/website/ts/components/portal/portal.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index e35e99642..a04c0878f 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -320,7 +320,13 @@ export class Portal extends React.Component { return ( {_.map(accountManagementItems, item => { - return ; + return ( + + ); })}} -- cgit v1.2.3 From 1d2617c826afaed60dc07e0f767b3530d20f161b Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 17 May 2018 11:44:24 -0700 Subject: Add custom styling for drawer --- .../website/ts/components/portal/drawer_menu.tsx | 60 ++++++++++++++++++++++ packages/website/ts/components/portal/menu.tsx | 59 +++++++++++++++------ packages/website/ts/components/top_bar/top_bar.tsx | 3 +- 3 files changed, 106 insertions(+), 16 deletions(-) create mode 100644 packages/website/ts/components/portal/drawer_menu.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx new file mode 100644 index 000000000..45f3cbafb --- /dev/null +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -0,0 +1,60 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Menu } from 'ts/components/portal/menu'; +import { Identicon } from 'ts/components/ui/identicon'; +import { utils } from 'ts/utils/utils'; + +const IDENTICON_DIAMETER = 45; +const BORDER_RADIUS = '50%'; + +const styles: Styles = { + root: { + backgroundColor: '#4A4A4A', + width: '100%', + height: '100%', + }, + identicon: { + borderWidth: 3, + borderStyle: 'solid', + borderColor: colors.white, + borderRadius: BORDER_RADIUS, + MozBorderRadius: BORDER_RADIUS, + WebkitBorderRadius: BORDER_RADIUS, + }, + userAddress: { + color: colors.white, + }, +}; + +export interface DrawerMenuProps { + selectedPath?: string; + userAddress?: string; +} +export const DrawerMenu = (props: DrawerMenuProps) => { + return ( +
+
+ +
+ ); +}; + +interface HeaderProps { + userAddress?: string; +} +const Header = (props: HeaderProps) => { + return ( +
+
+ + {!_.isUndefined(props.userAddress) && ( +
+ {utils.getAddressBeginAndEnd(props.userAddress)} +
+ )} +
+
+ ); +}; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 9014d8d42..3a4edc251 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -5,8 +5,16 @@ import { MenuItem } from 'ts/components/ui/menu_item'; import { Environments, WebsitePaths } from 'ts/types'; import { configs } from 'ts/utils/configs'; +export interface MenuTheme { + paddingLeft: number; + textColor: string; + iconColor: string; + selectedIconColor: string; + selectedBackgroundColor: string; +} export interface MenuProps { selectedPath?: string; + theme?: MenuTheme; } interface MenuItemEntry { @@ -16,6 +24,11 @@ interface MenuItemEntry { } const menuItemEntries: MenuItemEntry[] = [ + { + to: `${WebsitePaths.Portal}/`, + labelText: 'Relayer ecosystem', + iconName: 'zmdi-portable-wifi', + }, { to: `${WebsitePaths.Portal}/account`, labelText: 'Account overview', @@ -38,49 +51,65 @@ const menuItemEntries: MenuItemEntry[] = [ }, ]; -const DEFAULT_LABEL_COLOR = colors.darkerGrey; -const DEFAULT_ICON_COLOR = colors.darkerGrey; -const SELECTED_ICON_COLOR = colors.yellow900; - -const LEFT_PADDING = 185; +const DEFAULT_MENU_THEME: MenuTheme = { + paddingLeft: 30, + textColor: colors.white, + iconColor: colors.white, + selectedIconColor: colors.white, + selectedBackgroundColor: '#424242', +}; export const Menu: React.StatelessComponent = (props: MenuProps) => { return ( -
+
{_.map(menuItemEntries, entry => { const selected = entry.to === props.selectedPath; return ( - - + + ); })}
); }; +Menu.defaultProps = { + theme: DEFAULT_MENU_THEME, +}; interface MenuItemLabelProps { title: string; iconName: string; selected: boolean; + theme: MenuTheme; } const MenuItemLabel: React.StatelessComponent = (props: MenuItemLabelProps) => { const styles: Styles = { - iconStyle: { - color: props.selected ? SELECTED_ICON_COLOR : DEFAULT_ICON_COLOR, + root: { + backgroundColor: props.selected ? props.theme.selectedBackgroundColor : undefined, + paddingLeft: props.theme.paddingLeft, + }, + icon: { + color: props.selected ? props.theme.selectedIconColor : props.theme.iconColor, fontSize: 20, }, - textStyle: { - color: DEFAULT_LABEL_COLOR, + text: { + color: props.theme.textColor, fontWeight: props.selected ? 'bold' : 'normal', + fontSize: 16, }, }; return ( -
+
- +
-
+
{props.title}
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 7d5d05c9f..076f90b22 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -9,6 +9,7 @@ import { Link } from 'react-router-dom'; import ReactTooltip = require('react-tooltip'); import { Blockchain } from 'ts/blockchain'; import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu'; +import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { SidebarHeader } from 'ts/components/sidebar_header'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; @@ -289,7 +290,7 @@ export class TopBar extends React.Component { openSecondary={true} onRequestChange={this._onMenuButtonClick.bind(this)} > -
+ ); } -- cgit v1.2.3 From 9ce7be050a04cde0ab5f6e894c70f6f63b0c1fd4 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 17 May 2018 13:35:20 -0700 Subject: Refactor portal specific colors out of react-shared --- .../website/ts/components/inputs/allowance_toggle.tsx | 3 ++- packages/website/ts/components/portal/back_button.tsx | 4 +++- .../ts/components/relayer_index/relayer_grid_tile.tsx | 3 ++- .../ts/components/relayer_index/relayer_index.tsx | 3 ++- .../website/ts/components/top_bar/provider_display.tsx | 8 ++++---- packages/website/ts/components/wallet/wallet.tsx | 2 +- .../ts/components/wallet/wallet_disconnected_item.tsx | 3 ++- .../website/ts/components/wallet/wrap_ether_item.tsx | 3 ++- packages/website/ts/utils/colors.ts | 17 +++++++++++++++++ packages/website/ts/utils/wallet_item_styles.ts | 4 +++- 10 files changed, 38 insertions(+), 12 deletions(-) create mode 100644 packages/website/ts/utils/colors.ts (limited to 'packages/website') diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx index 48c7f9f57..d61dfa87d 100644 --- a/packages/website/ts/components/inputs/allowance_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_toggle.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared'; +import { constants as sharedConstants, Styles } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import Toggle from 'material-ui/Toggle'; @@ -7,6 +7,7 @@ import { Blockchain } from 'ts/blockchain'; import { Dispatcher } from 'ts/redux/dispatcher'; import { BalanceErrs, Token, TokenState } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; +import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index 68934f88e..48858613c 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,7 +1,9 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as React from 'react'; import { Link } from 'react-router-dom'; +import { colors } from 'ts/utils/colors'; + export interface BackButtonProps { to: string; labelText: string; diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 5964dcd56..dc9eeb29d 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import { GridTile } from 'material-ui/GridList'; import * as React from 'react'; @@ -6,6 +6,7 @@ import * as React from 'react'; import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { Token, WebsiteBackendRelayerInfo } from 'ts/types'; +import { colors } from 'ts/utils/colors'; export interface RelayerGridTileProps { relayerInfo: WebsiteBackendRelayerInfo; diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 9e028fc06..e19ab5122 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import FlatButton from 'material-ui/FlatButton'; @@ -8,6 +8,7 @@ import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +import { colors } from 'ts/utils/colors'; export interface RelayerIndexProps { networkId: number; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index bebaa5341..889038652 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,13 +1,15 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; + import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProviderType } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -41,9 +43,7 @@ export class ProviderDisplay extends React.Component Date: Thu, 17 May 2018 17:27:31 -0700 Subject: Fix styling of portal menu --- .../website/ts/components/portal/drawer_menu.tsx | 16 +++++++++---- packages/website/ts/components/portal/menu.tsx | 27 +++++++++++----------- packages/website/ts/components/portal/portal.tsx | 12 ++++++++-- packages/website/ts/utils/colors.ts | 2 ++ 4 files changed, 37 insertions(+), 20 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index 45f3cbafb..75c8ac6c2 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -1,9 +1,11 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Menu } from 'ts/components/portal/menu'; +import { defaultMenuItemEntries, Menu } from 'ts/components/portal/menu'; import { Identicon } from 'ts/components/ui/identicon'; +import { WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; const IDENTICON_DIAMETER = 45; @@ -11,7 +13,7 @@ const BORDER_RADIUS = '50%'; const styles: Styles = { root: { - backgroundColor: '#4A4A4A', + backgroundColor: colors.drawerMenuBackground, width: '100%', height: '100%', }, @@ -33,10 +35,16 @@ export interface DrawerMenuProps { userAddress?: string; } export const DrawerMenu = (props: DrawerMenuProps) => { + const relayerItemEntry = { + to: `${WebsitePaths.Portal}/`, + labelText: 'Relayer ecosystem', + iconName: 'zmdi-portable-wifi', + }; + const menuItemEntries = _.concat(relayerItemEntry, defaultMenuItemEntries); return (
- +
); }; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 3a4edc251..e8353a3b0 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -1,8 +1,9 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { MenuItem } from 'ts/components/ui/menu_item'; import { Environments, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { configs } from 'ts/utils/configs'; export interface MenuTheme { @@ -12,23 +13,20 @@ export interface MenuTheme { selectedIconColor: string; selectedBackgroundColor: string; } -export interface MenuProps { - selectedPath?: string; - theme?: MenuTheme; -} -interface MenuItemEntry { +export interface MenuItemEntry { to: string; labelText: string; iconName: string; } -const menuItemEntries: MenuItemEntry[] = [ - { - to: `${WebsitePaths.Portal}/`, - labelText: 'Relayer ecosystem', - iconName: 'zmdi-portable-wifi', - }, +export interface MenuProps { + selectedPath?: string; + theme?: MenuTheme; + menuItemEntries?: MenuItemEntry[]; +} + +export const defaultMenuItemEntries: MenuItemEntry[] = [ { to: `${WebsitePaths.Portal}/account`, labelText: 'Account overview', @@ -56,13 +54,13 @@ const DEFAULT_MENU_THEME: MenuTheme = { textColor: colors.white, iconColor: colors.white, selectedIconColor: colors.white, - selectedBackgroundColor: '#424242', + selectedBackgroundColor: colors.menuItemDefaultSelectedBackground, }; export const Menu: React.StatelessComponent = (props: MenuProps) => { return (
- {_.map(menuItemEntries, entry => { + {_.map(props.menuItemEntries, entry => { const selected = entry.to === props.selectedPath; return ( @@ -80,6 +78,7 @@ export const Menu: React.StatelessComponent = (props: MenuProps) => { }; Menu.defaultProps = { theme: DEFAULT_MENU_THEME, + menuItemEntries: defaultMenuItemEntries, }; interface MenuItemLabelProps { diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index a04c0878f..898790272 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -13,7 +13,7 @@ import { EthWrappers } from 'ts/components/eth_wrappers'; import { AssetPicker } from 'ts/components/generate_order/asset_picker'; import { BackButton } from 'ts/components/portal/back_button'; import { Loading } from 'ts/components/portal/loading'; -import { Menu } from 'ts/components/portal/menu'; +import { Menu, MenuTheme } from 'ts/components/portal/menu'; import { Section } from 'ts/components/portal/section'; import { TextHeader } from 'ts/components/portal/text_header'; import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; @@ -89,6 +89,7 @@ enum TokenManagementState { const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded); const LEFT_COLUMN_WIDTH = 346; +const MENU_PADDING_LEFT = 185; const styles: Styles = { root: { @@ -259,10 +260,17 @@ export class Portal extends React.Component { } } private _renderMenu(routeComponentProps: RouteComponentProps): React.ReactNode { + const menuTheme: MenuTheme = { + paddingLeft: MENU_PADDING_LEFT, + textColor: colors.darkerGrey, + iconColor: colors.darkerGrey, + selectedIconColor: colors.yellow800, + selectedBackgroundColor: 'transparent', + }; return (
} - body={} + body={} /> ); } diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts index 34db3f77e..5ffdd6ba7 100644 --- a/packages/website/ts/utils/colors.ts +++ b/packages/website/ts/utils/colors.ts @@ -9,6 +9,8 @@ const appColors = { allowanceToggleOffTrack: '#adadad', allowanceToggleOnTrack: sharedColors.mediumBlue, wrapEtherConfirmationButton: sharedColors.mediumBlue, + drawerMenuBackground: '#4a4a4a', + menuItemDefaultSelectedBackground: '#424242', }; export const colors = { -- cgit v1.2.3 From e6e8d49d724fffff9874a525fbdc258d21715f56 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 17 May 2018 17:38:01 -0700 Subject: Close drawer when new path is chosen --- packages/website/ts/components/top_bar/top_bar.tsx | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 076f90b22..2c3273dee 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -95,6 +95,13 @@ export class TopBar extends React.Component { isDrawerOpen: false, }; } + public componentWillReceiveProps(nextProps: TopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } public render(): React.ReactNode { const isNightVersion = this.props.isNightVersion; const isExpandedDisplayType = this.props.displayType === TopBarDisplayType.Expanded; -- cgit v1.2.3 From 26661f30917139f28f0d6a44d81610de7f92166c Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 17 May 2018 20:05:58 -0700 Subject: Wallet instead of balances for small screens --- packages/website/ts/components/portal/portal.tsx | 44 +++++++++++------------- 1 file changed, 21 insertions(+), 23 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 898790272..b992204a7 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -249,7 +249,7 @@ export class Portal extends React.Component { if (this._isSmallScreen()) { return ; } else { - return ; + return ; } } private _renderOtherRoutes(routeComponentProps: RouteComponentProps): React.ReactNode { @@ -278,30 +278,28 @@ export class Portal extends React.Component { const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => t.isTracked); return ( -
} - body={ - - } + ); } + private _renderWalletSection(): React.ReactNode { + return
} body={this._renderWallet()} />; + } private _renderAccountManagement(): React.ReactNode { const accountManagementItems: AccountManagementItem[] = [ { @@ -312,7 +310,7 @@ export class Portal extends React.Component { { pathName: `${WebsitePaths.Portal}/account`, headerText: 'Your Account', - render: this._renderTokenBalances.bind(this), + render: this._isSmallScreen() ? this._renderWallet.bind(this) : this._renderTokenBalances.bind(this), }, { pathName: `${WebsitePaths.Portal}/trades`, -- cgit v1.2.3 From faa2b6237fdb41d48255c21e76f4dc8a49809adf Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 18 May 2018 11:16:22 -0700 Subject: Change number of columns in relayer index for small screens --- packages/website/ts/components/relayer_index/relayer_index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index e19ab5122..8da4e0e10 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -39,7 +39,7 @@ const styles: Styles = { const CELL_HEIGHT = 290; const NUMBER_OF_COLUMNS_LARGE = 4; const NUMBER_OF_COLUMNS_MEDIUM = 3; -const NUMBER_OF_COLUMNS_SMALL = 2; +const NUMBER_OF_COLUMNS_SMALL = 1; const GRID_PADDING = 20; export class RelayerIndex extends React.Component { -- cgit v1.2.3 From e291146443e2dca839e9ee58f823dde3ab71093e Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 18 May 2018 11:36:17 -0700 Subject: Prettier --- packages/website/ts/components/top_bar/provider_display.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 889038652..fc516882a 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -43,7 +43,9 @@ export class ProviderDisplay extends React.Component