aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-08-29 04:53:49 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-08-29 04:53:49 +0800
commitac1640140c9279ac9e8a92d84702a2f84d9165fb (patch)
treeeaa9eeb9eb01b0e9eab0f9be0d403d4ed0b08af0
parent5785ec0713c39466b3a6a171f5f0a2d38207b44b (diff)
downloaddexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.tar
dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.tar.gz
dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.tar.bz2
dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.tar.lz
dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.tar.xz
dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.tar.zst
dexon-sol-tools-ac1640140c9279ac9e8a92d84702a2f84d9165fb.zip
Enable hovering state for dropdown
-rw-r--r--packages/website/ts/components/ui/drop_down.tsx13
-rw-r--r--packages/website/ts/components/ui/popover.tsx3
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx1
3 files changed, 10 insertions, 7 deletions
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}
/>