mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-23 23:48:07 +00:00
Top navigation account refactored
This commit is contained in:
parent
0a67ea3038
commit
badc700be8
@ -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,7 +1,6 @@
|
||||
@import './fonts.less';
|
||||
@import './colors.less';
|
||||
@import './mixins.less';
|
||||
@import './content.less';
|
||||
|
||||
@import './reactSelect.less';
|
||||
@import './rcTooltip.less';
|
||||
|
@ -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;
|
@ -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 & 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user