diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js index fe1980ec..bd858bfb 100644 --- a/src/js/components/Icon/index.js +++ b/src/js/components/Icon/index.js @@ -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); diff --git a/src/js/components/DeviceHeader/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js similarity index 74% rename from src/js/components/DeviceHeader/index.js rename to src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js index bd61bde0..fcc2fc12 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js @@ -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 ( - - this.handleClick()}> + + this.handleClick()}> @@ -115,14 +131,16 @@ class DeviceHeader extends Component { {deviceCount > 1 && {deviceCount}} - + {!disabled && ( + + ) + } diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index cdc3589f..79ed2025 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -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 ( -
- -
-
- {selected.instanceLabel} - {deviceStatus} -
- {deviceCount > 1 ?
{deviceCount}
: null} -
-
-
+ ); }; diff --git a/src/js/views/Wallet/components/LeftNavigation/index.js b/src/js/views/Wallet/components/LeftNavigation/index.js index c810a2d3..ad427a6c 100644 --- a/src/js/views/Wallet/components/LeftNavigation/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/index.js @@ -144,12 +144,13 @@ class LeftNavigation extends Component { } render() { + const { selectedDevice } = this.props.wallet; return ( - + {selectedDevice && } {this.state.shouldRenderDeviceSelection && } {this.shouldRenderAccounts() && this.getMenuTransition()}