Implement correct behavior for menu in the wallet

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<{}> {