arno
/
trezor-wallet
mirror of https://github.com/trezor/trezor-wallet
1
0
Fork 0
Code Issues Releases Wiki Activity

added device status indicator (color-dot in aside)

Browse Source
pull/2/merge
Szymon Lesisz 6 years ago
parent 55728f6ba3
commit 424339442e
3 changed files with 65 additions and 205 deletions
Show Stats Download Patch File Download Diff File

138
src/js/components/wallet/aside/DeviceSelection.js
Unescape View File

@ -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<any> = [];
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 (
<div key={ item } className={ item } onClick={ event => onClick(event, item, device) }></div>
)
});
const deviceMenu = deviceMenuButtons.length < 1 ? null : (
<div className="device-menu">
{ deviceMenuButtons }
</div>
);
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 (
<div className={ css } onClick={ handleOpen }>
<div className="label-container">
<span className="label">{ device.instanceLabel }</span>
<span className="label">{ selected.instanceLabel }</span>
<span className="status">{ deviceStatus }</span>
</div>
{ props.deviceCount > 1 ? <div className="counter">{ props.deviceCount }</div> : null }
{ deviceCount > 1 ? <div className="counter">{ deviceCount }</div> : null }
<div className="arrow"></div>
</div>
);
}
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 (
<Value
className="device-select"
onClick={ handleMenuClick }
disabled={ disabled }
value={ selected }
deviceCount={ devices.length }
opened={ props.deviceDropdownOpened }
onOpen={ () => props.toggleDeviceDropdown(true) }
onClose={ () => props.toggleDeviceDropdown(false) }
/>
);
}
type DeviceMenuItem = {
type: string;
label: string;
@ -263,10 +182,13 @@ export class DeviceDropdown extends Component<Props> {
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) {

131
src/styles/aside.less
Unescape View File

@ -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 {

1
src/styles/send.less
Unescape View File

@ -153,6 +153,7 @@
&.enabled {
color: @color_white;
background: @color_green_primary;
border-color: @color_green_primary;
&:before {
.icomoon-checked;
}

Write Preview
Loading…
Cancel
Save