diff options
Diffstat (limited to 'packages/website/ts/components')
5 files changed, 49 insertions, 27 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 3f29d5ff3..6d02ebd59 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -51,7 +51,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi this.props.providerType, this.props.injectedProviderName, ); - const hoverActiveNode = ( + const activeNode = ( <Island className="flex items-center py1 px2" style={styles.root}> {this._renderIcon()} <Container marginLeft="12px" marginRight="12px"> @@ -61,14 +61,13 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi </Island> ); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; - const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle'; return ( <div style={{ width: 'fit-content', height: 48, float: 'right' }}> <DropDown - hoverActiveNode={hoverActiveNode} + activeNode={activeNode} popoverContent={this.renderPopoverContent(isExternallyInjectedProvider, hasLedgerProvider)} - anchorOrigin={{ horizontal: horizontalPosition, vertical: 'bottom' }} - targetOrigin={{ horizontal: horizontalPosition, vertical: 'top' }} + anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'middle', vertical: 'top' }} zDepth={1} /> </div> diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index fac6c131f..778536663 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -199,7 +199,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { cursor: 'pointer', paddingTop: 16, }; - const hoverActiveNode = ( + const activeNode = ( <div className="flex relative" style={{ color: menuIconStyle.color }}> <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div> <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}> @@ -224,7 +224,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <div className={menuClasses}> <div className="flex justify-between"> <DropDown - hoverActiveNode={hoverActiveNode} + activeNode={activeNode} popoverContent={popoverContent} anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} targetOrigin={{ horizontal: 'middle', vertical: 'top' }} diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 3738e50eb..3f1fec3f4 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -8,12 +8,13 @@ const DEFAULT_STYLE = { }; interface DropDownProps { - hoverActiveNode: React.ReactNode; + activeNode: React.ReactNode; popoverContent: React.ReactNode; anchorOrigin: MaterialUIPosition; targetOrigin: MaterialUIPosition; style?: React.CSSProperties; zDepth?: number; + shouldWaitForClickToActivate?: boolean; } interface DropDownState { @@ -25,6 +26,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { public static defaultProps: Partial<DropDownProps> = { style: DEFAULT_STYLE, zDepth: 1, + shouldWaitForClickToActivate: false, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -49,7 +51,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { // call hoverOff whenever the dropdown receives updated props. This is a hack // because it will effectively close the dropdown on any prop update, barring // dropdowns from having dynamic content. - // this._onHoverOff(); + this._onHoverOff(); } public render(): React.ReactNode { return ( @@ -58,7 +60,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)} > - {this.props.hoverActiveNode} + <div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div> <Popover open={this.state.isDropDownOpen} anchorEl={this.state.anchorEl} @@ -69,16 +71,31 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { animated={false} zDepth={this.props.zDepth} > - <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}> + <div + onMouseEnter={this._onHover.bind(this)} + onMouseLeave={this._onHoverOff.bind(this)} + onClick={this._closePopover.bind(this)} + > {this.props.popoverContent} </div> </Popover> </div> ); } + private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void { + event.stopPropagation(); + if (this.props.shouldWaitForClickToActivate) { + this.setState({ + isDropDownOpen: true, + anchorEl: event.currentTarget, + }); + } + } private _onHover(event: React.FormEvent<HTMLInputElement>): void { this._isHovering = true; - this._checkIfShouldOpenPopover(event); + if (!this.props.shouldWaitForClickToActivate) { + this._checkIfShouldOpenPopover(event); + } } private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void { if (this.state.isDropDownOpen) { diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 29445c965..22414d101 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -5,15 +5,17 @@ import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; import { colors } from 'ts/style/colors'; -export interface SimpleMenuProps {} +export interface SimpleMenuProps { + minWidth?: number | string; +} -export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children }) => { +export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children, minWidth }) => { return ( <Container marginLeft="16px" marginRight="16px" marginBottom="16px" - minWidth="220px" + minWidth={minWidth} className="flex flex-column" > {children} @@ -26,9 +28,13 @@ export interface SimpleMenuItemProps { onClick?: () => void; } export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ text, onClick }) => ( - <Container marginTop="16px" minWidth="220px" className="flex flex-column"> + <Container marginTop="16px" className="flex flex-column"> <Text fontSize="14px" fontColor={colors.darkGrey} onClick={onClick} hoverColor={colors.mediumBlue}> {text} </Text> </Container> ); + +SimpleMenu.defaultProps = { + minWidth: '220px', +}; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index b43164664..fca6c5745 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -206,7 +206,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const accessory = ( <Container marginRight="15px"> <DropDown - hoverActiveNode={ + activeNode={ <Text className="zmdi zmdi-more-horiz" Tag="i" @@ -218,7 +218,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> } popoverContent={ - <SimpleMenu> + <SimpleMenu minWidth="150px"> <CopyToClipboard text={this.props.userAddress}> <SimpleMenuItem text="Copy Address to Clipboard" onClick={_.noop} /> </CopyToClipboard> @@ -234,19 +234,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> { anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} targetOrigin={{ horizontal: 'right', vertical: 'top' }} zDepth={1} + shouldWaitForClickToActivate={true} /> </Container> ); return ( - <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}> - <StandardIconRow - icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} - main={main} - accessory={accessory} - minHeight="60px" - backgroundColor={colors.white} - /> - </Link> + <StandardIconRow + key={HEADER_ITEM_KEY} + icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} + main={main} + accessory={accessory} + minHeight="60px" + backgroundColor={colors.white} + /> ); } private _renderBody(): React.ReactElement<{}> { |