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

Style RowAccount & add selection

Browse Source
This commit is contained in:
Vasek Mlejnsky 2018-08-17 12:53:49 +02:00
parent f534e76f64
commit 18425310de
2 changed files with 77 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
View File

@ -1,5 +1,5 @@
/* @flow */ /* @flow */
import React, { components } from 'react'; import React, { Component } from 'react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import colors from 'config/colors'; import colors from 'config/colors';
import Loader from 'components/LoaderCircle'; import Loader from 'components/LoaderCircle';
@ -26,12 +26,13 @@ const Text = styled.span`
const RowAccountWrapper = styled.div` const RowAccountWrapper = styled.div`
height: 64px; height: 64px;
padding: 16px 0 16px 24px;
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
border-top: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.DIVIDER};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
${props => props.isSelected && css` ${props => props.isSelected && css`
border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY}; border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY};
background: ${colors.WHITE}; background: ${colors.WHITE};
@ -47,27 +48,24 @@ const RowAccountWrapper = styled.div`
`; `;
const RowAccount = ({ const RowAccount = ({
accountIndex, balance, url, isSelected = false, accountIndex, balance, isSelected = false,
}) => ( }) => (
<NavLink to={url}> <RowAccountWrapper
<RowAccountWrapper isSelected={isSelected}
to={url} >
isSelected={isSelected} <Row column>
> Account #{accountIndex + 1}
<Row column> {balance ? (
Account #{accountIndex + 1} <Text>{balance}</Text>
{balance ? ( ) : (
<Text>{balance}</Text> <Text>Loading...</Text>
) : ( )}
<Text>Loading...</Text> </Row>
)} </RowAccountWrapper>
</Row>
</RowAccountWrapper>
</NavLink>
); );
RowAccount.propTypes = { RowAccount.propTypes = {
accountIndex: PropTypes.number.isRequired, accountIndex: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
balance: PropTypes.string, balance: PropTypes.string,
isSelected: PropTypes.bool, isSelected: PropTypes.bool,
}; };
@ -104,18 +102,19 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
} }
} }
const urlAccountIndex = parseInt(props.location.state.account);
return ( return (
<RowAccount <NavLink
to={url}
key={account.index} key={account.index}
accountIndex={account.index} >
balance={balance} <RowAccount
url={url} accountIndex={account.index}
/> url={url}
balance={balance}
// <NavLink key={i} activeClassName="selected" className="account" to={url}> isSelected={urlAccountIndex === account.index}
// { `Account #${(account.index + 1)}` } />
// <span>{ account.loaded ? balance : 'Loading...' }</span> </NavLink>
// </NavLink>
); );
}); });
@ -123,15 +122,15 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
if (selected.connected) { if (selected.connected) {
const url: string = location.pathname.replace(/account+\/([0-9]*)/, 'account/0'); const url: string = location.pathname.replace(/account+\/([0-9]*)/, 'account/0');
selectedAccounts = ( selectedAccounts = (
<RowAccount <NavLink
accountIndex={0} to={url}
url={url} >
/> <RowAccount
accountIndex={0}
// <NavLink activeClassName="selected" className="account" to={url}> url={url}
// Account #1 isSelected
// <span>Loading...</span> />
// </NavLink> </NavLink>
); );
} }
} }

76
src/styles/aside.less
View File

@ -376,37 +376,37 @@ aside {
// } // }
// } // }
&.back { // &.back {
padding-left: 80px; // padding-left: 80px;
&:before { // &:before {
content: ''; // content: '';
position: absolute; // position: absolute;
display: block; // display: block;
width: 20px; // width: 20px;
height: 20px; // height: 20px;
left: 56px; // left: 56px;
top: 0px; // top: 0px;
bottom: 0px; // bottom: 0px;
margin: auto 0; // margin: auto 0;
background-repeat: no-repeat; // background-repeat: no-repeat;
background-position: center; // background-position: center;
background-size: auto 20px; // background-size: auto 20px;
} // }
&:after { // &:after {
.icomoon-arrow-left; // .icomoon-arrow-left;
position: absolute; // position: absolute;
display: block; // display: block;
width: 20px; // width: 20px;
height: 20px; // height: 20px;
left: 24px; // left: 24px;
top: 0px; // top: 0px;
bottom: 0px; // bottom: 0px;
margin: auto 0; // margin: auto 0;
font-size: 20px; // font-size: 20px;
} // }
} // }
// &.ethereum:before, // &.ethereum:before,
// &.ethereum-classic:before, // &.ethereum-classic:before,
@ -465,15 +465,15 @@ aside {
// } // }
// } // }
.device-divider { // .device-divider {
font-size: 12px; // font-size: 12px;
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
color: @color_text_secondary; // color: @color_text_secondary;
background: @color_gray_light; // background: @color_gray_light;
padding: 8px 28px 8px 24px; // padding: 8px 28px 8px 24px;
border-bottom: 1px solid @color_divider; // border-bottom: 1px solid @color_divider;
} // }
.help { .help {
width: 319px; // - 1px border-roght; 320px; width: 319px; // - 1px border-roght; 320px;