From 449e97f377dcd4edaa7cb6abde318707693b60a4 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Fri, 18 Jan 2019 14:49:28 +0100 Subject: [PATCH 1/9] add new color for focused input border --- src/config/colors.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/config/colors.js b/src/config/colors.js index efca1cda..5d422fa6 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -34,4 +34,5 @@ export default { LABEL_COLOR: '#A9A9A9', TOOLTIP_BACKGROUND: '#333333', + INPUT_BORDER_FOCUSED: '#A9A9A9', }; \ No newline at end of file From 8edb6b66b8fada5ee6b013fbac351757a23798d6 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Fri, 18 Jan 2019 14:50:26 +0100 Subject: [PATCH 2/9] set border color when focused for input, button, textarea, select --- src/components/Button/index.js | 8 ++++++++ src/components/Select/index.js | 5 ++--- src/components/Textarea/index.js | 4 ++++ src/components/inputs/Input/index.js | 4 ++++ 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index c0704b56..2aef90ae 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -37,6 +37,10 @@ const Wrapper = styled.button` background: ${colors.GREEN_TERTIARY}; } + &:focus { + border-color: ${colors.INPUT_BORDER_FOCUSED}; + } + ${props => props.isDisabled && css` pointer-events: none; color: ${colors.TEXT_SECONDARY}; @@ -48,6 +52,10 @@ const Wrapper = styled.button` color: ${colors.TEXT_SECONDARY}; border: 1px solid ${colors.DIVIDER}; + &:focus { + border-color: ${colors.INPUT_BORDER_FOCUSED}; + } + &:hover { color: ${colors.TEXT_PRIMARY}; background: ${colors.DIVIDER}; diff --git a/src/components/Select/index.js b/src/components/Select/index.js index 1d7c020b..8c07de89 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -11,17 +11,16 @@ const styles = isSearchable => ({ width: '100%', color: colors.TEXT_SECONDARY, }), - control: (base, { isDisabled }) => ({ + control: (base, { isDisabled, isFocused }) => ({ ...base, minHeight: 'initial', height: '40px', borderRadius: '2px', - borderColor: colors.DIVIDER, + borderColor: isFocused ? colors.INPUT_BORDER_FOCUSED : colors.DIVIDER, boxShadow: 'none', background: isDisabled ? colors.LANDING : colors.WHITE, '&:hover': { cursor: isSearchable ? 'text' : 'pointer', - borderColor: colors.DIVIDER, }, }), indicatorSeparator: () => ({ diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index b0dbad2c..e0d4dbce 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -67,6 +67,10 @@ const StyledTextarea = styled(Textarea)` color: ${colors.TEXT_SECONDARY}; } + &:focus { + border-color: ${colors.INPUT_BORDER_FOCUSED}; + } + &:disabled { pointer-events: none; background: ${colors.GRAY_LIGHT}; diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 5bda40dd..80635000 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -59,6 +59,10 @@ const StyledInput = styled.input` background-color: ${colors.WHITE}; transition: ${TRANSITION.HOVER}; + &:focus { + border-color: ${colors.INPUT_BORDER_FOCUSED}; + } + &:disabled { pointer-events: none; background: ${colors.GRAY_LIGHT}; From bdd43b49b24d3f48494d41f82e19b18f9c4e46a8 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Fri, 18 Jan 2019 15:55:20 +0100 Subject: [PATCH 3/9] add box shadow --- src/components/Button/index.js | 10 ++++++++-- src/components/Select/index.js | 4 ++-- src/components/Textarea/index.js | 3 ++- src/components/inputs/Input/index.js | 3 ++- src/config/colors.js | 4 +++- 5 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 2aef90ae..a5f3931d 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -38,7 +38,8 @@ const Wrapper = styled.button` } &:focus { - border-color: ${colors.INPUT_BORDER_FOCUSED}; + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; } ${props => props.isDisabled && css` @@ -53,7 +54,7 @@ const Wrapper = styled.button` border: 1px solid ${colors.DIVIDER}; &:focus { - border-color: ${colors.INPUT_BORDER_FOCUSED}; + border-color: ${colors.INPUT_FOCUSED_BORDER}; } &:hover { @@ -72,6 +73,11 @@ const Wrapper = styled.button` border: 0px; color: ${colors.TEXT_SECONDARY}; + &:focus { + color: ${colors.TEXT_PRIMARY}; + box-shadow: none; + } + &:hover, &:active { color: ${colors.TEXT_PRIMARY}; diff --git a/src/components/Select/index.js b/src/components/Select/index.js index 8c07de89..a3691964 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -16,8 +16,8 @@ const styles = isSearchable => ({ minHeight: 'initial', height: '40px', borderRadius: '2px', - borderColor: isFocused ? colors.INPUT_BORDER_FOCUSED : colors.DIVIDER, - boxShadow: 'none', + borderColor: isFocused ? colors.INPUT_FOCUSED_BORDER : colors.DIVIDER, + boxShadow: isFocused ? `0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}` : 'none', background: isDisabled ? colors.LANDING : colors.WHITE, '&:hover': { cursor: isSearchable ? 'text' : 'pointer', diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index e0d4dbce..b5064ee7 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -68,7 +68,8 @@ const StyledTextarea = styled(Textarea)` } &:focus { - border-color: ${colors.INPUT_BORDER_FOCUSED}; + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; } &:disabled { diff --git a/src/components/inputs/Input/index.js b/src/components/inputs/Input/index.js index 80635000..ee2aa96a 100644 --- a/src/components/inputs/Input/index.js +++ b/src/components/inputs/Input/index.js @@ -60,7 +60,8 @@ const StyledInput = styled.input` transition: ${TRANSITION.HOVER}; &:focus { - border-color: ${colors.INPUT_BORDER_FOCUSED}; + border-color: ${colors.INPUT_FOCUSED_BORDER}; + box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}; } &:disabled { diff --git a/src/config/colors.js b/src/config/colors.js index 5d422fa6..23140583 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -34,5 +34,7 @@ export default { LABEL_COLOR: '#A9A9A9', TOOLTIP_BACKGROUND: '#333333', - INPUT_BORDER_FOCUSED: '#A9A9A9', + + INPUT_FOCUSED_BORDER: '#A9A9A9', + INPUT_FOCUSED_SHADOW: '#d6d7d7', }; \ No newline at end of file From 97918224a2b31948b138e1499e01702d5f1a2c73 Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Sun, 20 Jan 2019 19:08:36 +0100 Subject: [PATCH 4/9] 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 5/9] 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 6/9] 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 7/9] 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 8/9] 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 9/9] 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}