arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Merge branch 'styled-components-refactor' of github.com:satoshilabs/trezor-wallet into styled-components-refactor

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-17 13:11:07 +02:00
commit 42a06eb816
7 changed files with 162 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
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';
@ -19,6 +19,8 @@ import Row from '../Row';
import RowCoin from '../RowCoin';
const Wrapper = styled.div``;
const Text = styled.span`
font-size: ${FONT_SIZE.SMALLER};
color: ${colors.TEXT_SECONDARY};
@ -26,12 +28,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 +50,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 +104,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 +124,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>
);
}
}
@ -211,13 +212,13 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
}
return (
<React.Fragment>
<Wrapper>
{backButton}
<div>
{selectedAccounts}
</div>
{discoveryStatus}
</React.Fragment>
</Wrapper>
);
};

2
src/js/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
View File

@ -54,6 +54,8 @@ class CoinMenu extends Component {
<Divider
textLeft="Other coins"
textRight="(You will be redirected)"
borderTop
borderBottom
/>
{coins.map(coin => (
<a key={coin.url} href={coin.url}>

12
src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
View File

@ -1,12 +1,14 @@
/* @flow */
import React, { Component } from 'react';
import TrezorConnect from 'trezor-connect';
import styled from 'styled-components';
import type { TrezorDevice } from 'flowtype';
import type { Props } from '../common';
import AsideDivider from '../Divider';
import Divider from '../Divider';
const Wrapper = styled.div``;
export const DeviceSelect = (props: Props) => {
const { devices } = props;
@ -212,12 +214,12 @@ export class DeviceDropdown extends Component<Props> {
return (
<React.Fragment>
<Wrapper>
{currentDeviceMenu}
{deviceList.length > 1 ? <AsideDivider textLeft="Other devices" /> : null}
{deviceList.length > 1 ? <Divider textLeft="Other devices" borderBottom /> : null}
{deviceList}
{webUsbButton}
</React.Fragment>
</Wrapper>
);
}
}

21
src/js/views/Wallet/components/LeftNavigation/components/Divider/index.js
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
@ -12,12 +12,21 @@ const Wrapper = styled.div`
font-size: ${FONT_SIZE.SMALLER};
color: ${colors.TEXT_SECONDARY};
background: ${colors.GRAY_LIGHT};
border-top: 1px solid ${colors.DIVIDER};
border-bottom: 1px solid ${colors.DIVIDER};
${props => props.borderTop && css`
border-top: 1px solid ${colors.DIVIDER};
`}
${props => props.borderBottom && css`
border-bottom: 1px solid ${colors.DIVIDER};
`}
`;
const Divider = ({ textLeft, textRight }) => (
<Wrapper>
const Divider = ({
textLeft, textRight, borderTop = false, borderBottom = false,
}) => (
<Wrapper
borderTop={borderTop}
borderBottom={borderBottom}
>
<p>{textLeft}</p>
<p>{textRight}</p>
</Wrapper>
@ -26,6 +35,8 @@ const Divider = ({ textLeft, textRight }) => (
Divider.propTypes = {
textLeft: PropTypes.string,
textRight: PropTypes.string,
borderTop: PropTypes.bool.isRequired,
borderBottom: PropTypes.bool.isRequired,
};
export default Divider;

35
src/js/views/Wallet/components/LeftNavigation/components/RowCoin/components/CoinName/index.js
View File

@ -1,35 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';
import { ICON_SIZE } from 'config/variables';
const CoinNameWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;
const Logo = styled.div`
height: ${ICON_SIZE.BASE};
width: ${ICON_SIZE.BASE};
margin-right: 5px;
background-repeat: no-repeat;
background-position: center;
background-size: auto ${ICON_SIZE.BASE};
background-image: url('${props => props.coinImg}');
`;
const CoinName = ({
coinImg, text,
}) => (
<CoinNameWrapper>
{coinImg && <Logo coinImg={coinImg} />}
<p>{text}</p>
</CoinNameWrapper>
);
CoinName.propTypes = {
coinImg: PropTypes.string,
text: PropTypes.string.isRequired,
};
export default CoinName;

27
src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js
View File

@ -2,10 +2,25 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Icon from 'components/Icon';
import { FONT_SIZE } from 'config/variables';
import { ICON_SIZE, FONT_SIZE } from 'config/variables';
import colors from 'config/colors';
import Row from '../Row';
import CoinName from './components/CoinName';
const CoinNameWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;
const Logo = styled.div`
height: ${ICON_SIZE.BASE};
width: ${ICON_SIZE.BASE};
margin-right: 5px;
background-repeat: no-repeat;
background-position: center;
background-size: auto ${ICON_SIZE.BASE};
background-image: url('${props => props.coinImg}');
`;
const RowCoinWrapper = styled.div`
padding: 16px 24px;
@ -43,10 +58,10 @@ const RowCoin = ({
/>
</IconWrapper>
)}
<CoinName
coinImg={coin.img}
text={coin.name}
/>
<CoinNameWrapper>
<Logo coinImg={coin.img} />
<p>{coin.name}</p>
</CoinNameWrapper>
</Left>
{iconRight && (
<Icon

146
src/styles/aside.less
View File

@ -264,7 +264,7 @@ aside {
}
}
a {
// a {
// position: relative;
// display: block;
// cursor: pointer;
@ -280,7 +280,7 @@ aside {
// background-color: @color_gray_light;
// }
&.account {
// &.account {
// height: 64px;
// display: flex;
// flex-direction: column;
@ -293,46 +293,46 @@ aside {
// color: @color_text_secondary;
// }
&:before {
content: '';
width: 0px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: @color_green_primary;
transition: width 0.3s;
}
// &:before {
// content: '';
// width: 0px;
// height: 100%;
// position: absolute;
// top: 0;
// left: 0;
// background: @color_green_primary;
// transition: width 0.3s;
// }
&.selected {
background: @color_white;
// &.selected {
// background: @color_white;
//border-left: 3px solid @color_green_primary;
//border-bottom: 1px solid @color_divider;
//padding-left: 27px;
&:before {
width: 3px;
}
// &:before {
// width: 3px;
// }
&:hover {
background: @color_white;
}
// &:hover {
// background: @color_white;
// }
&:last-child {
// &:last-child {
// border-bottom: 1px solid @color_divider;
&:after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 1px;
line-height: 1px;
background-color: @color_divider;
}
}
}
}
// &:after {
// content: '';
// position: absolute;
// bottom: 0px;
// left: 0px;
// width: 100%;
// height: 1px;
// line-height: 1px;
// background-color: @color_divider;
// }
// }
// }
// }
@ -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,
@ -448,7 +448,7 @@ aside {
// &.zec:before {
// background-image: url('../images/zec-logo.png');
// }
}
// }
// .coin-divider {
// font-size: 12px;
@ -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;