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

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

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