arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-07-07 07:12:34 +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(

194
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,66 +263,74 @@ class LeftNavigation extends React.PureComponent<Props, State> {
selectedDevice && selectedDevice.connected && selectedDevice.available; selectedDevice && selectedDevice.connected && selectedDevice.available;
return ( return (
<Sidebar isOpen={props.wallet.showSidebar}> <>
<Header <StyledBackdrop
isSelected show={props.wallet.showSidebar}
testId="Main__page__device__header" onClick={props.toggleSidebar}
isHoverable={false} animated
onClickWrapper={() => { />
if (isDeviceAccessible || this.props.devices.length > 1) { <Sidebar isOpen={props.wallet.showSidebar}>
this.handleOpen(); <Header
} isSelected
}} testId="Main__page__device__header"
device={selectedDevice} isHoverable={false}
disabled={!isDeviceAccessible && this.props.devices.length === 1} onClickWrapper={() => {
isOpen={this.props.wallet.dropdownOpened} if (isDeviceAccessible || this.props.devices.length > 1) {
icon={ this.handleOpen();
<React.Fragment> }
{showWalletType && ( }}
<Tooltip device={selectedDevice}
content={ disabled={!isDeviceAccessible && this.props.devices.length === 1}
<WalletTooltipMsg isOpen={this.props.wallet.dropdownOpened}
walletType={walletType} icon={
isDeviceReady={isDeviceReady} <React.Fragment>
/> {showWalletType && (
} <Tooltip
maxWidth={200} content={
placement="bottom" <WalletTooltipMsg
enterDelayMs={0.5} walletType={walletType}
> isDeviceReady={isDeviceReady}
<WalletTypeIconWrapper> />
<WalletTypeIcon }
onClick={e => { maxWidth={200}
if (selectedDevice && isDeviceReady) { placement="bottom"
this.props.duplicateDevice(selectedDevice); enterDelayMs={0.5}
e.stopPropagation(); >
<WalletTypeIconWrapper>
<WalletTypeIcon
onClick={e => {
if (selectedDevice && isDeviceReady) {
this.props.duplicateDevice(selectedDevice);
e.stopPropagation();
}
}}
hoverColor={
isDeviceReady
? colors.TEXT_PRIMARY
: colors.TEXT_SECONDARY
} }
}} type={walletType}
hoverColor={ size={25}
isDeviceReady color={colors.TEXT_SECONDARY}
? colors.TEXT_PRIMARY />
: colors.TEXT_SECONDARY </WalletTypeIconWrapper>
} </Tooltip>
type={walletType} )}
size={25} {this.props.devices.length > 1 && (
color={colors.TEXT_SECONDARY} <Tooltip
/> content={
</WalletTypeIconWrapper> <FormattedMessage
</Tooltip> {...l10nMessages.TR_NUMBER_OF_DEVICES}
)} />
{this.props.devices.length > 1 && ( }
<Tooltip maxWidth={200}
content={ placement="bottom"
<FormattedMessage {...l10nMessages.TR_NUMBER_OF_DEVICES} /> enterDelayMs={0.5}
} >
maxWidth={200} <Counter>{this.props.devices.length}</Counter>
placement="bottom" </Tooltip>
enterDelayMs={0.5} )}
> {/* <Tooltip
<Counter>{this.props.devices.length}</Counter>
</Tooltip>
)}
{/* <Tooltip
content={ content={
<FormattedMessage <FormattedMessage
{...l10nCommonMessages.TR_APPLICATION_SETTINGS} {...l10nCommonMessages.TR_APPLICATION_SETTINGS}
@ -334,34 +351,35 @@ class LeftNavigation extends React.PureComponent<Props, State> {
</Link> </Link>
</WalletTypeIconWrapper> </WalletTypeIconWrapper>
</Tooltip> */} </Tooltip> */}
<Icon <Icon
canAnimate={this.state.clicked === true} canAnimate={this.state.clicked === true}
isActive={this.props.wallet.dropdownOpened} isActive={this.props.wallet.dropdownOpened}
size={25} size={25}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
icon={icons.ARROW_DOWN} icon={icons.ARROW_DOWN}
/> />
</React.Fragment> </React.Fragment>
} }
{...this.props} {...this.props}
/> />
<Body minHeight={this.state.bodyMinHeight}> <Body minHeight={this.state.bodyMinHeight}>
{dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />} {dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
{isDeviceAccessible && menu} {isDeviceAccessible && menu}
</Body> </Body>
<Footer data-test="Main__page__footer" key="sticky-footer"> <Footer data-test="Main__page__footer" key="sticky-footer">
<Help> <Help>
<A <A
href="https://trezor.io/support/" href="https://trezor.io/support/"
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<Icon size={26} icon={icons.CHAT} color={colors.TEXT_SECONDARY} /> <Icon size={26} icon={icons.CHAT} color={colors.TEXT_SECONDARY} />
<FormattedMessage {...l10nMessages.TR_NEED_HELP} /> <FormattedMessage {...l10nMessages.TR_NEED_HELP} />
</A> </A>
</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>