aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-25 06:09:47 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-25 06:11:46 +0800
commit5b6cf447e5793a775d8d590647c85971a6746909 (patch)
tree514783b48fd004e7b52cfc8b5532f93831d7847e /packages
parent3890f8224d371cecbd5c9d0e3d5c4b54f4381fdb (diff)
downloaddexon-sol-tools-5b6cf447e5793a775d8d590647c85971a6746909.tar
dexon-sol-tools-5b6cf447e5793a775d8d590647c85971a6746909.tar.gz
dexon-sol-tools-5b6cf447e5793a775d8d590647c85971a6746909.tar.bz2
dexon-sol-tools-5b6cf447e5793a775d8d590647c85971a6746909.tar.lz
dexon-sol-tools-5b6cf447e5793a775d8d590647c85971a6746909.tar.xz
dexon-sol-tools-5b6cf447e5793a775d8d590647c85971a6746909.tar.zst
dexon-sol-tools-5b6cf447e5793a775d8d590647c85971a6746909.zip
Make tooltip appear to the left of the toggle when onboarding in progress
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/components/inputs/allowance_state_toggle.tsx5
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx2
-rw-r--r--packages/website/ts/components/portal/portal.tsx4
-rw-r--r--packages/website/ts/components/ui/pointer.tsx7
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx3
-rw-r--r--packages/website/ts/containers/inputs/allowance_state_toggle.ts2
6 files changed, 20 insertions, 3 deletions
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<void>;
+ 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<AllowanceStateToggleProps, AllowanceStateToggleState> {
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<AllowanceStateTogglePr
<div
data-tip={true}
data-for={tooltipId}
- data-place="right"
+ data-place={this.props.tooltipDirection}
onClick={this._onToggleAllowanceAsync.bind(this)}
>
<AllowanceStateView allowanceState={this.state.allowanceState} />
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<OnboardingTooltipProps>
);
};
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<PortalProps, PortalState> {
onAddToken={this._onAddToken.bind(this)}
onRemoveToken={this._onRemoveToken.bind(this)}
refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+ toggleTooltipDirection={
+ this.props.isPortalOnboardingShowing ? PointerDirection.Left : PointerDirection.Right
+ }
/>
</Container>
{!isMobile && <Container marginTop="8px">{this._renderStartOnboarding()}</Container>}
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<void>;
style: React.CSSProperties;
+ toggleTooltipDirection?: PointerDirection;
}
interface WalletState {
@@ -420,6 +422,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
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<void>;
+ tooltipDirection?: PointerDirection;
}
interface ConnectedState {