diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js new file mode 100644 index 00000000..ba1ea7c1 --- /dev/null +++ b/src/js/components/DeviceHeader/index.js @@ -0,0 +1,125 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import Icon from 'components/Icon'; +import icons from 'config/icons'; +import { getStatusColor } from 'utils/device'; +import TrezorImage from 'components/TrezorImage'; + +import colors from 'config/colors'; + +const Wrapper = styled.div` + position: relative; + height: 64px; + width: 320px; + display: flex; + align-items: center; +`; + +const ImageWrapper = styled.div` +`; + +const Dot = styled.div` + border: 2px solid @color_white; + border-radius: 50%; + position: absolute; + background: red; +`; + +const ClickWrapper = styled.div` + width: 100%; + display: flex; + padding-left: 22px; + height: 100%; + align-items: center; + cursor: pointer; +`; + +const LabelWrapper = styled.div` + flex: 1; + padding-left: 18px; +`; + +const Name = styled.div` + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-weight: 500; + font-size: 14px; + color: ${colors.TEXT_PRIMARY}; +`; + +const Status = styled.div` + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: 12px; + 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; +`; + +const StyledIcon = styled(Icon)` + transform: rotate(180deg); +`; + +const DeviceHeader = ({ + disabled = false, + handleOpen, + status, + label, + deviceCount, + isOpen = false, + trezorModel, +}) => ( + + + + + + + + {label} + {status} + + + {deviceCount > 1 ? {deviceCount} : null} + + + + +); + +DeviceHeader.propTypes = { + deviceCount: PropTypes.number, + disabled: PropTypes.bool, + isOpen: PropTypes.bool, + trezorModel: PropTypes.string.isRequired, + handleOpen: PropTypes.func.isRequired, + status: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, +}; + +export default DeviceHeader; diff --git a/src/js/components/TrezorImage/images/trezor-1.png b/src/js/components/TrezorImage/images/trezor-1.png new file mode 100644 index 00000000..8c35659b Binary files /dev/null and b/src/js/components/TrezorImage/images/trezor-1.png differ diff --git a/src/js/components/TrezorImage/images/trezor-T.png b/src/js/components/TrezorImage/images/trezor-T.png new file mode 100644 index 00000000..54fdab30 Binary files /dev/null and b/src/js/components/TrezorImage/images/trezor-T.png differ diff --git a/src/js/components/TrezorImage/index.js b/src/js/components/TrezorImage/index.js new file mode 100644 index 00000000..677be08f --- /dev/null +++ b/src/js/components/TrezorImage/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; + +const Wrapper = styled.div` + width: 20px; +`; + +const Img = styled.img` + width: ${props => (props.model === 'T' ? '17px' : '13px')}; +`; + +const TrezorImage = ({ model }) => ( + + + +); + +TrezorImage.propTypes = { + model: PropTypes.string, +}; + +export default TrezorImage; diff --git a/src/js/config/icons.js b/src/js/config/icons.js index 936466a1..5b3fe5e4 100644 --- a/src/js/config/icons.js +++ b/src/js/config/icons.js @@ -1,6 +1,7 @@ export default { PLUS: 'M768 512c0 22.080-17.92 40-40 40h-176v176c0 22.080-17.92 40-40 40s-40-17.92-40-40v-176h-176c-22.080 0-40-17.92-40-40s17.92-40 40-40h176v-176c0-22.080 17.92-40 40-40s40 17.92 40 40v176h176c22.080 0 40 17.92 40 40z', ARROW_LEFT: 'M603.072 757.216l-237.44-219.616c-8.576-8.128-13.632-19.296-13.632-31.040 0.288-11.744 5.056-23.2 13.664-31.040l227.040-208.768c16.928-15.36 43.040-14.176 58.176 3.008 15.424 16.864 13.952 43.392-2.656 59.040l-193.504 177.76 203.904 188.608c8 7.52 12.768 18.080 13.344 29.216 0.608 11.456-3.264 21.696-10.688 30.112-15.456 16.896-41.568 18.080-58.208 2.72z', + ARROW_DOWN: 'M757.216 420.928l-219.616 237.44c-8.128 8.576-19.296 13.632-31.040 13.632-11.744-0.288-23.2-5.056-31.040-13.664l-208.768-227.040c-15.36-16.928-14.176-43.040 3.008-58.176 16.864-15.424 43.392-13.952 59.040 2.656l177.76 193.504 188.608-203.904c7.52-8 18.080-12.768 29.216-13.344 11.456-0.608 21.696 3.264 30.112 10.688 16.896 15.456 18.080 41.568 2.72 58.208z', CHAT: 'M580.992 256h-137.984c-103.296 0-187.008 85.952-187.008 192 0 96.608 69.536 176.32 160 189.792v130.208l128-128h36.992c103.296 0 187.008-85.952 187.008-192s-83.712-192-187.008-192z', SKIP: 'M512 256c-141.376 0-256 114.656-256 256 0 141.408 114.624 256 256 256s256-114.592 256-256c0-141.344-114.624-256-256-256zM529.056 631.456v-68.256c-102.4-34.144-136.544 0-170.656 68.256 0-170.656 102.4-204.8 170.656-204.8v-68.256l136.544 136.544-136.544 136.512z', WARNING: 'M795.616 735.008l-264.896-465.44c-10.272-18.080-27.168-18.080-37.504 0l-264.864 465.44c-10.272 18.176-1.696 32.992 19.040 32.992h529.184c20.8 0 29.376-14.816 19.040-32.992zM549.76 673.12c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-37.952c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v37.952zM549.76 559.264c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-113.856c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v113.856z', diff --git a/src/js/utils/device.js b/src/js/utils/device.js new file mode 100644 index 00000000..0560f130 --- /dev/null +++ b/src/js/utils/device.js @@ -0,0 +1,56 @@ +const getStatus = (device) => { + let deviceStatus = ''; + if (device.type === 'unacquired' || (device.features && device.status === 'occupied')) { + deviceStatus = 'used-in-other-window'; + } else if (device.type === 'unreadable') { + deviceStatus = 'connected'; + } else if (!device.connected) { + deviceStatus = 'disconnected'; + } else if (!device.available) { + deviceStatus = 'unavailable'; + } + + return deviceStatus; +}; + +const getStatusName = (device) => { + const status = getStatus(device); + const unknownStatusName = 'Status unknown'; + let statusName; + switch (status) { + case 'used-in-other-window': + statusName = 'Used in other window'; + break; + case 'connected': + statusName = 'Connected'; + break; + case 'disconnected': + statusName = 'Disconnected'; + break; + case 'unavailable': + statusName = 'Unavailable'; + break; + default: + statusName = unknownStatusName; + } + + return statusName; +}; + +const getVersion = (device) => { + let version = null; + if (device.features && device.features.major_version > 1) { + version = 'T'; + } else { + version = '1'; + } + return version; +}; + +const getStatusColor = device => 'red'; + +export { + getStatusName, + getVersion, + getStatusColor, +}; \ No newline at end of file diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js index 81935b30..565d87c1 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js +++ b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js @@ -1,33 +1,21 @@ -import React from 'react'; +import React, { Component } from 'react'; import styled from 'styled-components'; -import deviceConstants from 'constants/device'; +import { getStatus } from 'utils/device'; const Wrapper = styled.div``; -class DeviceList { - getStatus(device) { - let deviceStatus = ''; - if (device.type === 'unacquired' || (device.features && device.status === 'occupied')) { - deviceStatus = 'Used in other window'; - } else if (device.type === 'unreadable') { - deviceStatus = 'Connected'; - } else if (!device.connected) { - deviceStatus = 'Disconnected'; - } else if (!device.available) { - deviceStatus = 'Unavailable'; - } - - return deviceStatus; - } - +class DeviceList extends Component { render() { return ( {this.props.devices.map((device, index) => ( -
this.props.onSelectDevice(device)}> +
this.props.onSelectDevice(device)} + >
{device.instanceLabel} - {this.getStatus(device)} + {getStatus(device)}
{ const { devices } = props; const { transport } = props.connect; @@ -41,10 +47,6 @@ export const DeviceSelect = (props: Props) => { css += ' trezor-t'; } - const handleOpen = () => { - props.toggleDeviceDropdown(!props.deviceDropdownOpened); - }; - const deviceCount = devices.length; const webusb: boolean = !!((transport && transport.version.indexOf('webusb') >= 0)); const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selected.features && !webusb); @@ -52,14 +54,28 @@ export const DeviceSelect = (props: Props) => { css += ' disabled'; } + const handleOpen = () => { + props.toggleDeviceDropdown(!props.deviceDropdownOpened); + }; + return ( -
-
- {selected.instanceLabel} - {deviceStatus} +
+ +
+
+ {selected.instanceLabel} + {deviceStatus} +
+ {deviceCount > 1 ?
{deviceCount}
: null} +
- {deviceCount > 1 ?
{deviceCount}
: null} -
); }; @@ -172,7 +188,7 @@ export class DeviceDropdown extends Component { const sortByInstance = (a: TrezorDevice, b: TrezorDevice) => { if (!a.instance || !b.instance) return -1; return a.instance > b.instance ? 1 : -1; - } + }; const deviceList = devices.sort(sortByInstance).map((dev, index) => { if (dev === selected) return null; @@ -214,14 +230,14 @@ export class DeviceDropdown extends Component { ); }); - return ( - + {currentDeviceMenu} - {deviceList.length > 1 ? : null} + {this.props.devices.length > 1 ? : null} + {/* */} {deviceList} {webUsbButton} - + ); } }