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

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 */ /* @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';
@ -19,6 +19,8 @@ import Row from '../Row';
import RowCoin from '../RowCoin'; import RowCoin from '../RowCoin';
const Wrapper = styled.div``;
const Text = styled.span` const Text = styled.span`
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALLER};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
@ -26,12 +28,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 +50,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 +104,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 +124,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>
); );
} }
} }
@ -211,13 +212,13 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
} }
return ( return (
<React.Fragment> <Wrapper>
{backButton} {backButton}
<div> <div>
{selectedAccounts} {selectedAccounts}
</div> </div>
{discoveryStatus} {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 <Divider
textLeft="Other coins" textLeft="Other coins"
textRight="(You will be redirected)" textRight="(You will be redirected)"
borderTop
borderBottom
/> />
{coins.map(coin => ( {coins.map(coin => (
<a key={coin.url} href={coin.url}> <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 */ /* @flow */
import React, { Component } from 'react'; import React, { Component } from 'react';
import TrezorConnect from 'trezor-connect'; import TrezorConnect from 'trezor-connect';
import styled from 'styled-components';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
import type { Props } from '../common'; import type { Props } from '../common';
import AsideDivider from '../Divider'; import Divider from '../Divider';
const Wrapper = styled.div``;
export const DeviceSelect = (props: Props) => { export const DeviceSelect = (props: Props) => {
const { devices } = props; const { devices } = props;
@ -212,12 +214,12 @@ export class DeviceDropdown extends Component<Props> {
return ( return (
<React.Fragment> <Wrapper>
{currentDeviceMenu} {currentDeviceMenu}
{deviceList.length > 1 ? <AsideDivider textLeft="Other devices" /> : null} {deviceList.length > 1 ? <Divider textLeft="Other devices" borderBottom /> : null}
{deviceList} {deviceList}
{webUsbButton} {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 React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -12,12 +12,21 @@ const Wrapper = styled.div`
font-size: ${FONT_SIZE.SMALLER}; font-size: ${FONT_SIZE.SMALLER};
color: ${colors.TEXT_SECONDARY}; color: ${colors.TEXT_SECONDARY};
background: ${colors.GRAY_LIGHT}; background: ${colors.GRAY_LIGHT};
border-top: 1px solid ${colors.DIVIDER}; ${props => props.borderTop && css`
border-bottom: 1px solid ${colors.DIVIDER}; border-top: 1px solid ${colors.DIVIDER};
`}
${props => props.borderBottom && css`
border-bottom: 1px solid ${colors.DIVIDER};
`}
`; `;
const Divider = ({ textLeft, textRight }) => ( const Divider = ({
<Wrapper> textLeft, textRight, borderTop = false, borderBottom = false,
}) => (
<Wrapper
borderTop={borderTop}
borderBottom={borderBottom}
>
<p>{textLeft}</p> <p>{textLeft}</p>
<p>{textRight}</p> <p>{textRight}</p>
</Wrapper> </Wrapper>
@ -26,6 +35,8 @@ const Divider = ({ textLeft, textRight }) => (
Divider.propTypes = { Divider.propTypes = {
textLeft: PropTypes.string, textLeft: PropTypes.string,
textRight: PropTypes.string, textRight: PropTypes.string,
borderTop: PropTypes.bool.isRequired,
borderBottom: PropTypes.bool.isRequired,
}; };
export default Divider; 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 PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import Icon from 'components/Icon'; 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 colors from 'config/colors';
import Row from '../Row'; 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` const RowCoinWrapper = styled.div`
padding: 16px 24px; padding: 16px 24px;
@ -43,10 +58,10 @@ const RowCoin = ({
/> />
</IconWrapper> </IconWrapper>
)} )}
<CoinName <CoinNameWrapper>
coinImg={coin.img} <Logo coinImg={coin.img} />
text={coin.name} <p>{coin.name}</p>
/> </CoinNameWrapper>
</Left> </Left>
{iconRight && ( {iconRight && (
<Icon <Icon

146
src/styles/aside.less
View File

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