arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

DeviceHeader customization with right icon

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-25 15:48:55 +02:00
parent ed6e0ee6da
commit a2d7916d9f
3 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/config/icons.js
View File

@ -1,4 +1,7 @@
export default { export default {
EJECT: [
'M276 768h471.968c11.072 0 20.032-9.76 20.032-21.824v-75.968c0-12.064-8.96-21.824-20-21.824h-472c-11.040 0-20 9.76-20 21.824v75.968c0 12.064 8.96 21.824 20 21.824zM503.552 260.192l-231.232 288.128c-6.368 7.904-1.184 20.32 8.448 20.32h462.496c9.664 0 14.816-12.384 8.448-20.32l-231.232-288.128c-4.512-5.6-12.448-5.6-16.928 0z',
],
CLOSE: [ CLOSE: [
'M754.816 689.92c17.6 17.6 17.6 46.72 0 64.64-8.96 8.64-20.48 13.44-32.64 13.44s-23.68-4.8-32.32-13.44l-177.888-177.92-177.888 177.92c-16.32 16.96-47.040 17.6-64.64 0-17.92-17.92-17.92-47.040 0-64.64l178.208-177.92-178.208-177.92c-17.92-17.92-17.92-46.72 0-64.64 17.28-17.28 47.36-17.28 64.64 0l177.888 177.92 177.888-177.92c17.92-17.92 47.040-17.92 64.96 0 17.6 17.92 17.6 46.72 0 64.64l-178.24 177.92 178.24 177.92z', 'M754.816 689.92c17.6 17.6 17.6 46.72 0 64.64-8.96 8.64-20.48 13.44-32.64 13.44s-23.68-4.8-32.32-13.44l-177.888-177.92-177.888 177.92c-16.32 16.96-47.040 17.6-64.64 0-17.92-17.92-17.92-47.040 0-64.64l178.208-177.92-178.208-177.92c-17.92-17.92-17.92-46.72 0-64.64 17.28-17.28 47.36-17.28 64.64 0l177.888 177.92 177.888-177.92c17.92-17.92 47.040-17.92 64.96 0 17.6 17.92 17.6 46.72 0 64.64l-178.24 177.92 178.24 177.92z',
], ],

15
src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js
View File

@ -101,20 +101,20 @@ class DeviceHeader extends Component {
}; };
} }
handleClick() { handleClickWrapper() {
this.setState({ clicked: true }); this.setState({ clicked: true });
if (!this.props.disabled) { if (!this.props.disabled) {
this.props.handleOpen(); this.props.onClickWrapper();
} }
} }
render() { render() {
const { const {
status, label, deviceCount, isOpen, trezorModel, disabled, status, label, deviceCount, isOpen, trezorModel, disabled, icon,
} = this.props; } = this.props;
return ( return (
<Wrapper isOpen={isOpen}> <Wrapper isOpen={isOpen}>
<ClickWrapper disabled={disabled} onClick={() => this.handleClick()}> <ClickWrapper disabled={disabled} onClick={() => this.handleClickWrapper()}>
<ImageWrapper> <ImageWrapper>
<Dot color={getStatusColor(status)} /> <Dot color={getStatusColor(status)} />
<TrezorImage model={trezorModel} /> <TrezorImage model={trezorModel} />
@ -124,8 +124,9 @@ class DeviceHeader extends Component {
<Status>{getStatusName(status)}</Status> <Status>{getStatusName(status)}</Status>
</LabelWrapper> </LabelWrapper>
<IconWrapper> <IconWrapper>
{deviceCount > 1 && <Counter>{deviceCount}</Counter>} {icon && icon}
{!disabled && ( {!icon && deviceCount > 1 && <Counter>{deviceCount}</Counter>}
{!icon && !disabled && (
<Icon <Icon
canAnimate={this.state.clicked === true} canAnimate={this.state.clicked === true}
isActive={isOpen} isActive={isOpen}
@ -148,7 +149,7 @@ DeviceHeader.propTypes = {
disabled: PropTypes.bool, disabled: PropTypes.bool,
isOpen: PropTypes.bool, isOpen: PropTypes.bool,
trezorModel: PropTypes.string.isRequired, trezorModel: PropTypes.string.isRequired,
handleOpen: PropTypes.func.isRequired, onClickWrapper: PropTypes.func.isRequired,
status: PropTypes.string.isRequired, status: PropTypes.string.isRequired,
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
}; };

33
src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
View File

@ -1,6 +1,9 @@
/* @flow */ /* @flow */
import React, { Component } from 'react'; import React, { Component } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import icons from 'config/icons';
import colors from 'config/colors';
import Icon from 'components/Icon';
import TrezorConnect from 'trezor-connect'; import TrezorConnect from 'trezor-connect';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
import { getStatus, getVersion, isDisabled } from 'utils/device'; import { getStatus, getVersion, isDisabled } from 'utils/device';
@ -13,6 +16,7 @@ import type { Props } from '../common';
import AsideDivider from '../Divider'; import AsideDivider from '../Divider';
const Wrapper = styled.div``; const Wrapper = styled.div``;
const IconClick = styled.div``;
export const DeviceSelect = (props: Props) => { export const DeviceSelect = (props: Props) => {
const { devices } = props; const { devices } = props;
@ -26,7 +30,7 @@ export const DeviceSelect = (props: Props) => {
return ( return (
<DeviceHeader <DeviceHeader
handleOpen={handleOpen} onClickWrapper={handleOpen}
disabled={disabled} disabled={disabled}
label={selectedDevice.instanceLabel} label={selectedDevice.instanceLabel}
status={getStatus(selectedDevice)} status={getStatus(selectedDevice)}
@ -170,20 +174,27 @@ export class DeviceDropdown extends Component<Props> {
} }
return ( return (
<div key={index} className={css} onClick={() => this.props.onSelectDevice(dev)}> <DeviceHeader
<div className="label-container"> onClickWrapper={() => this.props.onSelectDevice(dev)}
<span className="label">{dev.instanceLabel}</span> onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)}
<span className="status">{deviceStatus}</span> icon={(
</div> <IconClick onClick={(event) => {
<div
className="forget-button"
onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
this.onDeviceMenuClick({ type: 'forget', label: '' }, dev); this.onDeviceMenuClick({ type: 'forget', label: '' }, dev);
}} }}
/> >
</div> <Icon
icon={icons.EJECT}
size={25}
color={colors.TEXT_SECONDARY}
/>
</IconClick>
)}
label={dev.instanceLabel}
status={getStatus(dev)}
trezorModel={getVersion(dev)}
/>
); );
}); });