From 50a877eac2a4be5c7559e3a9c3426c8f2f16e869 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 20 Aug 2018 13:31:22 +0200 Subject: [PATCH 001/179] Added margin for logos --- .../components/LeftNavigation/components/RowCoin/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js index 455c747b..71d0f7ac 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js @@ -43,6 +43,10 @@ const IconWrapper = styled.div` margin-right: 10px; `; +const LogoWrapper = styled.div` + margin-right: 3px; +`; + const RowCoin = ({ coin, iconLeft, iconRight, }) => ( @@ -59,7 +63,9 @@ const RowCoin = ({ )} - + + +

{coin.name}

 From 9ba8cfaab8f40163b613ea1a94049acecc6e1835 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 20 Aug 2018 13:31:59 +0200 Subject: [PATCH 002/179] Add disabled option "Add account" button --- .../components/AccountMenu/index.js | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index 63976041..abb620d6 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -87,6 +87,13 @@ const AddAccountWrapper = styled.div` color: ${colors.TEXT_PRIMARY}; transition: background-color ${TRANSITION_TIME.BASE} ease-in-out, color ${TRANSITION_TIME.BASE} ease-in-out, border-color ${TRANSITION_TIME.BASE} ease-in-out; } + + ${props => props.disabled && css` + cursor: not-allowed; + &:hover { + color: ${colors.TEXT_SECONDARY}; + } + `} `; const AddAccountIconWrapper = styled.div` @@ -248,9 +255,19 @@ const AccountMenu = (props: Props): ?React$Element => { overlay={tooltip} placement="top" > -
+ + + + Add account -
+ ); } From 55fc01454d775f6d5de2f6073575ade78b90d19e Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Tue, 21 Aug 2018 07:59:10 +0200 Subject: [PATCH 003/179] Refactorize "AccountMenu" component --- src/js/config/variables.js | 4 + .../components/AccountMenu/index.js | 196 +++++++++--------- .../LeftNavigation/components/Row/index.js | 28 ++- .../components/RowCoin/index.js | 4 +- 4 files changed, 121 insertions(+), 111 deletions(-) diff --git a/src/js/config/variables.js b/src/js/config/variables.js index 754d18ca..17573f4f 100644 --- a/src/js/config/variables.js +++ b/src/js/config/variables.js @@ -15,3 +15,7 @@ export const ICON_SIZE = { export const BORDER_WIDTH = { SELECTED: '3px', }; + +export const LEFT_NAVIGATION_ROW = { + PADDING: '16px 24px', +}; diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index abb620d6..b701abaf 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -1,5 +1,5 @@ /* @flow */ -import React, { Component } from 'react'; +import React from 'react'; import BigNumber from 'bignumber.js'; import Icon from 'components/Icon'; import colors from 'config/colors'; @@ -13,7 +13,7 @@ import ICONS from 'config/icons'; import { NavLink } from 'react-router-dom'; import { findDeviceAccounts } from 'reducers/AccountsReducer'; import { - FONT_SIZE, BORDER_WIDTH, TRANSITION_TIME, + FONT_SIZE, BORDER_WIDTH, TRANSITION_TIME, LEFT_NAVIGATION_ROW, } from 'config/variables'; import type { Accounts } from 'flowtype'; @@ -30,83 +30,109 @@ const Text = styled.span` `; const RowAccountWrapper = styled.div` - height: 64px; - padding: 16px 0 16px 24px; + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; font-size: ${FONT_SIZE.SMALL}; color: ${colors.TEXT_PRIMARY}; - border-top: 1px solid ${colors.DIVIDER}; + ${props => props.borderTop && css` + border-top: 1px solid ${colors.DIVIDER}; + `} + border-bottom: 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}; - &:hover { background-color: ${colors.WHITE}; } - - &:last-child { - border-bottom: 1px solid ${colors.DIVIDER}; - } `} `; const RowAccount = ({ - accountIndex, balance, isSelected = false, + accountIndex, balance, isSelected = false, borderTop = false, }) => ( - - + + Account #{accountIndex + 1} {balance ? ( {balance} ) : ( Loading... )} - - + + ); RowAccount.propTypes = { accountIndex: PropTypes.number.isRequired, balance: PropTypes.string, isSelected: PropTypes.bool, + borderTop: PropTypes.bool, }; -const AddAccountWrapper = styled.div` - position: relative; - padding: 8px 0 8px 20px; - cursor: pointer; - color: ${colors.TEXT_SECONDARY}; +const RowAddAccountWrapper = styled.div` + width: 100%; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; display: flex; align-items: center; - + color: ${colors.TEXT_SECONDARY}; &:hover { - color: ${colors.TEXT_PRIMARY}; - transition: background-color ${TRANSITION_TIME.BASE} ease-in-out, color ${TRANSITION_TIME.BASE} ease-in-out, border-color ${TRANSITION_TIME.BASE} ease-in-out; + cursor: ${props => (props.disabled ? 'default' : 'pointer')}; + color: ${props => (props.disabled ? colors.TEXT_SECONDARY : colors.TEXT_PRIMARY)}; } - - ${props => props.disabled && css` - cursor: not-allowed; - &:hover { - color: ${colors.TEXT_SECONDARY}; - } - `} `; const AddAccountIconWrapper = styled.div` margin-right: 12px; `; +const RowAddAccount = (({ + disabled = false, onClick, onMouseEnter, onMouseLeave, onFocus, +}) => ( + + + + + + Add account + + +)); + +RowAddAccount.propTypes = { + disabled: PropTypes.bool, + onClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, + onFocus: PropTypes.func, +}; + const DiscoveryStatusWrapper = styled.div` - height: 64px; display: flex; flex-direction: column; - justify-content: space-evenly; + font-size: ${FONT_SIZE.SMALL}; - padding: 16px 28px 16px 30px; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; white-space: nowrap; border-top: 1px solid ${colors.DIVIDER}; `; @@ -119,12 +145,28 @@ const DiscoveryStatusText = styled.div` text-overflow: ellipsis; `; +const RowDiscoveryStatus = (({ + instanceLabel, +}) => ( + + + Accounts could not be loaded + + {`Connect ${instanceLabel} device`} + + + +)); + +RowDiscoveryStatus.propTypes = { + instanceLabel: PropTypes.number.isRequired, +}; + const DiscoveryLoadingWrapper = styled.div` display: flex; - flex-direction: row; align-items: center; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; font-size: ${FONT_SIZE.SMALL}; - padding: 8px 0 8px 22px; white-space: nowrap; color: ${colors.TEXT_SECONDARY}; `; @@ -133,27 +175,16 @@ const DiscoveryLoadingText = styled.span` margin-left: 14px; `; -// class AccountMenu extends Component { -// constructor(props: Props) { -// super(props); -// this.state = { -// selectedAccounts: null, -// selectedCoin: null, -// }; -// } - -// componentWillReceiveProps(nextProps) { - -// } - -// render() { -// return ( -//
-// Hello -//
-// ); -// } -// } +const RowDiscoveryLoading = (() => ( + + + + + Loading... + + + +)); const AccountMenu = (props: Props): ?React$Element => { const selected = props.wallet.selectedDevice; @@ -198,6 +229,7 @@ const AccountMenu = (props: Props): ?React$Element => { url={url} balance={balance} isSelected={urlAccountIndex === account.index} + borderTop={account.index === 0} /> ); @@ -214,6 +246,7 @@ const AccountMenu = (props: Props): ?React$Element => { accountIndex={0} url={url} isSelected + borderTop /> ); @@ -229,20 +262,7 @@ const AccountMenu = (props: Props): ?React$Element => { //if (selectedAccounts.length > 0 && selectedAccounts[selectedAccounts.length - 1]) const lastAccount = deviceAccounts[deviceAccounts.length - 1]; if (lastAccount && (new BigNumber(lastAccount.balance).greaterThan(0) || lastAccount.nonce > 0)) { - discoveryStatus = ( - - - - - Add account - - ); + discoveryStatus = ; } else { const tooltip = (
@@ -253,41 +273,17 @@ const AccountMenu = (props: Props): ?React$Element => { } overlay={tooltip} - placement="top" + placement="bottom" > - - - - - Add account - + ); } } else if (!selected.connected || !selected.available) { - discoveryStatus = ( - - Accounts could not be loaded - - {`Connect ${selected.instanceLabel} device`} - - - ); + discoveryStatus = ; } else { discoveryStatus = ( - - - - Loading accounts... - - + ); } } diff --git a/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js b/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js index c0f27b06..403490e3 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/Row/index.js @@ -6,21 +6,27 @@ import { TRANSITION_TIME } from 'config/variables'; const Wrapper = styled.div` height: 100%; + width: 100%; display: flex; - flex-direction: row; align-items: center; justify-content: space-between; - cursor: pointer; - transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE}; + transition: background-color ${TRANSITION_TIME.BASE} ease-in-out, color ${TRANSITION_TIME.BASE} ease-in-out, border-color ${TRANSITION_TIME.BASE} ease-in-out; - ${props => props.column && css` - flex-direction: column; - align-items: flex-start; + ${props => props.disabled && css` + cursor: not-allowed; `} `; -const Row = ({ children, column = false }) => ( - +const Row = ({ + children, disabled = false, onClick, onMouseEnter, onMouseLeave, onFocus, +}) => ( + {children} ); @@ -30,7 +36,11 @@ Row.propTypes = { PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]), - column: PropTypes.bool, + disabled: PropTypes.bool, + onClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, + onFocus: PropTypes.func, }; export default Row; diff --git a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js index 71d0f7ac..e02eb165 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/RowCoin/index.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import Icon from 'components/Icon'; -import { ICON_SIZE, FONT_SIZE } from 'config/variables'; +import { ICON_SIZE, FONT_SIZE, LEFT_NAVIGATION_ROW } from 'config/variables'; import colors from 'config/colors'; import Row from '../Row'; @@ -23,7 +23,7 @@ const Logo = styled.div` `; const RowCoinWrapper = styled.div` - padding: 16px 24px; + padding: ${LEFT_NAVIGATION_ROW.PADDING}; height: 50px; display: block; font-size: ${FONT_SIZE.BASE}; From d69c26961b1fdfd3759ce972b8e8f2b5afc2224a Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Tue, 21 Aug 2018 08:09:37 +0200 Subject: [PATCH 004/179] Fix "AccountRow" border offsetting its content --- .../components/LeftNavigation/components/AccountMenu/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index b701abaf..778b4c61 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -37,6 +37,7 @@ const RowAccountWrapper = styled.div` padding: ${LEFT_NAVIGATION_ROW.PADDING}; font-size: ${FONT_SIZE.SMALL}; color: ${colors.TEXT_PRIMARY}; + border-left: ${BORDER_WIDTH.SELECTED} solid transparent; ${props => props.borderTop && css` border-top: 1px solid ${colors.DIVIDER}; `} From 1fc12ca5f37b86ea4bea2c0d9f9af5aa6acc07e7 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Tue, 21 Aug 2018 08:09:51 +0200 Subject: [PATCH 005/179] Cleanup & eslint fixes --- .../LeftNavigation/components/StickyContainer/index.js | 4 ++-- src/js/views/Wallet/components/LeftNavigation/index.js | 1 - src/styles/aside.less | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js index d7575935..ce18f3b8 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js @@ -138,14 +138,14 @@ export default class StickyContainer extends React.PureComponent { render() { return (