Merge pull request #467 from trezor/fix/devicemenu-overlay

Fix/devicemenu overlay

src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 
 import COLORS from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
-import { SLIDE_DOWN } from 'config/animations';
+import { SLIDE_DOWN, FADE_IN } from 'config/animations';
 
 import Button from 'components/Button';
 import * as deviceUtils from 'utils/device';
@@ -29,6 +29,14 @@ const Wrapper = styled.div`
     animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards;
 `;
 
+const Overlay = styled.div`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.1);
+    animation: ${FADE_IN} 0.25s;
+`;
+
 const ButtonWrapper = styled.div`
     margin: 10px 0;
     padding: 0 10px;
@@ -115,28 +123,35 @@ class DeviceMenu extends PureComponent<Props> {
     myRef: { current: ?HTMLDivElement };
 
     render() {
-        const { devices, onSelectDevice, forgetDevice } = this.props;
+        const { devices, onSelectDevice, forgetDevice, toggleDeviceDropdown } = this.props;
         const { transport } = this.props.connect;
-        const { selectedDevice } = this.props.wallet;
+        const { selectedDevice, dropdownOpened } = this.props.wallet;
 
         return (
-            <Wrapper ref={this.myRef}>
+            <>
-                {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
+                <Wrapper ref={this.myRef}>
-                {this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
+                    {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
-                <DeviceList
+                    {this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
-                    devices={devices}
+                    <DeviceList
-                    selectedDevice={selectedDevice}
+                        devices={devices}
-                    onSelectDevice={onSelectDevice}
+                        selectedDevice={selectedDevice}
-                    forgetDevice={forgetDevice}
+                        onSelectDevice={onSelectDevice}
+                        forgetDevice={forgetDevice}
+                    />
+                    {deviceUtils.isWebUSB(transport) && (
+                        <ButtonWrapper>
+                            <StyledButton isWebUsb>
+                                <FormattedMessage {...l10nCommonMessages.TR_CHECK_FOR_DEVICES} />
+                            </StyledButton>
+                        </ButtonWrapper>
+                    )}
+                </Wrapper>
+                <Overlay
+                    onClick={() => {
+                        toggleDeviceDropdown(!dropdownOpened);
+                    }}
                 />
-                {deviceUtils.isWebUSB(transport) && (
+            </>
-                    <ButtonWrapper>
-                        <StyledButton isWebUsb>
-                            <FormattedMessage {...l10nCommonMessages.TR_CHECK_FOR_DEVICES} />
-                        </StyledButton>
-                    </ButtonWrapper>
-                )}
-            </Wrapper>
         );
     }
 }

src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js

@@ -9,6 +9,7 @@ import { SLIDE_RIGHT, SLIDE_LEFT } from 'config/animations';
 type Props = {
     children?: React.Node,
     isOpen: ?boolean,
+    deviceMenuOpened: boolean,
 };
 
 type State = {
@@ -18,7 +19,7 @@ type State = {
 const AbsoluteWrapper = styled.aside`
     width: 320px;
     position: relative;
-    overflow-y: auto;
+    overflow-y: ${props => (props.deviceMenuOpened ? 'hidden' : 'auto')};
 
     background: ${colors.MAIN};
     border-top-left-radius: 4px;
@@ -28,7 +29,6 @@ const AbsoluteWrapper = styled.aside`
 
     @media screen and (max-width: ${SCREEN_SIZE.SM}) {
         position: absolute;
-        height: calc(100vh - 52px);
         z-index: 200;
         top: 52px;
         /* Prevents firing SLIDE_LEFT anim on page load.  */
@@ -47,12 +47,19 @@ const SidebarWrapper = styled.div`
     height: 100%;
     display: flex;
     flex-direction: column;
+
+    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
+        height: calc(100vh - 52px);
+    }
 `;
 
 export default class Sidebar extends React.PureComponent<Props, State> {
     render() {
         return (
-            <AbsoluteWrapper isOpen={this.props.isOpen}>
+            <AbsoluteWrapper
+                isOpen={this.props.isOpen}
+                deviceMenuOpened={this.props.deviceMenuOpened}
+            >
                 <SidebarWrapper>{this.props.children}</SidebarWrapper>
             </AbsoluteWrapper>
         );

src/views/Wallet/components/LeftNavigation/index.js

@@ -11,8 +11,8 @@ import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import styled from 'styled-components';
 import DeviceHeader from 'components/DeviceHeader';
 import Backdrop from 'components/Backdrop';
-// import Link from 'components/Link';
 import * as deviceUtils from 'utils/device';
+// import Link from 'components/Link';
 
 import Tooltip from 'components/Tooltip';
 import { FormattedMessage } from 'react-intl';
@@ -59,6 +59,7 @@ const TransitionContentWrapper = styled.div`
 const Footer = styled.div.attrs(props => ({
     style: { position: props.position },
 }))`
+    flex: 0 0 auto;
     width: 320px;
     bottom: 0;
     background: ${colors.MAIN};
@@ -269,7 +270,10 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                     onClick={props.toggleSidebar}
                     animated
                 />
-                <Sidebar isOpen={props.wallet.showSidebar}>
+                <Sidebar
+                    isOpen={props.wallet.showSidebar}
+                    deviceMenuOpened={this.props.wallet.dropdownOpened}
+                >
                     <Header
                         isSelected
                         testId="Main__page__device__header"