fix device header ux

pull/346/head
slowbackspace 5 years ago
parent 5423caea4f
commit 97918224a2

@ -9,7 +9,6 @@ import { FONT_SIZE } from 'config/variables';
const Wrapper = styled.div` const Wrapper = styled.div`
padding: 0px 24px 8px 19px; padding: 0px 24px 8px 19px;
border-bottom: 1px solid ${colors.DIVIDER};
background: ${colors.WHITE}; background: ${colors.WHITE};
`; `;

@ -3,6 +3,10 @@ import React, { PureComponent } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import TrezorConnect from 'trezor-connect'; import TrezorConnect from 'trezor-connect';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
import COLORS from 'config/colors';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import Button from 'components/Button'; import Button from 'components/Button';
import * as deviceUtils from 'utils/device'; import * as deviceUtils from 'utils/device';
import MenuItems from './components/MenuItems'; import MenuItems from './components/MenuItems';
@ -10,11 +14,16 @@ import DeviceList from './components/DeviceList';
import type { Props } from '../common'; 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` const ButtonWrapper = styled.div`
margin-top: 10px; margin: 10px 0;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
`; `;
@ -22,6 +31,14 @@ const StyledButton = styled(Button)`
flex: 1; 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 DeviceMenuItem = {
type: string; type: string;
label: string; label: string;
@ -104,18 +121,18 @@ class DeviceMenu extends PureComponent<Props> {
return ( return (
<Wrapper> <Wrapper>
{this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />} {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
{this.showDivider() && <AsideDivider textLeft="Other devices" />} {this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
<DeviceList <DeviceList
devices={devices} devices={devices}
selectedDevice={selectedDevice} selectedDevice={selectedDevice}
onSelectDevice={onSelectDevice} onSelectDevice={onSelectDevice}
forgetDevice={forgetDevice} forgetDevice={forgetDevice}
/> />
<ButtonWrapper> {deviceUtils.isWebUSB(transport) && (
{deviceUtils.isWebUSB(transport) && ( <ButtonWrapper>
<StyledButton isWebUsb>Check for devices</StyledButton> <StyledButton isWebUsb>Check for devices</StyledButton>
)} </ButtonWrapper>
</ButtonWrapper> )}
</Wrapper> </Wrapper>
); );
} }

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

@ -132,14 +132,17 @@ class LeftNavigation extends React.PureComponent<Props, State> {
const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal'; const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal';
if (dropdownOpened) { if (dropdownOpened) {
this.setState({ shouldRenderDeviceSelection: true }); this.setState({ shouldRenderDeviceSelection: true });
} else if (hasNetwork) { } else {
this.setState({ shouldRenderDeviceSelection: false });
}
if (hasNetwork) {
this.setState({ this.setState({
shouldRenderDeviceSelection: false, // shouldRenderDeviceSelection: false,
animationType: 'slide-left', animationType: 'slide-left',
}); });
} else { } else {
this.setState({ this.setState({
shouldRenderDeviceSelection: false, // shouldRenderDeviceSelection: false,
animationType: deviceReady ? 'slide-right' : null, animationType: deviceReady ? 'slide-right' : null,
}); });
} }
@ -152,7 +155,6 @@ class LeftNavigation extends React.PureComponent<Props, State> {
&& location && location
&& location.state && location.state
&& location.state.network && location.state.network
&& !this.state.shouldRenderDeviceSelection
&& this.state.animationType === 'slide-left'; && this.state.animationType === 'slide-left';
} }
@ -162,7 +164,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
} }
shouldRenderCoins() { shouldRenderCoins() {
return !this.state.shouldRenderDeviceSelection && this.state.animationType !== 'slide-left'; return this.state.animationType !== 'slide-left';
} }
render() { render() {

Loading…
Cancel
Save