arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-12 09:00:58 +00:00
Code Issues Releases Wiki Activity

Merge pull request #21 from satoshilabs/fix-sticky-menu

Browse Source 
Fix sticky menu
This commit is contained in:
Szymon Lesisz 2018-09-12 11:41:25 +02:00 committed by GitHub
commit c00dddd123
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
View File

@ -17,11 +17,26 @@ type Props = {
const AsideWrapper = styled.aside`
position: relative;
top: 0;
width: 320px;
min-width: 320px;
overflow-x: hidden;
overflow: hidden;
background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
.fixed {
position: fixed;
border-right: 1px solid ${colors.DIVIDER};
}
.fixed-bottom {
padding-bottom: 60px;
.sticky-bottom {
position: fixed;
bottom: 0;
background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
}
}
`;
const StickyContainerWrapper = styled.div`

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

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import Icon from 'components/Icon';
import Sticky from 'react-sticky-el';
import icons from 'config/icons';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import styled from 'styled-components';
@ -11,6 +12,8 @@ import CoinMenu from './components/CoinMenu';
import DeviceMenu from './components/DeviceMenu';
import StickyContainer from './components/StickyContainer';
const Header = styled(DeviceHeader)``;
const TransitionGroupWrapper = styled(TransitionGroup)`
width: 640px;
`;
@ -21,14 +24,15 @@ const TransitionContentWrapper = styled.div`
vertical-align: top;
`;
const StickyBottom = styled.div`
const Footer = styled.div`
position: fixed;
bottom: 0;
background: ${colors.MAIN};
border-right: 1px solid ${colors.DIVIDER};
`;
const MenuWrapper = styled.div`
const Body = styled.div`
overflow: auto;
background: ${colors.LANDING};
`;
@ -40,11 +44,6 @@ const Help = styled.div`
width: 319px;
padding: 8px 0px;
border-top: 1px solid ${colors.DIVIDER};
&.fixed {
position: fixed;
bottom: 0px;
}
`;
const A = styled.a`
@ -150,28 +149,25 @@ class LeftNavigation extends Component {
}
render() {
const { selectedDevice } = this.props.wallet;
return (
<StickyContainer
location={this.props.location.pathname}
deviceSelection={this.props.deviceDropdownOpened}
>
{selectedDevice && (
<DeviceHeader
onClickWrapper={() => this.handleOpen()}
device={this.props.wallet.selectedDevice}
transport={this.props.connect.transport}
devices={this.props.devices}
isOpen={this.props.deviceDropdownOpened}
{...this.props}
/>
) }
<MenuWrapper>
<Header
onClickWrapper={() => this.handleOpen()}
device={this.props.wallet.selectedDevice}
transport={this.props.connect.transport}
devices={this.props.devices}
isOpen={this.props.deviceDropdownOpened}
{...this.props}
/>
<Body>
{this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
{this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}
{this.shouldRenderCoins() && this.getMenuTransition(<CoinMenu {...this.props} />)}
</MenuWrapper>
<StickyBottom>
</Body>
<Footer className="sticky-bottom">
<Help>
<A
href="https://trezor.io/support/"
@ -181,7 +177,8 @@ class LeftNavigation extends Component {
<Icon size={26} icon={icons.CHAT} color={colors.TEXT_SECONDARY} />Need help?
</A>
</Help>
</StickyBottom>
</Footer>
<Sticky />
</StickyContainer>
);
}

2
src/views/Wallet/index.js
View File

@ -83,7 +83,7 @@ const Wallet = (props: WalletContainerProps) => (
<AppWrapper>
<Header />
<WalletWrapper>
<LeftNavigation />
{props.wallet.selectedDevice && <LeftNavigation />}
<MainContent>
<Navigation>
<Route path="/device/:device/network/:network/account/:account" component={TopNavigationAccount} />