diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js
index 2bf43108..7a27bbef 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 cf53f97c..80360f6a 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -13,6 +13,18 @@ import StickyContainer from './components/StickyContainer';
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;
`;
@@ -64,6 +76,7 @@ class LeftNavigation extends Component {
this.state = {
animationType: null,
shouldRenderDeviceSelection: false,
+ clicked: false,
};
}
@@ -128,6 +141,7 @@ class LeftNavigation extends Component {
}
handleOpen() {
+ this.setState({ clicked: true });
this.props.toggleDeviceDropdown(!this.props.wallet.dropdownOpened);
}
@@ -142,11 +156,26 @@ class LeftNavigation extends Component {
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}
/>