From c79e3286cab8f87397923ddf96f6c32574586950 Mon Sep 17 00:00:00 2001 From: Jannis Redmann Date: Thu, 3 Nov 2016 22:22:53 +0100 Subject: [PATCH] abbreviated enode, `CopyToClipboard` component (#3131) * show abbreviated enode * CopyToClipboard component * CopyToClipboard: improved styling * put CopyToClipboard into enode status * Rename CopyToClipboard.js to copyToClipboard.js --- js/src/redux/providers/status.js | 3 +- js/src/ui/CopyToClipboard/copyToClipboard.js | 75 ++++++++++++++++++++ js/src/ui/CopyToClipboard/index.js | 17 +++++ js/src/ui/index.js | 2 + js/src/views/Application/Status/status.css | 8 ++- js/src/views/Application/Status/status.js | 8 ++- 6 files changed, 109 insertions(+), 4 deletions(-) create mode 100644 js/src/ui/CopyToClipboard/copyToClipboard.js create mode 100644 js/src/ui/CopyToClipboard/index.js diff --git a/js/src/redux/providers/status.js b/js/src/redux/providers/status.js index aff453517..658f54197 100644 --- a/js/src/redux/providers/status.js +++ b/js/src/redux/providers/status.js @@ -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(); } diff --git a/js/src/ui/CopyToClipboard/copyToClipboard.js b/js/src/ui/CopyToClipboard/copyToClipboard.js new file mode 100644 index 000000000..3351f2e40 --- /dev/null +++ b/js/src/ui/CopyToClipboard/copyToClipboard.js @@ -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 . + +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 ( + + + + + + ); + } + + onCopy = () => { + const { cooldown, onCopy } = this.props; + + this.setState({ copied: true }); + setTimeout(() => { + this.setState({ copied: false }); + }, cooldown); + + onCopy(); + } +} diff --git a/js/src/ui/CopyToClipboard/index.js b/js/src/ui/CopyToClipboard/index.js new file mode 100644 index 000000000..182cb6804 --- /dev/null +++ b/js/src/ui/CopyToClipboard/index.js @@ -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 . + +export default from './CopyToClipboard'; diff --git a/js/src/ui/index.js b/js/src/ui/index.js index 808dec64a..c2b63097a 100644 --- a/js/src/ui/index.js +++ b/js/src/ui/index.js @@ -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, diff --git a/js/src/views/Application/Status/status.css b/js/src/views/Application/Status/status.css index 3ce33f51b..af15d46d5 100644 --- a/js/src/views/Application/Status/status.css +++ b/js/src/views/Application/Status/status.css @@ -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 { diff --git a/js/src/views/Application/Status/status.js b/js/src/views/Application/Status/status.js index f86d5e4ff..7b3c87b89 100644 --- a/js/src/views/Application/Status/status.js +++ b/js/src/views/Application/Status/status.js @@ -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 (
- { enode } + +
{ abbreviated }
); }