From 424339442e138648ab8d23951e106106984abe93 Mon Sep 17 00:00:00 2001 From: Szymon Lesisz Date: Fri, 11 May 2018 12:44:37 +0200 Subject: [PATCH] added device status indicator (color-dot in aside) --- .../wallet/aside/DeviceSelection.js | 138 ++++-------------- src/styles/aside.less | 131 +++++------------ src/styles/send.less | 1 + 3 files changed, 65 insertions(+), 205 deletions(-) diff --git a/src/js/components/wallet/aside/DeviceSelection.js b/src/js/components/wallet/aside/DeviceSelection.js index 6a6197de..9c3b23bf 100644 --- a/src/js/components/wallet/aside/DeviceSelection.js +++ b/src/js/components/wallet/aside/DeviceSelection.js @@ -10,141 +10,60 @@ import { findSelectedDevice } from '../../../reducers/TrezorConnectReducer'; import type { Props } from './index'; import type { TrezorDevice } from '../../../flowtype'; -type ValueProps = { - onClick: (type: string, device: TrezorDevice) => void, - onOpen: () => any, - onClose: () => any, - value: TrezorDevice, - opened: boolean, - disabled: boolean, - deviceCount: number, -} - -const Value = (props: ValueProps): any => { - const device = props.value; // device is passed as value of selected item +export const DeviceSelect = (props: Props) => { - // prevent onMouseDown event - const onMouseDown = event => { - if (props.onClick) { - event.preventDefault(); - event.stopPropagation(); - } - } + const { devices, transport } = props.connect; - const onClick = (event, item, device) => { - if (props.onClick) { - event.preventDefault(); - event.stopPropagation(); - props.onClick(item, device); - } - } + const selected: ?TrezorDevice = findSelectedDevice(props.connect); + if (!selected) return null; let deviceStatus: string = "Connected"; let css: string = "device-select device"; - if (props.opened) css += " opened"; - if (props.disabled) css += " disabled"; - - - const deviceMenuItems: Array = []; + if (props.deviceDropdownOpened) css += " opened"; - if (device.features && device.features.passphrase_protection) { - deviceMenuItems.push("settings"); // TODO: clone - } - - if (device.unacquired) { - css += " unacquired"; - deviceStatus = "Used in other window"; - } - if (device.isUsedElsewhere) { - css += " used-elsewhere"; - deviceStatus = "Used in other window"; - deviceMenuItems.push("acquire"); - } else if (device.featuresNeedsReload) { - css += " reload-features"; - //deviceMenuItems.push("acquire"); - } - if (!device.connected) { - css += " reload-features"; + if (!selected.connected) { + css += " disconnected"; deviceStatus = "Disconnected"; - } else if (!device.available) { + } else if (!selected.available) { css += " unavailable"; deviceStatus = "Unavailable"; + } else { + if (selected.unacquired) { + css += " unacquired"; + deviceStatus = "Used in other window"; + } + if (selected.isUsedElsewhere) { + css += " used-elsewhere"; + deviceStatus = "Used in other window"; + } else if (selected.featuresNeedsReload) { + css += " reload-features"; + } } - if (device.remember) { - deviceMenuItems.push("forget"); - } - - if (device.features && device.features.major_version > 1) { + if (selected.features && selected.features.major_version > 1) { css += " trezor-t"; } - - - const deviceMenuButtons = deviceMenuItems.map((item, index) => { - return ( -
onClick(event, item, device) }>
- ) - }); - const deviceMenu = deviceMenuButtons.length < 1 ? null : ( -
- { deviceMenuButtons } -
- ); - const handleOpen = () => { - if (props.disabled) return; - props.opened ? props.onClose() : props.onOpen(); + props.toggleDeviceDropdown(props.deviceDropdownOpened ? false : true); } + const deviceCount = devices.length; + const webusb: boolean = (transport && transport.version.indexOf('webusb') >= 0) ? true : false; + const disabled: boolean = (devices.length < 1 && !webusb); + return (
- { device.instanceLabel } + { selected.instanceLabel } { deviceStatus }
- { props.deviceCount > 1 ?
{ props.deviceCount }
: null } + { deviceCount > 1 ?
{ deviceCount }
: null }
); } - - -export const DeviceSelect = (props: Props) => { - - const { devices, transport } = props.connect; - - const selected: ?TrezorDevice = findSelectedDevice(props.connect); - if (!selected) return null; - - const handleMenuClick = (type: string, device: TrezorDevice) => { - if (type === 'acquire') { - props.acquireDevice(); - } else if (type === 'forget') { - props.forgetDevice(device); - }else if (type === 'settings') { - props.duplicateDevice(device); - } - } - - const webusb: boolean = (transport && transport.version.indexOf('webusb') >= 0) ? true : false; - const disabled: boolean = (devices.length < 1 && !webusb); - - return ( - props.toggleDeviceDropdown(true) } - onClose={ () => props.toggleDeviceDropdown(false) } - /> - ); -} - type DeviceMenuItem = { type: string; label: string; @@ -263,10 +182,13 @@ export class DeviceDropdown extends Component { let css: string = "device item" if (dev.unacquired || dev.isUsedElsewhere) { deviceStatus = "Used in other window"; + css += " unacquired"; } else if (!dev.connected) { deviceStatus = "Disconnected"; + css += " disconnected"; } else if (!dev.available) { deviceStatus = "Unavailable"; + css += " unavailable"; } if (dev.features && dev.features.major_version > 1) { diff --git a/src/styles/aside.less b/src/styles/aside.less index cf9f7a64..853162ce 100644 --- a/src/styles/aside.less +++ b/src/styles/aside.less @@ -3,61 +3,8 @@ aside { width: 320px; min-width: 320px; border-right: 1px solid @color_divider; - //display: flex; - //flex-direction: column; overflow-x: hidden; - .Select { - width: 320px; - height: 64px; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); - background: @color_white; - - .Select-control { - height: 63px; - border: 0px; - // border-radius: 4px 0px 0px 0px; - border-right: 1px solid @color_divider; - border-bottom: 1px solid @color_divider; - transition: color 0.3s ease-in-out; - } - - .Select-arrow-zone { - right: 24px; - } - - .Select-menu-outer { - visibility: hidden; - } - - &.is-open { - .Select-control { - border-color: @color_divider; - } - } - - &.is-disabled { - .Select-control { - background: @color_white; - cursor: default; - } - - .Select-arrow { - visibility: hidden; - // &:after { - // content: '' - // } - } - - .device { - .device-menu { - padding-right: 24px; - } - } - } - } - - .sticky-container { position: relative; top: 0; @@ -173,6 +120,35 @@ aside { background-image: url('../images/trezor-1.png'); } + &:after { + content: ''; + position: absolute; + display: block; + width: 10px; + height: 10px; + top: 14px; + left: 32px; + background: @color_green_primary; + border: 2px solid @color_white; + border-radius: 50%; + z-index: 3; + } + + &.disconnected, + &.unavailable, { + &:after { + background: @color_error_primary; + } + } + + &.unacquired, + &.used-elsewhere, + &.reload-features, { + &:after { + background: @color_warning_primary; + } + } + &.trezor-t { &:before { width: 17px; @@ -180,6 +156,11 @@ aside { background-size: 17px 25px; background-image: url('../images/trezor-T.png'); } + + &:after { + left: 34px; + top: 14px; + } } .label-container { @@ -215,50 +196,6 @@ aside { font-size: 11px; margin-right: 8px; } - - // .device-menu { - // display: flex; - // justify-content: flex-end; - // padding-right: 4px; - // padding-left: 4px; - - // div { - // display: inline-block; - // } - - // .forget, - // .settings, - // .acquire { - // cursor: pointer; - - // &:before { - // .icomoon-refresh; - // color: @color_text_secondary; - // position: relative; - // font-size: 24px; - // .hover(); - // } - - // &:hover { - // &:before { - // color: @color_text_primary; - // } - // } - // } - - // .forget { - // &:before { - // .icomoon-eject; - // } - // } - - // .settings { - // &:before { - // .icomoon-settings; - // } - // } - // } - } .device-menu { diff --git a/src/styles/send.less b/src/styles/send.less index 954b1b13..2c439a9a 100644 --- a/src/styles/send.less +++ b/src/styles/send.less @@ -153,6 +153,7 @@ &.enabled { color: @color_white; background: @color_green_primary; + border-color: @color_green_primary; &:before { .icomoon-checked; }