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;
}
}