arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-07-07 23:28:09 +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 */
import { toggleDeviceDropdown } from 'actions/WalletActions';
import { toggleDeviceDropdown, toggleSidebar } from 'actions/WalletActions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
@ -42,6 +42,7 @@ const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps>
gotoDeviceSettings: bindActionCreators(RouterActions.gotoDeviceSettings, dispatch),
onSelectDevice: bindActionCreators(RouterActions.selectDevice, dispatch),
gotoExternalWallet: bindActionCreators(ModalActions.gotoExternalWallet, dispatch),
toggleSidebar: bindActionCreators(toggleSidebar, dispatch),
});
export default withRouter(

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

@ -3,13 +3,14 @@
import * as React from 'react';
import PropTypes from 'prop-types';
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 WalletTypeIcon from 'components/images/WalletType';
import icons from 'config/icons';
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';
@ -98,6 +99,14 @@ type TransitionMenuProps = {
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
// in order to StickyContainer be recalculated
const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGroup> => (
@ -254,6 +263,12 @@ class LeftNavigation extends React.PureComponent<Props, State> {
selectedDevice && selectedDevice.connected && selectedDevice.available;
return (
<>
<StyledBackdrop
show={props.wallet.showSidebar}
onClick={props.toggleSidebar}
animated
/>
<Sidebar isOpen={props.wallet.showSidebar}>
<Header
isSelected
@ -304,7 +319,9 @@ class LeftNavigation extends React.PureComponent<Props, State> {
{this.props.devices.length > 1 && (
<Tooltip
content={
<FormattedMessage {...l10nMessages.TR_NUMBER_OF_DEVICES} />
<FormattedMessage
{...l10nMessages.TR_NUMBER_OF_DEVICES}
/>
}
maxWidth={200}
placement="bottom"
@ -362,6 +379,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
</Help>
</Footer>
</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 Log from 'components/Log';
import Backdrop from 'components/Backdrop';
import LeftNavigation from './components/LeftNavigation/Container';
import TopNavigationAccount from './components/TopNavigationAccount';
@ -110,14 +109,6 @@ const Body = styled.div`
flex-direction: column;
`;
const StyledBackdrop = styled(Backdrop)`
display: none;
@media screen and (max-width: ${SCREEN_SIZE.SM}) {
display: initial;
}
`;
const Wallet = (props: Props) => (
<AppWrapper>
<Header
@ -127,11 +118,6 @@ const Wallet = (props: Props) => (
/>
<AppNotifications />
<WalletWrapper>
<StyledBackdrop
show={props.wallet.showSidebar}
onClick={props.toggleSidebar}
animated
/>
{props.wallet.selectedDevice && <LeftNavigation />}
<MainContent preventBgScroll={props.wallet.showSidebar}>
<Navigation>