From 19e3e983deb16e920f5db6e0a567be424ef93b24 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 17 Sep 2018 10:21:41 +0200 Subject: [PATCH 01/14] Fixed width in navigation body --- src/views/Wallet/components/LeftNavigation/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 15d2821f..6f38a2af 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -31,7 +31,7 @@ const Footer = styled.div` `; const Body = styled.div` - overflow: auto; + width: 320px; background: ${colors.LANDING}; `; From 8a8d17e08e6b49d42ff3b22dd6c9d50c55a65e73 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 17 Sep 2018 10:24:51 +0200 Subject: [PATCH 02/14] Fixed footer --- src/views/Wallet/components/LeftNavigation/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 6f38a2af..dda6669d 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -24,7 +24,8 @@ const TransitionContentWrapper = styled.div` `; const Footer = styled.div` - position: fixed; + position: relative; + width: 320px; bottom: 0; background: ${colors.MAIN}; border-right: 1px solid ${colors.DIVIDER}; From 5ea44176bb773d4eea4d816c1e50fa254e491d87 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 17 Sep 2018 11:14:24 +0200 Subject: [PATCH 03/14] Removed red background --- src/components/Tooltip/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index 656c0b19..3872a698 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -15,7 +15,6 @@ const Wrapper = styled.div` position: absolute; z-index: 1070; display: block; - background: red; visibility: visible; border: 1px solid ${colors.DIVIDER}; border-radius: 3px; From ad31b445f07e86cf44eccf48603fa274a07edb59 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 17 Sep 2018 11:20:38 +0200 Subject: [PATCH 04/14] Removed background from navigation body --- .../components/LeftNavigation/components/AccountMenu/index.js | 3 +-- src/views/Wallet/components/LeftNavigation/index.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index 3b597266..a11cb848 100644 --- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js @@ -20,7 +20,6 @@ import type { Props } from '../common'; import Row from '../Row'; import RowCoin from '../RowCoin'; - const Wrapper = styled.div``; const Text = styled.span` @@ -115,7 +114,7 @@ const AccountMenu = (props: Props): ?React$Element => { const selectedCoin = config.coins.find(c => c.network === location.state.network); if (!selected || !selectedCoin) return; - + const fiatRate = props.fiat.find(f => f.network === selectedCoin.network); const deviceAccounts: Accounts = findDeviceAccounts(accounts, selected, location.state.network); diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index dda6669d..507d2c0e 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -33,7 +33,6 @@ const Footer = styled.div` const Body = styled.div` width: 320px; - background: ${colors.LANDING}; `; const Help = styled.div` From e867c521f758f41f0af351de346f58e764c52fc9 Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Mon, 17 Sep 2018 14:23:57 +0200 Subject: [PATCH 05/14] Refactor animation handling, update react-transition --- package.json | 2 +- .../Wallet/components/LeftNavigation/index.js | 68 +++++++++---------- yarn.lock | 13 ++++ 3 files changed, 47 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 3c57abf3..6d073dd9 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "react-router-redux": "next", "react-scale-text": "^1.2.2", "react-select": "2.0.0", - "react-transition-group": "^2.2.1", + "react-transition-group": "^2.4.0", "redbox-react": "^1.6.0", "redux": "4.0.0", "redux-logger": "^3.0.6", diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 15d2821f..62cbf8d7 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -58,6 +58,29 @@ const A = styled.a` } `; +const Transition = ({ children, animationType }) => ( + + { + console.log('ON EXIT'); + window.dispatchEvent(new Event('resize')); + }} + onEntering={el => console.warn('Entering', el)} + onExited={() => window.dispatchEvent(new Event('resize'))} + classNames={animationType} + appear={false} + timeout={20000} + in + out + > + + {children} + + + +); + class LeftNavigation extends Component { constructor(props) { super(props); @@ -96,39 +119,6 @@ class LeftNavigation extends Component { } } - // TODO: refactor to transition component for reuse of transitions - getMenuTransition(children) { - return ( - - { - console.warn('ON ENTER'); - }} - onEntering={() => { - console.warn('ON ENTERING (ACTIVE)'); - }} - onExit={() => { - console.warn('ON EXIT'); - window.dispatchEvent(new Event('resize')); - }} - onExiting={() => { - console.warn('ON EXITING (ACTIVE)'); - }} - onExited={() => window.dispatchEvent(new Event('resize'))} - classNames={this.state.animationType} - appear={false} - timeout={30000} - in - out - > - - {children} - - - ); - } - shouldRenderAccounts() { const { selectedDevice } = this.props.wallet; return selectedDevice @@ -163,8 +153,16 @@ class LeftNavigation extends Component { /> {this.state.shouldRenderDeviceSelection && } - {this.shouldRenderAccounts() && this.getMenuTransition()} - {this.shouldRenderCoins() && this.getMenuTransition()} + {this.shouldRenderAccounts() && ( + + + + )} + {this.shouldRenderCoins() && ( + + + + )}