abbreviated enode, CopyToClipboard component (#3131)

* show abbreviated enode

* CopyToClipboard component

* CopyToClipboard: improved styling

* put CopyToClipboard into enode status

* Rename CopyToClipboard.js to copyToClipboard.js
This commit is contained in:
Jannis Redmann 2016-11-03 22:22:53 +01:00 committed by Gav Wood
parent d3de475205
commit c79e3286ca
6 changed files with 109 additions and 4 deletions

View File

@ -87,7 +87,8 @@ export default class Status {
setTimeout(this._pollStatus, timeout); setTimeout(this._pollStatus, timeout);
}; };
if (isConnected !== this._store.getState().nodeStatus.isConnected) { const wasConnected = this._store.getState().nodeStatus.isConnected;
if (isConnected !== wasConnected) {
this._fetchEnode(); this._fetchEnode();
} }

View File

@ -0,0 +1,75 @@
// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { IconButton } from 'material-ui';
import Clipboard from 'react-copy-to-clipboard';
import CopyIcon from 'material-ui/svg-icons/content/content-copy';
import Theme from '../Theme';
const { textColor, disabledTextColor } = Theme.flatButton;
export default class CopyToClipboard extends Component {
static propTypes = {
data: PropTypes.string.isRequired,
label: PropTypes.string,
onCopy: PropTypes.func,
size: PropTypes.number, // in px
cooldown: PropTypes.number // in ms
};
static defaultProps = {
className: '',
label: 'copy to clipboard',
onCopy: () => {},
size: 16,
cooldown: 1000
};
state = {
copied: false
};
render () {
const { data, label, size } = this.props;
const { copied } = this.state;
return (
<Clipboard onCopy={ this.onCopy } text={ data }>
<IconButton
tooltip={ copied ? 'done!' : label }
disableTouchRipple
tooltipPosition={ 'top-right' }
tooltipStyles={ { marginTop: `-${size / 4}px` } }
style={ { width: size, height: size, padding: '0' } }
iconStyle={ { width: size, height: size } }
>
<CopyIcon color={ copied ? disabledTextColor : textColor } />
</IconButton>
</Clipboard>
);
}
onCopy = () => {
const { cooldown, onCopy } = this.props;
this.setState({ copied: true });
setTimeout(() => {
this.setState({ copied: false });
}, cooldown);
onCopy();
}
}

View File

@ -0,0 +1,17 @@
// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './CopyToClipboard';

View File

@ -25,6 +25,7 @@ import Button from './Button';
import ConfirmDialog from './ConfirmDialog'; import ConfirmDialog from './ConfirmDialog';
import Container, { Title as ContainerTitle } from './Container'; import Container, { Title as ContainerTitle } from './Container';
import ContextProvider from './ContextProvider'; import ContextProvider from './ContextProvider';
import CopyToClipboard from './CopyToClipboard';
import Errors from './Errors'; import Errors from './Errors';
import Form, { AddressSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form'; import Form, { AddressSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form';
import IdentityIcon from './IdentityIcon'; import IdentityIcon from './IdentityIcon';
@ -53,6 +54,7 @@ export {
Container, Container,
ContainerTitle, ContainerTitle,
ContextProvider, ContextProvider,
CopyToClipboard,
Errors, Errors,
Form, Form,
FormWrap, FormWrap,

View File

@ -28,9 +28,13 @@
} }
.enode { .enode {
width: 45em;
word-wrap: break-word; word-wrap: break-word;
margin: 0.5em 0 0.25em; margin: 0.5em 0 0.25em 0;
}
.enode > * {
display: inline-block;
margin-left: .5em;
} }
.block { .block {

View File

@ -19,6 +19,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { BlockStatus } from '../../../ui'; import { BlockStatus } from '../../../ui';
import CopyToClipboard from '../../../ui/CopyToClipboard';
import styles from './status.css'; import styles from './status.css';
@ -68,9 +69,14 @@ class Status extends Component {
return null; return null;
} }
const [protocol, rest] = enode.split('://');
const [id, host] = rest.split('@');
const abbreviated = `${protocol}://${id.slice(0, 3)}${id.slice(-3)}@${host}`;
return ( return (
<div className={ styles.enode }> <div className={ styles.enode }>
{ enode } <CopyToClipboard data={ enode } />
<div>{ abbreviated }</div>
</div> </div>
); );
} }