From ac1640140c9279ac9e8a92d84702a2f84d9165fb Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 28 Aug 2018 13:53:49 -0700
Subject: Enable hovering state for dropdown

---
 packages/website/ts/components/ui/drop_down.tsx  | 13 +++++++------
 packages/website/ts/components/ui/popover.tsx    |  3 ++-
 packages/website/ts/components/wallet/wallet.tsx |  1 +
 3 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 638b29f88..32105d353 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -32,8 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
-        activateEvent: DropdownMouseEvent.Click,
-        closeEvent: DropdownMouseEvent.Click,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _popoverCloseCheckIntervalId: number;
     public static getDerivedStateFromProps(props: DropDownProps, state: DropDownState): Partial<DropDownState> {
@@ -77,8 +77,6 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                         zIndex={this.props.zDepth}
                     >
                         <div
-                            onMouseEnter={this._onHover.bind(this)}
-                            onMouseLeave={this._onHoverOff.bind(this)}
                             onClick={this._closePopover.bind(this)}
                         >
                             {this.props.popoverContent}
@@ -97,10 +95,13 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         }
     }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
-        this.setState({ isHovering: true });
+        this.setState({
+            isHovering: true,
+            anchorEl: event.currentTarget,
+        });
     }
     private _onHoverOff(): void {
-        this.setState({ isHovering: false });
+        this.setState({ isHovering: false, anchorEl: undefined });
     }
     private _checkIfShouldClosePopover(): void {
         if (!this.state.isDropDownOpen) {
diff --git a/packages/website/ts/components/ui/popover.tsx b/packages/website/ts/components/ui/popover.tsx
index 66c0ac663..556e8b110 100644
--- a/packages/website/ts/components/ui/popover.tsx
+++ b/packages/website/ts/components/ui/popover.tsx
@@ -20,6 +20,7 @@ const PopoverContainer = styled.div`
     max-height: 679px;
     overflow-y: auto;
     border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
 `;
 
 const defaultPlacement: Placement = 'bottom';
@@ -37,7 +38,7 @@ export class Popover extends React.Component<PopoverProps> {
         };
         return (
             <div>
-                <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/>
+                {/* <Overlay onClick={onRequestClose} style={overlayStyleOverrides}/> */}
                 <Popper referenceElement={anchorEl} placement="bottom" eventsEnabled={true}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 968377010..191f3a18a 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -235,6 +235,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                     </SimpleMenu>
                 }
                 zDepth={1}
+                placement="right-end"
                 activateEvent={DropdownMouseEvent.Click}
                 closeEvent={DropdownMouseEvent.Click}
             />
-- 
cgit v1.2.3