arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 20:28:09 +00:00
Code Issues Releases Wiki Activity

Merge pull request #346 from trezor/fix/device-header-ux

Browse Source 
Fix Device header UX
This commit is contained in:
Vladimir Volek 2019-01-22 14:36:55 +01:00 committed by GitHub
commit a99b21354e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/DeviceHeader/index.js
View File

@ -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')};

9
src/config/animations.js
View File

@ -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%);
}
`;

10
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
View File

@ -8,18 +8,20 @@ import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables';
const Wrapper = styled.div`
padding: 0px 24px 8px 19px;
border-bottom: 1px solid ${colors.DIVIDER};
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`

47
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
View File

@ -3,6 +3,11 @@ 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 { SLIDE_DOWN } from 'config/animations';
import Button from 'components/Button';
import * as deviceUtils from 'utils/device';
import MenuItems from './components/MenuItems';
@ -10,11 +15,20 @@ import DeviceList from './components/DeviceList';
import type { Props } from '../common';
import AsideDivider from '../Divider';
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);
animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards;
`;
const Wrapper = styled.div``;
const ButtonWrapper = styled.div`
margin-top: 10px;
margin: 10px 0;
padding: 0 10px;
display: flex;
`;
@ -22,6 +36,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;
@ -32,6 +54,7 @@ class DeviceMenu extends PureComponent<Props> {
super(props);
this.mouseDownHandler = this.mouseDownHandler.bind(this);
this.blurHandler = this.blurHandler.bind(this);
this.myRef = React.createRef();
}
componentDidMount(): void {
@ -63,6 +86,10 @@ class DeviceMenu extends PureComponent<Props> {
}
}
getMenuHeight(): number {
return this.myRef.current ? this.myRef.current.getBoundingClientRect().height : 0;
}
blurHandler(): void {
this.props.toggleDeviceDropdown(false);
}
@ -96,26 +123,28 @@ class DeviceMenu extends PureComponent<Props> {
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 (
<Wrapper>
<Wrapper ref={this.myRef}>
{this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
{this.showDivider() && <AsideDivider textLeft="Other devices" />}
{this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
<DeviceList
devices={devices}
selectedDevice={selectedDevice}
onSelectDevice={onSelectDevice}
forgetDevice={forgetDevice}
/>
<ButtonWrapper>
{deviceUtils.isWebUSB(transport) && (
{deviceUtils.isWebUSB(transport) && (
<ButtonWrapper>
<StyledButton isWebUsb>Check for devices</StyledButton>
)}
</ButtonWrapper>
</ButtonWrapper>
)}
</Wrapper>
);
}

4
src/views/Wallet/components/LeftNavigation/components/Divider/index.js
View File

@ -19,10 +19,11 @@ const Wrapper = styled.div`
`;
const Divider = ({
textLeft, textRight, hasBorder = false,
textLeft, textRight, hasBorder = false, className,
}) => (
<Wrapper
hasBorder={hasBorder}
className={className}
>
<p>{textLeft}</p>
<p>{textRight}</p>
@ -30,6 +31,7 @@ const Divider = ({
);
Divider.propTypes = {
className: PropTypes.string,
textLeft: PropTypes.string,
textRight: PropTypes.string,
hasBorder: PropTypes.bool,

42
src/views/Wallet/components/LeftNavigation/index.js
View File

@ -56,6 +56,7 @@ const Footer = styled.div.attrs(props => ({
const Body = styled.div`
width: 320px;
min-height: ${props => (props.minHeight ? `${props.minHeight}px` : '0px')};
`;
const Help = styled.div`
@ -109,42 +110,48 @@ const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGro
type State = {
animationType: ?string;
shouldRenderDeviceSelection: boolean;
clicked: boolean;
bodyMinHeight: number;
}
class LeftNavigation extends React.PureComponent<Props, State> {
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 if (hasNetwork) {
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;
@ -152,7 +159,6 @@ class LeftNavigation extends React.PureComponent<Props, State> {
&& location
&& location.state
&& location.state.network
&& !this.state.shouldRenderDeviceSelection
&& this.state.animationType === 'slide-left';
}
@ -162,9 +168,19 @@ class LeftNavigation extends React.PureComponent<Props, State> {
}
shouldRenderCoins() {
return !this.state.shouldRenderDeviceSelection && this.state.animationType !== 'slide-left';
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;
@ -182,7 +198,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
);
}
const { selectedDevice } = props.wallet;
const { selectedDevice, dropdownOpened } = props.wallet;
const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice);
return (
<StickyContainer
@ -217,8 +233,8 @@ class LeftNavigation extends React.PureComponent<Props, State> {
)}
{...this.props}
/>
<Body>
{this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
<Body minHeight={this.state.bodyMinHeight}>
{dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
{isDeviceAccessible && menu}
</Body>
<Footer key="sticky-footer">