arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 11:18:16 +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

41
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,11 +48,9 @@ const RowAccountWrapper = styled.div`
`; `;
const RowAccount = ({ const RowAccount = ({
accountIndex, balance, url, isSelected = false, accountIndex, balance, isSelected = false,
}) => ( }) => (
<NavLink to={url}>
<RowAccountWrapper <RowAccountWrapper
to={url}
isSelected={isSelected} isSelected={isSelected}
> >
<Row column> <Row column>
@ -63,11 +62,10 @@ const RowAccount = ({
)} )}
</Row> </Row>
</RowAccountWrapper> </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}
>
<RowAccount
accountIndex={account.index} accountIndex={account.index}
balance={balance}
url={url} url={url}
balance={balance}
isSelected={urlAccountIndex === account.index}
/> />
</NavLink>
// <NavLink key={i} activeClassName="selected" className="account" to={url}>
// { `Account #${(account.index + 1)}` }
// <span>{ account.loaded ? balance : 'Loading...' }</span>
// </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 = (
<NavLink
to={url}
>
<RowAccount <RowAccount
accountIndex={0} accountIndex={0}
url={url} url={url}
isSelected
/> />
</NavLink>
// <NavLink activeClassName="selected" className="account" to={url}>
// Account #1
// <span>Loading...</span>
// </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;