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

76
src/styles/aside.less
View File

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