From 5b6cf447e5793a775d8d590647c85971a6746909 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 15:09:47 -0700 Subject: Make tooltip appear to the left of the toggle when onboarding in progress --- packages/website/ts/components/inputs/allowance_state_toggle.tsx | 5 ++++- packages/website/ts/components/onboarding/onboarding_tooltip.tsx | 2 +- packages/website/ts/components/portal/portal.tsx | 4 ++++ packages/website/ts/components/ui/pointer.tsx | 7 ++++++- packages/website/ts/components/wallet/wallet.tsx | 3 +++ packages/website/ts/containers/inputs/allowance_state_toggle.ts | 2 ++ 6 files changed, 20 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index a812ead5d..764013682 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -5,6 +5,7 @@ import ReactTooltip = require('react-tooltip'); import { Blockchain } from 'ts/blockchain'; import { AllowanceState, AllowanceStateView } from 'ts/components/ui/allowance_state_view'; import { Container } from 'ts/components/ui/container'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { BalanceErrs, Token, TokenState } from 'ts/types'; @@ -21,6 +22,7 @@ export interface AllowanceStateToggleProps { userAddress: string; onErrorOccurred?: (errType: BalanceErrs) => void; refetchTokenStateAsync: () => Promise; + tooltipDirection?: PointerDirection; } export interface AllowanceStateToggleState { @@ -33,6 +35,7 @@ const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1 export class AllowanceStateToggle extends React.Component { public static defaultProps = { onErrorOccurred: _.noop.bind(_), + tooltipDirection: PointerDirection.Right, }; private static _getAllowanceState(tokenState: TokenState): AllowanceState { if (!tokenState.isLoaded) { @@ -62,7 +65,7 @@ export class AllowanceStateToggle extends React.Component diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 15d47908d..ff5f0bab6 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -24,7 +24,7 @@ export const OnboardingTooltip: React.StatelessComponent ); }; OnboardingTooltip.defaultProps = { - pointerDisplay: 'left', + pointerDisplay: PointerDirection.Left, }; OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 1790a9678..c61d04906 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -24,6 +24,7 @@ import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Image } from 'ts/components/ui/image'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { Text } from 'ts/components/ui/text'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; @@ -355,6 +356,9 @@ export class Portal extends React.Component { onAddToken={this._onAddToken.bind(this)} onRemoveToken={this._onRemoveToken.bind(this)} refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} + toggleTooltipDirection={ + this.props.isPortalOnboardingShowing ? PointerDirection.Left : PointerDirection.Right + } /> {!isMobile && {this._renderStartOnboarding()}} diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx index 448786bb4..db0a4188d 100644 --- a/packages/website/ts/components/ui/pointer.tsx +++ b/packages/website/ts/components/ui/pointer.tsx @@ -2,7 +2,12 @@ import { colors } from '@0xproject/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -export type PointerDirection = 'top' | 'right' | 'bottom' | 'left'; +export enum PointerDirection { + Top = 'top', + Right = 'right', + Bottom = 'bottom', + Left = 'left', +} export interface PointerProps { className?: string; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 02b403220..6abaa840b 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -14,6 +14,7 @@ import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { CopyAddressSimpleMenuItem, DifferentWalletSimpleMenuItem, @@ -67,6 +68,7 @@ export interface WalletProps { onRemoveToken: () => void; refetchTokenStateAsync: (tokenAddress: string) => Promise; style: React.CSSProperties; + toggleTooltipDirection?: PointerDirection; } interface WalletState { @@ -420,6 +422,7 @@ export class Wallet extends React.Component { blockchain={this.props.blockchain} token={config.token} tokenState={config.tokenState} + tooltipDirection={this.props.toggleTooltipDirection} refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)} /> ); diff --git a/packages/website/ts/containers/inputs/allowance_state_toggle.ts b/packages/website/ts/containers/inputs/allowance_state_toggle.ts index 2a099b557..70712685e 100644 --- a/packages/website/ts/containers/inputs/allowance_state_toggle.ts +++ b/packages/website/ts/containers/inputs/allowance_state_toggle.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { Blockchain } from 'ts/blockchain'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { State } from 'ts/redux/reducer'; import { BalanceErrs, Token, TokenState } from 'ts/types'; @@ -14,6 +15,7 @@ interface AllowanceStateToggleProps { token: Token; tokenState: TokenState; refetchTokenStateAsync: () => Promise; + tooltipDirection?: PointerDirection; } interface ConnectedState { -- cgit v1.2.3