arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

fix backdrop still visible after closing app settings on small screens

Browse Source
pull/454/head
slowbackspace 5 years ago
parent 64d958eac8
commit b21cc9cfcd
3 changed files with 108 additions and 103 deletions
Show Stats Download Patch File Download Diff File

3
src/views/Wallet/components/LeftNavigation/Container.js
Unescape 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(

194
src/views/Wallet/components/LeftNavigation/index.js
Unescape 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,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>
</>
);
}
}

14
src/views/Wallet/index.js
Unescape 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>

Write Preview
Loading…
Cancel
Save