arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-15 21:08:57 +00:00
Code Issues Releases Wiki Activity

Top navigation account refactored

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-03 15:04:05 +02:00
parent 0a67ea3038
commit badc700be8
4 changed files with 109 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/styles/content.less
View File

@ -1,58 +0,0 @@
article {
nav {
.account-tabs {
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
padding: 0px 28px; // 20px padding arround links
max-width: 600px;
a {
font-weight: 500;
font-size: 14px;
color: @color_text_secondary;
margin: 0px 4px;
padding: 20px;
.hover();
&.active,
&:hover {
color: @color_text_primary;
}
&:first-child {
margin-left: 0px;
}
&:last-child {
margin-right: 0px;
}
}
.indicator {
position: absolute;
bottom: -1px;
left: 0;
width: 100px;
height: 2px;
background: @color_green_primary;
transition: all 0.3s ease-in-out;
}
}
}
section {
flex: 1;
display: flex;
flex-direction: column;
background: @color_white;
p {
padding: 0px 48px;
color: @color_text_secondary;
}
}
}

1
src/styles/index.less
View File

@ -1,7 +1,6 @@
@import './fonts.less';
@import './colors.less';
@import './mixins.less';
@import './content.less';
@import './reactSelect.less';
@import './rcTooltip.less';

76
src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js Normal file
View File

@ -0,0 +1,76 @@
import styled from 'styled-components';
import colors from 'config/colors';
import React, { Component } from 'react';
const Wrapper = styled.div`
position: absolute;
bottom: 0px;
left: 0;
width: 100px;
height: 2px;
background: ${colors.GREEN_PRIMARY};
transition: all 0.3s ease-in-out;
`;
class Indicator extends Component<Props, State> {
reposition: () => void;
state: State;
constructor(props: Props) {
super(props);
this.state = {
style: {
width: 0,
left: 0,
},
};
this.reposition = this.reposition.bind(this);
}
handleResize() {
this.reposition();
}
componentDidMount() {
this.reposition();
window.addEventListener('resize', this.reposition, false);
}
componentWillUnmount() {
window.removeEventListener('resize', this.reposition, false);
}
componentDidUpdate(newProps: Props) {
this.reposition();
}
reposition() {
const tabs = document.querySelector('.account-tabs');
if (!tabs) return;
const active = tabs.querySelector('.active');
if (!active) return;
const bounds = active.getBoundingClientRect();
const left = bounds.left - tabs.getBoundingClientRect().left;
if (this.state.style.left !== left) {
this.setState({
style: {
width: bounds.width,
left,
},
});
}
}
render() {
return (
<Wrapper style={this.state.style}>{ this.props.pathname }</Wrapper>
);
}
}
export default Indicator;

117
src/views/Wallet/components/TopNavigationAccount/index.js
View File

@ -1,104 +1,53 @@
/* @flow */
import React, { Component } from 'react';
import styled from 'styled-components';
import React from 'react';
import { NavLink } from 'react-router-dom';
import colors from 'config/colors';
import Indicator from './components/Indicator';
const Wrapper = styled.div`
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
padding: 0px 28px;
max-width: 600px;
`;
type Props = {
pathname: string;
}
type State = {
style: {
width: number,
left: number
};
}
const StyledNavLink = styled(NavLink)`
font-weight: 500;
font-size: 14px;
color: ${colors.TEXT_SECONDARY};
margin: 0px 4px;
padding: 20px;
class Indicator extends Component<Props, State> {
reposition: () => void;
state: State;
constructor(props: Props) {
super(props);
this.state = {
style: {
width: 0,
left: 0,
},
};
this.reposition = this.reposition.bind(this);
&.active,
&:hover {
transition: all 0.3s ease-in-out;
color: ${colors.TEXT_PRIMARY};
}
handleResize() {
this.reposition();
&:first-child {
margin-left: 0px;
}
componentDidMount() {
this.reposition();
window.addEventListener('resize', this.reposition, false);
&:last-child {
margin-right: 0px;
}
`;
componentWillUnmount() {
window.removeEventListener('resize', this.reposition, false);
}
componentDidUpdate(newProps: Props) {
this.reposition();
}
reposition() {
const tabs = document.querySelector('.account-tabs');
if (!tabs) return;
const active = tabs.querySelector('.active');
if (!active) return;
const bounds = active.getBoundingClientRect();
const left = bounds.left - tabs.getBoundingClientRect().left;
if (this.state.style.left !== left) {
this.setState({
style: {
width: bounds.width,
left,
},
});
}
}
render() {
return (
<div className="indicator" style={this.state.style}>{ this.props.pathname }</div>
);
}
}
const TopNavigationAccount = (props: any) => {
const urlParams = props.match.params;
const basePath = `/device/${urlParams.device}/network/${urlParams.network}/account/${urlParams.account}`;
return (
<div className="account-tabs">
{/* <NavLink to={ `${basePath}` }>
History
</NavLink> */}
<NavLink exact to={`${basePath}`}>
Summary
</NavLink>
<NavLink to={`${basePath}/send`}>
Send
</NavLink>
<NavLink to={`${basePath}/receive`}>
Receive
</NavLink>
{/* <NavLink to={ `${basePath}/signverify` }>
Sign &amp; Verify
</NavLink> */}
<Wrapper className="account-tabs">
<StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
<StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
<StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
<Indicator pathname={props.match.pathname} />
</div>
</Wrapper>
);
};