mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 00:18:07 +00:00
Removed old selected device
This commit is contained in:
parent
a4d88fb919
commit
bc094c42a1
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
|
||||
// TODO: make animation of icons better
|
||||
const rotate180up = keyframes`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
@ -14,6 +14,19 @@ const Wrapper = styled.div`
|
||||
width: 320px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: ${colors.WHITE};
|
||||
border-bottom: 1px solid ${colors.DIVIDER};
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
|
||||
cursor: pointer;
|
||||
|
||||
${props => props.isOpen && css`
|
||||
border-bottom: 1px solid ${colors.WHITE};
|
||||
box-shadow: none;
|
||||
`}
|
||||
|
||||
${props => props.disabled && css`
|
||||
cursor: initial;
|
||||
`}
|
||||
`;
|
||||
|
||||
const ClickWrapper = styled.div`
|
||||
@ -23,6 +36,10 @@ const ClickWrapper = styled.div`
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
${props => props.disabled && css`
|
||||
cursor: initial;
|
||||
`}
|
||||
`;
|
||||
|
||||
const LabelWrapper = styled.div`
|
||||
@ -98,13 +115,12 @@ class DeviceHeader extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('cananitem', this.state.clicked);
|
||||
const {
|
||||
status, label, deviceCount, isOpen, trezorModel,
|
||||
status, label, deviceCount, isOpen, trezorModel, disabled,
|
||||
} = this.props;
|
||||
return (
|
||||
<Wrapper>
|
||||
<ClickWrapper onClick={() => this.handleClick()}>
|
||||
<Wrapper isOpen={isOpen} disabled={disabled}>
|
||||
<ClickWrapper disabled={disabled} onClick={() => this.handleClick()}>
|
||||
<ImageWrapper>
|
||||
<Dot color={getStatusColor(status)} />
|
||||
<TrezorImage status={status} model={trezorModel} />
|
||||
@ -115,14 +131,16 @@ class DeviceHeader extends Component {
|
||||
</LabelWrapper>
|
||||
<IconWrapper>
|
||||
{deviceCount > 1 && <Counter>{deviceCount}</Counter>}
|
||||
<Icon
|
||||
canAnimate={this.state.clicked === true}
|
||||
isActive={isOpen}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
icon={icons.ARROW_DOWN}
|
||||
rotateOnActive
|
||||
/>
|
||||
{!disabled && (
|
||||
<Icon
|
||||
canAnimate={this.state.clicked === true}
|
||||
isActive={isOpen}
|
||||
size={25}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
icon={icons.ARROW_DOWN}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</IconWrapper>
|
||||
</ClickWrapper>
|
||||
</Wrapper>
|
@ -3,9 +3,10 @@ import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import TrezorConnect from 'trezor-connect';
|
||||
import type { TrezorDevice } from 'flowtype';
|
||||
import DeviceHeader from 'components/DeviceHeader';
|
||||
import { getStatus, getVersion } from 'utils/device';
|
||||
|
||||
import DeviceHeader from './components/DeviceHeader';
|
||||
|
||||
// import DeviceList from './components/DeviceList';
|
||||
import type { Props } from '../common';
|
||||
|
||||
@ -17,66 +18,24 @@ const Wrapper = styled.div``;
|
||||
export const DeviceSelect = (props: Props) => {
|
||||
const { devices } = props;
|
||||
const { transport } = props.connect;
|
||||
|
||||
const selected: ?TrezorDevice = props.wallet.selectedDevice;
|
||||
if (!selected) return null;
|
||||
|
||||
let deviceStatus: string = 'Connected';
|
||||
let css: string = 'device-select device';
|
||||
if (props.deviceDropdownOpened) css += ' opened';
|
||||
|
||||
if (!selected.connected) {
|
||||
css += ' disconnected';
|
||||
deviceStatus = 'Disconnected';
|
||||
} else if (!selected.available) {
|
||||
css += ' unavailable';
|
||||
deviceStatus = 'Unavailable';
|
||||
} else if (selected.type === 'acquired') {
|
||||
if (selected.status === 'occupied') {
|
||||
css += ' used-elsewhere';
|
||||
deviceStatus = 'Used in other window';
|
||||
} else if (selected.status === 'used') {
|
||||
css += ' reload-features';
|
||||
}
|
||||
} else if (selected.type === 'unacquired') {
|
||||
css += ' unacquired';
|
||||
deviceStatus = 'Used in other window';
|
||||
}
|
||||
|
||||
if (selected.features && selected.features.major_version > 1) {
|
||||
css += ' trezor-t';
|
||||
}
|
||||
|
||||
const deviceCount = devices.length;
|
||||
const { selectedDevice } = props.wallet;
|
||||
const webusb: boolean = !!((transport && transport.version.indexOf('webusb') >= 0));
|
||||
const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selected.features && !webusb);
|
||||
if (disabled) {
|
||||
css += ' disabled';
|
||||
}
|
||||
const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selectedDevice.features && !webusb);
|
||||
|
||||
const handleOpen = () => {
|
||||
props.toggleDeviceDropdown(!props.deviceDropdownOpened);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DeviceHeader
|
||||
handleOpen={handleOpen}
|
||||
label={selected.instanceLabel}
|
||||
status={getStatus(selected)}
|
||||
deviceCount={devices.length}
|
||||
isOpen={props.deviceDropdownOpened}
|
||||
trezorModel={getVersion(selected)}
|
||||
/>
|
||||
<div className={css} onClick={!disabled ? handleOpen : null}>
|
||||
<div className="label-container">
|
||||
<span className="label">{selected.instanceLabel}</span>
|
||||
<span className="status">{deviceStatus}</span>
|
||||
</div>
|
||||
{deviceCount > 1 ? <div className="counter">{deviceCount}</div> : null}
|
||||
<div className="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
<DeviceHeader
|
||||
handleOpen={handleOpen}
|
||||
disabled={disabled}
|
||||
label={selectedDevice.instanceLabel}
|
||||
status={getStatus(selectedDevice)}
|
||||
deviceCount={devices.length}
|
||||
isOpen={props.deviceDropdownOpened}
|
||||
trezorModel={getVersion(selectedDevice)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -144,12 +144,13 @@ class LeftNavigation extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { selectedDevice } = this.props.wallet;
|
||||
return (
|
||||
<StickyContainer
|
||||
location={this.props.location.pathname}
|
||||
deviceSelection={this.props.deviceDropdownOpened}
|
||||
>
|
||||
<DeviceSelect {...this.props} />
|
||||
{selectedDevice && <DeviceSelect {...this.props} />}
|
||||
<MenuWrapper>
|
||||
{this.state.shouldRenderDeviceSelection && <DeviceDropdown {...this.props} />}
|
||||
{this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}
|
||||
|
Loading…
Reference in New Issue
Block a user