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:
parent
d3de475205
commit
c79e3286ca
@ -87,7 +87,8 @@ export default class Status {
|
||||
setTimeout(this._pollStatus, timeout);
|
||||
};
|
||||
|
||||
if (isConnected !== this._store.getState().nodeStatus.isConnected) {
|
||||
const wasConnected = this._store.getState().nodeStatus.isConnected;
|
||||
if (isConnected !== wasConnected) {
|
||||
this._fetchEnode();
|
||||
}
|
||||
|
||||
|
75
js/src/ui/CopyToClipboard/copyToClipboard.js
Normal file
75
js/src/ui/CopyToClipboard/copyToClipboard.js
Normal 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();
|
||||
}
|
||||
}
|
17
js/src/ui/CopyToClipboard/index.js
Normal file
17
js/src/ui/CopyToClipboard/index.js
Normal 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';
|
@ -25,6 +25,7 @@ import Button from './Button';
|
||||
import ConfirmDialog from './ConfirmDialog';
|
||||
import Container, { Title as ContainerTitle } from './Container';
|
||||
import ContextProvider from './ContextProvider';
|
||||
import CopyToClipboard from './CopyToClipboard';
|
||||
import Errors from './Errors';
|
||||
import Form, { AddressSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form';
|
||||
import IdentityIcon from './IdentityIcon';
|
||||
@ -53,6 +54,7 @@ export {
|
||||
Container,
|
||||
ContainerTitle,
|
||||
ContextProvider,
|
||||
CopyToClipboard,
|
||||
Errors,
|
||||
Form,
|
||||
FormWrap,
|
||||
|
@ -28,9 +28,13 @@
|
||||
}
|
||||
|
||||
.enode {
|
||||
width: 45em;
|
||||
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 {
|
||||
|
@ -19,6 +19,7 @@ import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import { BlockStatus } from '../../../ui';
|
||||
import CopyToClipboard from '../../../ui/CopyToClipboard';
|
||||
|
||||
import styles from './status.css';
|
||||
|
||||
@ -68,9 +69,14 @@ class Status extends Component {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [protocol, rest] = enode.split('://');
|
||||
const [id, host] = rest.split('@');
|
||||
const abbreviated = `${protocol}://${id.slice(0, 3)}…${id.slice(-3)}@${host}`;
|
||||
|
||||
return (
|
||||
<div className={ styles.enode }>
|
||||
{ enode }
|
||||
<CopyToClipboard data={ enode } />
|
||||
<div>{ abbreviated }</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user