device counter

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 => {
                 <span className="label">{ device.instanceLabel }</span>
                 <span className="status">{ deviceStatus }</span>
             </div>
-            <div className="arrow">
+            { props.deviceCount > 1 ? <div className="counter">{ props.deviceCount }</div> : null }
-            </div>
+            <div className="arrow"></div>
         </div>
     );
 }
@@ -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) }

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