mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-27 10:48:22 +00:00
fix backdrop still visible after closing app settings on small screens
This commit is contained in:
slowbackspace
parent
64d958eac8
commit
b21cc9cfcd
@ -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(
|
||||
|
||||
@ -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,66 +263,74 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
||||
selectedDevice && selectedDevice.connected && selectedDevice.available;
|
||||
|
||||
return (
|
||||
<Sidebar isOpen={props.wallet.showSidebar}>
|
||||
<Header
|
||||
isSelected
|
||||
testId="Main__page__device__header"
|
||||
isHoverable={false}
|
||||
onClickWrapper={() => {
|
||||
if (isDeviceAccessible || this.props.devices.length > 1) {
|
||||
this.handleOpen();
|
||||
}
|
||||
}}
|
||||
device={selectedDevice}
|
||||
disabled={!isDeviceAccessible && this.props.devices.length === 1}
|
||||
isOpen={this.props.wallet.dropdownOpened}
|
||||
icon={
|
||||
<React.Fragment>
|
||||
{showWalletType && (
|
||||
<Tooltip
|
||||
content={
|
||||
<WalletTooltipMsg
|
||||
walletType={walletType}
|
||||
isDeviceReady={isDeviceReady}
|
||||
/>
|
||||
}
|
||||
maxWidth={200}
|
||||
placement="bottom"
|
||||
enterDelayMs={0.5}
|
||||
>
|
||||
<WalletTypeIconWrapper>
|
||||
<WalletTypeIcon
|
||||
onClick={e => {
|
||||
if (selectedDevice && isDeviceReady) {
|
||||
this.props.duplicateDevice(selectedDevice);
|
||||
e.stopPropagation();
|
||||
<>
|
||||
<StyledBackdrop
|
||||
show={props.wallet.showSidebar}
|
||||
onClick={props.toggleSidebar}
|
||||
animated
|
||||
/>
|
||||
<Sidebar isOpen={props.wallet.showSidebar}>
|
||||
<Header
|
||||
isSelected
|
||||
testId="Main__page__device__header"
|
||||
isHoverable={false}
|
||||
onClickWrapper={() => {
|
||||
if (isDeviceAccessible || this.props.devices.length > 1) {
|
||||
this.handleOpen();
|
||||
}
|
||||
}}
|
||||
device={selectedDevice}
|
||||
disabled={!isDeviceAccessible && this.props.devices.length === 1}
|
||||
isOpen={this.props.wallet.dropdownOpened}
|
||||
icon={
|
||||
<React.Fragment>
|
||||
{showWalletType && (
|
||||
<Tooltip
|
||||
content={
|
||||
<WalletTooltipMsg
|
||||
walletType={walletType}
|
||||
isDeviceReady={isDeviceReady}
|
||||
/>
|
||||
}
|
||||
maxWidth={200}
|
||||
placement="bottom"
|
||||
enterDelayMs={0.5}
|
||||
>
|
||||
<WalletTypeIconWrapper>
|
||||
<WalletTypeIcon
|
||||
onClick={e => {
|
||||
if (selectedDevice && isDeviceReady) {
|
||||
this.props.duplicateDevice(selectedDevice);
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
hoverColor={
|
||||
isDeviceReady
|
||||
? colors.TEXT_PRIMARY
|
||||
: colors.TEXT_SECONDARY
|
||||
}
|
||||
}}
|
||||
hoverColor={
|
||||
isDeviceReady
|
||||
? colors.TEXT_PRIMARY
|
||||
: colors.TEXT_SECONDARY
|
||||
}
|
||||
type={walletType}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
</WalletTypeIconWrapper>
|
||||
</Tooltip>
|
||||
)}
|
||||
{this.props.devices.length > 1 && (
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage {...l10nMessages.TR_NUMBER_OF_DEVICES} />
|
||||
}
|
||||
maxWidth={200}
|
||||
placement="bottom"
|
||||
enterDelayMs={0.5}
|
||||
>
|
||||
<Counter>{this.props.devices.length}</Counter>
|
||||
</Tooltip>
|
||||
)}
|
||||
{/* <Tooltip
|
||||
type={walletType}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
/>
|
||||
</WalletTypeIconWrapper>
|
||||
</Tooltip>
|
||||
)}
|
||||
{this.props.devices.length > 1 && (
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_NUMBER_OF_DEVICES}
|
||||
/>
|
||||
}
|
||||
maxWidth={200}
|
||||
placement="bottom"
|
||||
enterDelayMs={0.5}
|
||||
>
|
||||
<Counter>{this.props.devices.length}</Counter>
|
||||
</Tooltip>
|
||||
)}
|
||||
{/* <Tooltip
|
||||
content={
|
||||
<FormattedMessage
|
||||
{...l10nCommonMessages.TR_APPLICATION_SETTINGS}
|
||||
@ -334,34 +351,35 @@ class LeftNavigation extends React.PureComponent<Props, State> {
|
||||
</Link>
|
||||
</WalletTypeIconWrapper>
|
||||
</Tooltip> */}
|
||||
<Icon
|
||||
canAnimate={this.state.clicked === true}
|
||||
isActive={this.props.wallet.dropdownOpened}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
icon={icons.ARROW_DOWN}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
{...this.props}
|
||||
/>
|
||||
<Body minHeight={this.state.bodyMinHeight}>
|
||||
{dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
|
||||
{isDeviceAccessible && menu}
|
||||
</Body>
|
||||
<Footer data-test="Main__page__footer" key="sticky-footer">
|
||||
<Help>
|
||||
<A
|
||||
href="https://trezor.io/support/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<Icon size={26} icon={icons.CHAT} color={colors.TEXT_SECONDARY} />
|
||||
<FormattedMessage {...l10nMessages.TR_NEED_HELP} />
|
||||
</A>
|
||||
</Help>
|
||||
</Footer>
|
||||
</Sidebar>
|
||||
<Icon
|
||||
canAnimate={this.state.clicked === true}
|
||||
isActive={this.props.wallet.dropdownOpened}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
icon={icons.ARROW_DOWN}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
{...this.props}
|
||||
/>
|
||||
<Body minHeight={this.state.bodyMinHeight}>
|
||||
{dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
|
||||
{isDeviceAccessible && menu}
|
||||
</Body>
|
||||
<Footer data-test="Main__page__footer" key="sticky-footer">
|
||||
<Help>
|
||||
<A
|
||||
href="https://trezor.io/support/"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<Icon size={26} icon={icons.CHAT} color={colors.TEXT_SECONDARY} />
|
||||
<FormattedMessage {...l10nMessages.TR_NEED_HELP} />
|
||||
</A>
|
||||
</Help>
|
||||
</Footer>
|
||||
</Sidebar>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user