arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-07-07 15:18:13 +00:00
Code Issues Releases Wiki Activity

fix backdrop still visible after closing app settings on small screens

Browse Source
This commit is contained in:
slowbackspace 2019-03-14 17:27:33 +01:00
parent 64d958eac8
commit b21cc9cfcd
3 changed files with 108 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/Wallet/components/LeftNavigation/Container.js
View File

@ -1,5 +1,5 @@
/* @flow */ /* @flow */
import { toggleDeviceDropdown } from 'actions/WalletActions'; import { toggleDeviceDropdown, toggleSidebar } from 'actions/WalletActions';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
@ -42,6 +42,7 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
gotoDeviceSettings: bindActionCreators(RouterActions.gotoDeviceSettings, dispatch), gotoDeviceSettings: bindActionCreators(RouterActions.gotoDeviceSettings, dispatch),
onSelectDevice: bindActionCreators(RouterActions.selectDevice, dispatch), onSelectDevice: bindActionCreators(RouterActions.selectDevice, dispatch),
gotoExternalWallet: bindActionCreators(ModalActions.gotoExternalWallet, dispatch), gotoExternalWallet: bindActionCreators(ModalActions.gotoExternalWallet, dispatch),
toggleSidebar: bindActionCreators(toggleSidebar, dispatch),
}); });
export default withRouter( export default withRouter(

22
src/views/Wallet/components/LeftNavigation/index.js
View File

@ -3,13 +3,14 @@
import * as React from 'react'; import * as React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import colors from 'config/colors'; import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE, SCREEN_SIZE } from 'config/variables';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import WalletTypeIcon from 'components/images/WalletType'; import WalletTypeIcon from 'components/images/WalletType';
import icons from 'config/icons'; import icons from 'config/icons';
import { TransitionGroup, CSSTransition } from 'react-transition-group'; import { TransitionGroup, CSSTransition } from 'react-transition-group';
import styled from 'styled-components'; import styled from 'styled-components';
import DeviceHeader from 'components/DeviceHeader'; import DeviceHeader from 'components/DeviceHeader';
import Backdrop from 'components/Backdrop';
// import Link from 'components/Link'; // import Link from 'components/Link';
import * as deviceUtils from 'utils/device'; import * as deviceUtils from 'utils/device';
@ -98,6 +99,14 @@ type TransitionMenuProps = {
children?: React.Node, children?: React.Node,
}; };
const StyledBackdrop = styled(Backdrop)`
display: none;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
display: initial;
}
`;
// TransitionMenu needs to dispatch window.resize event // TransitionMenu needs to dispatch window.resize event
// in order to StickyContainer be recalculated // in order to StickyContainer be recalculated
const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => ( const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => (
@ -254,6 +263,12 @@ class LeftNavigation extends React.PureComponent<Props, State> {
selectedDevice && selectedDevice.connected && selectedDevice.available; selectedDevice && selectedDevice.connected && selectedDevice.available;
return ( return (
<>
<StyledBackdrop
show={props.wallet.showSidebar}
onClick={props.toggleSidebar}
animated
/>
<Sidebar isOpen={props.wallet.showSidebar}> <Sidebar isOpen={props.wallet.showSidebar}>
<Header <Header
isSelected isSelected
@ -304,7 +319,9 @@ class LeftNavigation extends React.PureComponent<Props, State> {
{this.props.devices.length > 1 && ( {this.props.devices.length > 1 && (
<Tooltip <Tooltip
content={ content={
<FormattedMessage {...l10nMessages.TR_NUMBER_OF_DEVICES} /> <FormattedMessage
{...l10nMessages.TR_NUMBER_OF_DEVICES}
/>
} }
maxWidth={200} maxWidth={200}
placement="bottom" placement="bottom"
@ -362,6 +379,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
</Help> </Help>
</Footer> </Footer>
</Sidebar> </Sidebar>
</>
); );
} }
} }

14
src/views/Wallet/index.js
View File

@ -23,7 +23,6 @@ import ContextNotifications from 'components/notifications/Context';
import { SCREEN_SIZE } from 'config/variables'; import { SCREEN_SIZE } from 'config/variables';
import Log from 'components/Log'; import Log from 'components/Log';
import Backdrop from 'components/Backdrop';
import LeftNavigation from './components/LeftNavigation/Container'; import LeftNavigation from './components/LeftNavigation/Container';
import TopNavigationAccount from './components/TopNavigationAccount'; import TopNavigationAccount from './components/TopNavigationAccount';
@ -110,14 +109,6 @@ const Body = styled.div`
flex-direction: column; flex-direction: column;
`; `;
const StyledBackdrop = styled(Backdrop)`
display: none;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
display: initial;
}
`;
const Wallet = (props: Props) => ( const Wallet = (props: Props) => (
<AppWrapper> <AppWrapper>
<Header <Header
@ -127,11 +118,6 @@ const Wallet = (props: Props) => (
/> />
<AppNotifications /> <AppNotifications />
<WalletWrapper> <WalletWrapper>
<StyledBackdrop
show={props.wallet.showSidebar}
onClick={props.toggleSidebar}
animated
/>
{props.wallet.selectedDevice && <LeftNavigation />} {props.wallet.selectedDevice && <LeftNavigation />}
<MainContent preventBgScroll={props.wallet.showSidebar}> <MainContent preventBgScroll={props.wallet.showSidebar}>
<Navigation> <Navigation>