arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +00:00
Code Issues Releases Wiki Activity

device counter

Browse Source
This commit is contained in:
Szymon Lesisz 2018-05-10 16:57:54 +02:00
parent 898c61dc7f
commit a1bad8a0d6
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/js/components/wallet/aside/DeviceSelection.js
View File

@ -10,7 +10,17 @@ import { findSelectedDevice } from '../../../reducers/TrezorConnectReducer';
import type { Props } from './index'; import type { Props } from './index';
import type { TrezorDevice } from '../../../flowtype'; 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 const device = props.value; // device is passed as value of selected item
// prevent onMouseDown event // prevent onMouseDown event
@ -93,8 +103,8 @@ const Value = (props: any): any => {
<span className="label">{ device.instanceLabel }</span> <span className="label">{ device.instanceLabel }</span>
<span className="status">{ deviceStatus }</span> <span className="status">{ deviceStatus }</span>
</div> </div>
<div className="arrow"> { props.deviceCount > 1 ? <div className="counter">{ props.deviceCount }</div> : null }
</div> <div className="arrow"></div>
</div> </div>
); );
} }
@ -127,6 +137,7 @@ export const DeviceSelect = (props: Props) => {
onClick={ handleMenuClick } onClick={ handleMenuClick }
disabled={ disabled } disabled={ disabled }
value={ selected } value={ selected }
deviceCount={ devices.length }
opened={ props.deviceDropdownOpened } opened={ props.deviceDropdownOpened }
onOpen={ () => props.toggleDeviceDropdown(true) } onOpen={ () => props.toggleDeviceDropdown(true) }
onClose={ () => props.toggleDeviceDropdown(false) } onClose={ () => props.toggleDeviceDropdown(false) }

16
src/styles/aside.less
View File

@ -122,7 +122,7 @@ aside {
} }
&.opened { &.opened {
border-bottom: 0px; border-color: @color_white;
box-shadow: none; box-shadow: none;
.arrow:after { .arrow:after {
transform: rotate(180deg); 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 { // .device-menu {
// display: flex; // display: flex;
// justify-content: flex-end; // justify-content: flex-end;
@ -289,7 +301,7 @@ aside {
.icomoon-T1; .icomoon-T1;
font-size: 32px; font-size: 32px;
transform: translateX(-4px); transform: translateX(-4px);
margin-right: 20px; margin-right: 8px;
} }
} }