diff --git a/src/js/components/wallet/aside/DeviceSelection.js b/src/js/components/wallet/aside/DeviceSelection.js index e592fc7a..6a6197de 100644 --- a/src/js/components/wallet/aside/DeviceSelection.js +++ b/src/js/components/wallet/aside/DeviceSelection.js @@ -10,7 +10,17 @@ import { findSelectedDevice } from '../../../reducers/TrezorConnectReducer'; import type { Props } from './index'; import type { TrezorDevice } from '../../../flowtype'; -const Value = (props: any): any => { +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 // prevent onMouseDown event @@ -93,8 +103,8 @@ const Value = (props: any): any => { { device.instanceLabel } { deviceStatus } -
-
+ { props.deviceCount > 1 ?
{ props.deviceCount }
: null } +
); } @@ -127,6 +137,7 @@ export const DeviceSelect = (props: Props) => { onClick={ handleMenuClick } disabled={ disabled } value={ selected } + deviceCount={ devices.length } opened={ props.deviceDropdownOpened } onOpen={ () => props.toggleDeviceDropdown(true) } onClose={ () => props.toggleDeviceDropdown(false) } diff --git a/src/styles/aside.less b/src/styles/aside.less index 86f02832..c9994aba 100644 --- a/src/styles/aside.less +++ b/src/styles/aside.less @@ -122,7 +122,7 @@ aside { } &.opened { - border-bottom: 0px; + border-color: @color_white; box-shadow: none; .arrow:after { transform: rotate(180deg); @@ -204,6 +204,18 @@ aside { } } + .counter { + border: 1px solid @color_divider; + border-radius: 50%; + color: @color_text_secondary; + width: 24px; + height: 24px; + line-height: 22px; + text-align: center; + font-size: 11px; + margin-right: 4px; + } + // .device-menu { // display: flex; // justify-content: flex-end; @@ -289,7 +301,7 @@ aside { .icomoon-T1; font-size: 32px; transform: translateX(-4px); - margin-right: 20px; + margin-right: 8px; } }