diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index c47e3d3b..e1e6ec26 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -1,12 +1,9 @@ -import React, { Component } from 'react'; +import React from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; -import Icon from 'components/Icon'; -import icons from 'config/icons'; import { getStatusColor, getStatusName, - isDisabled, getStatus, getVersion, } from 'utils/device'; @@ -19,11 +16,13 @@ const Wrapper = styled.div` width: 320px; display: flex; align-items: center; - background: ${colors.WHITE}; + background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; + background: ${props => (props.isSelected ? colors.WHITE : 'transparent')}; + border-radius: 4px 0 0 0; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); + box-shadow: ${props => (props.disabled ? 'none' : '0 3px 8px rgba(0, 0, 0, 0.04)')}; - ${props => props.isOpen && css` + ${props => (props.isOpen || !props.isSelected) && css` box-shadow: none; `} @@ -43,7 +42,7 @@ const ClickWrapper = styled.div` cursor: pointer; ${props => props.disabled && css` - cursor: initial; + cursor: not-allowed; `} `; @@ -71,18 +70,6 @@ const Status = styled.div` color: ${colors.TEXT_SECONDARY}; `; -const Counter = styled.div` - border: 1px solid ${colors.DIVIDER}; - border-radius: 50%; - color: ${colors.TEXT_SECONDARY}; - width: 24px; - height: 24px; - line-height: 22px; - text-align: center; - font-size: 11px; - margin-right: 8px; -`; - const IconWrapper = styled.div` padding-right: 25px; display: flex; @@ -104,72 +91,42 @@ const Dot = styled.div` height: 10px; `; -class DeviceHeader extends Component { - constructor(props) { - super(props); - this.state = { - clicked: false, - }; - } - - isDisabled(device, devices, transport) { - return isDisabled(device, devices, transport); - } - - handleClickWrapper() { - this.setState({ clicked: true }); - if (!this.props.disabled) { - this.props.onClickWrapper(); - } - } - - render() { - const { - isOpen, icon, device, devices, transport, isHoverable, - } = this.props; - const status = getStatus(device); - const disabled = isDisabled(device, devices, transport); - const deviceCount = devices.length; - - return ( - - this.handleClickWrapper()}> - - - - - - {device.instanceLabel} - {getStatusName(status)} - - - {icon && icon} - {!icon && deviceCount > 1 && {deviceCount}} - {!icon && !disabled && ( - - ) - } - - - - ); - } -} + +const DeviceHeader = ({ + isOpen, icon, device, isHoverable = true, onClickWrapper, disabled = false, isSelected = false, +}) => { + const status = getStatus(device); + return ( + + + + + + + + {device.instanceLabel} + {getStatusName(status)} + + + {icon && !disabled && icon} + + + + ); +}; DeviceHeader.propTypes = { device: PropTypes.object, - devices: PropTypes.array, - transport: PropTypes.object, icon: PropTypes.element, isHoverable: PropTypes.bool, disabled: PropTypes.bool, isOpen: PropTypes.bool, + isSelected: PropTypes.bool, onClickWrapper: PropTypes.func.isRequired, }; diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js index faca2a75..31d66a0c 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js @@ -23,22 +23,30 @@ class DeviceList extends Component { .map(device => ( device !== selectedDevice && ( onSelectDevice(device)} + key={device.state || device.path} + disabled={device.features && device.features.bootloader_mode} + onClickWrapper={() => { + if (device.features + && !device.features.bootloader_mode) { + onSelectDevice(device); + } + }} onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, device)} icon={( - { - event.stopPropagation(); - event.preventDefault(); - this.onDeviceMenuClick({ type: 'forget', label: '' }, device); - }} - > - - + + { + event.stopPropagation(); + event.preventDefault(); + this.onDeviceMenuClick({ type: 'forget', label: '' }, device); + }} + > + + + )} device={device} devices={devices} diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index 18ff81eb..ad81cb8d 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -16,6 +16,18 @@ import type { Props } from './components/common'; const Header = styled(DeviceHeader)``; +const Counter = styled.div` + border: 1px solid ${colors.DIVIDER}; + border-radius: 50%; + color: ${colors.TEXT_SECONDARY}; + width: 24px; + height: 24px; + line-height: 22px; + text-align: center; + font-size: 11px; + margin-right: 8px; +`; + const TransitionGroupWrapper = styled(TransitionGroup)` width: 640px; `; @@ -101,6 +113,7 @@ class LeftNavigation extends React.PureComponent { this.state = { animationType: null, shouldRenderDeviceSelection: false, + clicked: false, }; } @@ -143,6 +156,7 @@ class LeftNavigation extends React.PureComponent { } handleOpen() { + this.setState({ clicked: true }); this.props.toggleDeviceDropdown(!this.props.wallet.dropdownOpened); } @@ -173,11 +187,26 @@ class LeftNavigation extends React.PureComponent { deviceSelection={this.props.wallet.dropdownOpened} >
this.handleOpen()} device={this.props.wallet.selectedDevice} transport={this.props.connect.transport} devices={this.props.devices} isOpen={this.props.wallet.dropdownOpened} + icon={( + + {this.props.devices.length > 1 && ( + {this.props.devices.length} + )} + + + )} {...this.props} />