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

height of the overlay without js calc

Browse Source
pull/467/head
slowbackspace 5 years ago
parent 5f883bfeb8
commit 7f0b1373e3
2 changed files with 4 additions and 26 deletions
Show Stats Download Patch File Download Diff File

10
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
Unescape View File

@ -14,15 +14,10 @@ import l10nCommonMessages from 'views/common.messages';
import MenuItems from './components/MenuItems'; import MenuItems from './components/MenuItems';
import DeviceList from './components/DeviceList'; import DeviceList from './components/DeviceList';
import type { Props as BaseProps } from '../common'; import type { Props } from '../common';
import Divider from '../Divider'; import Divider from '../Divider';
type OwnProps = {
overlayHeight: number,
};
type Props = BaseProps & OwnProps;
const Wrapper = styled.div` const Wrapper = styled.div`
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -37,7 +32,7 @@ const Wrapper = styled.div`
const Overlay = styled.div` const Overlay = styled.div`
position: absolute; position: absolute;
width: 100%; width: 100%;
height: ${props => `${props.height}px`}; height: 100%;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
animation: ${FADE_IN} 0.25s; animation: ${FADE_IN} 0.25s;
`; `;
@ -156,7 +151,6 @@ class DeviceMenu extends PureComponent<Props> {
onClick={() => { onClick={() => {
toggleDeviceDropdown(!dropdownOpened); toggleDeviceDropdown(!dropdownOpened);
}} }}
height={this.props.overlayHeight}
/> />
</> </>
); );

20
src/views/Wallet/components/LeftNavigation/index.js
Unescape View File

@ -163,21 +163,18 @@ type State = {
animationType: ?string, animationType: ?string,
clicked: boolean, clicked: boolean,
bodyMinHeight: number, bodyMinHeight: number,
bodyHeight: number,
}; };
class LeftNavigation extends React.PureComponent<Props, State> { class LeftNavigation extends React.PureComponent<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
this.deviceMenuRef = React.createRef(); this.deviceMenuRef = React.createRef();
this.leftMenuBodyRef = React.createRef();
const { location } = this.props.router; const { location } = this.props.router;
const hasNetwork = location && location.state && location.state.network; const hasNetwork = location && location.state && location.state.network;
this.state = { this.state = {
animationType: hasNetwork ? 'slide-left' : null, animationType: hasNetwork ? 'slide-left' : null,
clicked: false, clicked: false,
bodyMinHeight: 0, bodyMinHeight: 0,
bodyHeight: 0,
}; };
} }
@ -234,17 +231,10 @@ class LeftNavigation extends React.PureComponent<Props, State> {
bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(), bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(),
}); });
} }
if (this.leftMenuBodyRef.current) {
this.setState({
bodyHeight: this.leftMenuBodyRef.current.getBoundingClientRect().height,
});
}
} }
deviceMenuRef: { current: any }; deviceMenuRef: { current: any };
leftMenuBodyRef: { current: any };
render() { render() {
const { props } = this; const { props } = this;
let menu; let menu;
@ -376,14 +366,8 @@ class LeftNavigation extends React.PureComponent<Props, State> {
} }
{...this.props} {...this.props}
/> />
<Body ref={this.leftMenuBodyRef} minHeight={this.state.bodyMinHeight}> <Body minHeight={this.state.bodyMinHeight}>
{dropdownOpened && ( {dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
<DeviceMenu
ref={this.deviceMenuRef}
overlayHeight={this.state.bodyHeight}
{...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">

Write Preview
Loading…
Cancel
Save