1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 00:18:07 +00:00

Finalized status dot

This commit is contained in:
Vladimir Volek 2018-08-21 17:56:30 +02:00
parent 250aa217a2
commit d7e067616f
4 changed files with 43 additions and 34 deletions

View File

@ -16,16 +16,6 @@ const Wrapper = styled.div`
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;
@ -91,13 +81,13 @@ const DeviceHeader = ({
}) => (
<Wrapper>
<ClickWrapper onClick={!disabled ? handleOpen : null}>
<ImageWrapper>
<Dot color={getStatusColor(status)} />
<TrezorImage model={trezorModel} />
</ImageWrapper>
<TrezorImage
status={status}
model={trezorModel}
/>
<LabelWrapper>
<Name>{getStatusName(status)}</Name>
<Status>{status}</Status>
<Name>{label}</Name>
<Status>{getStatusName(status)}</Status>
</LabelWrapper>
<IconWrapper>
{deviceCount > 1 ? <Counter>{deviceCount}</Counter> : null}

View File

@ -1,17 +1,32 @@
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import { getStatusColor } from 'utils/device';
const Wrapper = styled.div`
width: 20px;
position: relative;
`;
const Dot = styled.div`
border: 2px solid ${colors.WHITE};
border-radius: 50%;
position: absolute;
background: ${props => props.color};
top: -5px;
right: 0px;
width: 10px;
height: 10px;
`;
const Img = styled.img`
width: ${props => (props.model === 'T' ? '17px' : '13px')};
`;
const TrezorImage = ({ model }) => (
const TrezorImage = ({ model, status }) => (
<Wrapper>
{status && <Dot color={getStatusColor(status)} />}
<Img
model={model}
src={model === 'T' ? './images/trezor-T.png' : './images/trezor-1.png'}
@ -21,6 +36,7 @@ const TrezorImage = ({ model }) => (
TrezorImage.propTypes = {
model: PropTypes.string,
status: PropTypes.string,
};
export default TrezorImage;

View File

@ -1,22 +1,23 @@
import colors from 'js/config/colors';
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';
const getDeviceSelectStatus = (device) => {
let status = 'connected';
if (!device.connected) {
status = 'disconnected';
} else if (!device.available) {
deviceStatus = 'unavailable';
status = 'unavailable';
} else if (device.type === 'acquired') {
if (device.status === 'occupied') {
status = 'used-in-other-window';
}
} else if (device.type === 'unacquired') {
status = 'unacquired';
}
return deviceStatus;
return status;
};
const getStatusName = (device) => {
const deviceStatus = getStatus(device);
const getStatusName = (deviceStatus) => {
const unknownStatusName = 'Status unknown';
let statusName;
switch (deviceStatus) {
@ -41,7 +42,7 @@ const getStatusName = (device) => {
const isWebUSB = transport => !!((transport && transport.version.indexOf('webusb') >= 0));
const isDisabled = (devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selected.features && !webusb);
const isDisabled = (selectedDevice, devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selectedDevice.features && !isWebUSB(transport));
const getVersion = (device) => {
let version = null;
@ -53,8 +54,7 @@ const getVersion = (device) => {
return version;
};
const getStatusColor = (device) => {
const deviceStatus = getStatus(device);
const getStatusColor = (deviceStatus) => {
let color = null;
switch (deviceStatus) {
@ -74,10 +74,13 @@ const getStatusColor = (device) => {
color = colors.ERROR_PRIMARY;
}
console.log('color', color);
return color;
};
export {
getDeviceSelectStatus,
isDisabled,
getStatusName,
getVersion,

View File

@ -4,7 +4,7 @@ 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 { getDeviceSelectStatus, getVersion } from 'utils/device';
// import DeviceList from './components/DeviceList';
import type { Props } from '../common';
@ -63,7 +63,7 @@ export const DeviceSelect = (props: Props) => {
<DeviceHeader
handleOpen={handleOpen}
label={selected.instanceLabel}
status={getStatus(selected)}
status={getDeviceSelectStatus(selected)}
deviceCount={deviceCount}
isOpen={props.deviceDropdownOpened}
trezorModel={getVersion(selected)}