From 97918224a2b31948b138e1499e01702d5f1a2c73 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sun, 20 Jan 2019 19:08:36 +0100 Subject: [PATCH 1/6] fix device header ux --- .../DeviceMenu/components/MenuItems/index.js | 1 - .../components/DeviceMenu/index.js | 33 ++++++++++++++----- .../components/Divider/index.js | 4 ++- .../Wallet/components/LeftNavigation/index.js | 12 ++++--- 4 files changed, 35 insertions(+), 15 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index 53fc615b..9099248d 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -9,7 +9,6 @@ import { FONT_SIZE } from 'config/variables'; const Wrapper = styled.div` padding: 0px 24px 8px 19px; - border-bottom: 1px solid ${colors.DIVIDER}; background: ${colors.WHITE}; `; diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 9cdc96be..9c251a71 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -3,6 +3,10 @@ import React, { PureComponent } from 'react'; import styled from 'styled-components'; import TrezorConnect from 'trezor-connect'; import type { TrezorDevice } from 'flowtype'; + +import COLORS from 'config/colors'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; + import Button from 'components/Button'; import * as deviceUtils from 'utils/device'; import MenuItems from './components/MenuItems'; @@ -10,11 +14,16 @@ import DeviceList from './components/DeviceList'; import type { Props } from '../common'; -import AsideDivider from '../Divider'; +import Divider from '../Divider'; + +const Wrapper = styled.div` + border-bottom: 1px solid #E3E3E3; + background: white; + box-shadow: 0 3px 8px rgba(0,0,0,0.06); +`; -const Wrapper = styled.div``; const ButtonWrapper = styled.div` - margin-top: 10px; + margin: 10px 0; padding: 0 10px; display: flex; `; @@ -22,6 +31,14 @@ const StyledButton = styled(Button)` flex: 1; `; +const StyledDivider = styled(Divider)` + background: #fff; + color: ${COLORS.TEXT_PRIMARY}; + font-weight: ${FONT_WEIGHT.MEDIUM}; + font-size: ${FONT_SIZE.BASE}; + border: none; +`; + type DeviceMenuItem = { type: string; label: string; @@ -104,18 +121,18 @@ class DeviceMenu extends PureComponent { return ( {this.showMenuItems() && } - {this.showDivider() && } + {this.showDivider() && } - - {deviceUtils.isWebUSB(transport) && ( + {deviceUtils.isWebUSB(transport) && ( + Check for devices - )} - + + )} ); } diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index 8f29337e..0a46446f 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js @@ -19,10 +19,11 @@ const Wrapper = styled.div` `; const Divider = ({ - textLeft, textRight, hasBorder = false, + textLeft, textRight, hasBorder = false, className, }) => (

{textLeft}

{textRight}

@@ -30,6 +31,7 @@ const Divider = ({ ); Divider.propTypes = { + className: PropTypes.string, textLeft: PropTypes.string, textRight: PropTypes.string, hasBorder: PropTypes.bool, diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index cca5eab1..5b4801ce 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -132,14 +132,17 @@ class LeftNavigation extends React.PureComponent { const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal'; if (dropdownOpened) { this.setState({ shouldRenderDeviceSelection: true }); - } else if (hasNetwork) { + } else { + this.setState({ shouldRenderDeviceSelection: false }); + } + if (hasNetwork) { this.setState({ - shouldRenderDeviceSelection: false, + // shouldRenderDeviceSelection: false, animationType: 'slide-left', }); } else { this.setState({ - shouldRenderDeviceSelection: false, + // shouldRenderDeviceSelection: false, animationType: deviceReady ? 'slide-right' : null, }); } @@ -152,7 +155,6 @@ class LeftNavigation extends React.PureComponent { && location && location.state && location.state.network - && !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-left'; } @@ -162,7 +164,7 @@ class LeftNavigation extends React.PureComponent { } shouldRenderCoins() { - return !this.state.shouldRenderDeviceSelection && this.state.animationType !== 'slide-left'; + return this.state.animationType !== 'slide-left'; } render() { From 6662c705bcb386450d00885b35ea22550cc03c4c Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 21 Jan 2019 14:43:56 +0100 Subject: [PATCH 2/6] hover for menu items --- .../components/DeviceMenu/components/MenuItems/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index 9099248d..c39de5a8 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -8,17 +8,20 @@ import colors from 'config/colors'; import { FONT_SIZE } from 'config/variables'; const Wrapper = styled.div` - padding: 0px 24px 8px 19px; background: ${colors.WHITE}; `; const Item = styled.div` - padding: 4px 2px; + padding: 6px 24px; display: flex; align-items: center; font-size: ${FONT_SIZE.BASE}; cursor: pointer; - color: ${colors.TEXT_SECONDARY}; + color: ${colors.TEXT_SECONDARY}; + + &:hover { + background: ${colors.GRAY_LIGHT}; + } `; const Label = styled.div` From 59c4e69ab4430e4a747c246dc659176d0559f1db Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 21 Jan 2019 16:20:05 +0100 Subject: [PATCH 3/6] missing position absolute --- .../components/LeftNavigation/components/DeviceMenu/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 9c251a71..f49f1764 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -17,6 +17,7 @@ import type { Props } from '../common'; import Divider from '../Divider'; const Wrapper = styled.div` + position: absolute; border-bottom: 1px solid #E3E3E3; background: white; box-shadow: 0 3px 8px rgba(0,0,0,0.06); From 251eb61177dc3de9580f609ff5c3deb40b70b266 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 21 Jan 2019 16:51:52 +0100 Subject: [PATCH 4/6] add slide down animation for device menu --- src/components/DeviceHeader/index.js | 1 + src/config/animations.js | 9 +++++++++ .../LeftNavigation/components/DeviceMenu/index.js | 2 ++ 3 files changed, 12 insertions(+) diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index cdce9e46..0742e4e3 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -15,6 +15,7 @@ const Wrapper = styled.div` position: relative; height: 70px; width: 320px; + z-index: 10; display: flex; align-items: center; background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; diff --git a/src/config/animations.js b/src/config/animations.js index 950ea9e2..c7fee813 100644 --- a/src/config/animations.js +++ b/src/config/animations.js @@ -71,4 +71,13 @@ export const FADE_IN = keyframes` 100% { opacity: 1; } +`; + +export const SLIDE_DOWN = keyframes` + 0% { + transform: translateY(-100%); + } + 100% { + transform: translateY(0%); + } `; \ No newline at end of file diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index f49f1764..5879fc79 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -6,6 +6,7 @@ import type { TrezorDevice } from 'flowtype'; import COLORS from 'config/colors'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; +import { SLIDE_DOWN } from 'config/animations'; import Button from 'components/Button'; import * as deviceUtils from 'utils/device'; @@ -21,6 +22,7 @@ const Wrapper = styled.div` border-bottom: 1px solid #E3E3E3; background: white; box-shadow: 0 3px 8px rgba(0,0,0,0.06); + animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards; `; const ButtonWrapper = styled.div` From 9f190dc993a85b58605d96ad60670da843720b7f Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Mon, 21 Jan 2019 17:12:17 +0100 Subject: [PATCH 5/6] strech device menu width to its parent's width --- .../components/LeftNavigation/components/DeviceMenu/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 5879fc79..cb4f36d9 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -19,6 +19,8 @@ import Divider from '../Divider'; const Wrapper = styled.div` position: absolute; + width: 100%; + padding-bottom: 8px; border-bottom: 1px solid #E3E3E3; background: white; box-shadow: 0 3px 8px rgba(0,0,0,0.06); From cc41a963cd8df85e7d62e074b4abbb4c4bcbd769 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Tue, 22 Jan 2019 12:57:10 +0100 Subject: [PATCH 6/6] set minHeight to fix rendering of devicemenu for unitialized device --- .../components/DeviceMenu/index.js | 9 ++++- .../Wallet/components/LeftNavigation/index.js | 40 +++++++++++++------ 2 files changed, 35 insertions(+), 14 deletions(-) diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index cb4f36d9..4797b422 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -54,6 +54,7 @@ class DeviceMenu extends PureComponent { super(props); this.mouseDownHandler = this.mouseDownHandler.bind(this); this.blurHandler = this.blurHandler.bind(this); + this.myRef = React.createRef(); } componentDidMount(): void { @@ -85,6 +86,10 @@ class DeviceMenu extends PureComponent { } } + getMenuHeight(): number { + return this.myRef.current ? this.myRef.current.getBoundingClientRect().height : 0; + } + blurHandler(): void { this.props.toggleDeviceDropdown(false); } @@ -118,13 +123,15 @@ class DeviceMenu extends PureComponent { return deviceUtils.isDeviceAccessible(this.props.wallet.selectedDevice); } + myRef: { current: ?HTMLDivElement } + render() { const { devices, onSelectDevice, forgetDevice } = this.props; const { transport } = this.props.connect; const { selectedDevice } = this.props.wallet; return ( - + {this.showMenuItems() && } {this.showDivider() && } ({ const Body = styled.div` width: 320px; + min-height: ${props => (props.minHeight ? `${props.minHeight}px` : '0px')}; `; const Help = styled.div` @@ -109,45 +110,48 @@ const TransitionMenu = (props: TransitionMenuProps): React$Element { constructor(props: Props) { super(props); + this.deviceMenuRef = React.createRef(); const { location } = this.props.router; const hasNetwork = location && location.state && location.state.network; this.state = { animationType: hasNetwork ? 'slide-left' : null, - shouldRenderDeviceSelection: false, clicked: false, + bodyMinHeight: 0, }; } + componentDidMount() { + this.recalculateBodyMinHeight(); + } + componentWillReceiveProps(nextProps: Props) { - const { dropdownOpened, selectedDevice } = nextProps.wallet; + const { selectedDevice } = nextProps.wallet; const { location } = nextProps.router; const hasNetwork = location && location.state.network; const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal'; - if (dropdownOpened) { - this.setState({ shouldRenderDeviceSelection: true }); - } else { - this.setState({ shouldRenderDeviceSelection: false }); - } + if (hasNetwork) { this.setState({ - // shouldRenderDeviceSelection: false, animationType: 'slide-left', }); } else { this.setState({ - // shouldRenderDeviceSelection: false, animationType: deviceReady ? 'slide-right' : null, }); } } + componentDidUpdate() { + this.recalculateBodyMinHeight(); + } + shouldRenderAccounts() { const { selectedDevice } = this.props.wallet; const { location } = this.props.router; @@ -167,6 +171,16 @@ class LeftNavigation extends React.PureComponent { return this.state.animationType !== 'slide-left'; } + recalculateBodyMinHeight() { + if (this.deviceMenuRef.current) { + this.setState({ + bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(), + }); + } + } + + deviceMenuRef: { current: any }; + render() { const { props } = this; let menu; @@ -184,7 +198,7 @@ class LeftNavigation extends React.PureComponent { ); } - const { selectedDevice } = props.wallet; + const { selectedDevice, dropdownOpened } = props.wallet; const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice); return ( { )} {...this.props} /> - - {this.state.shouldRenderDeviceSelection && } + + {dropdownOpened && } {isDeviceAccessible && menu}