Cleanup the Status View (#5317)

* Better view of Settings and Mining Settings

* Cleanup Status view

* Node Logs refactoring

* Cleanup Status

* Move RPC Calls files

* Basic Peers view

* Add Peers table

* style table header

js/src/ui/Form/AddressSelect/addressSelect.css

@@ -56,10 +56,25 @@
   }
 }
 
-.inputAddress {
-  position: relative;
+.copy {
+  margin-right: 0.5em;
+}
 
-  &:hover, *:hover {
+.inputAddressContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  position: relative;
+}
+
+.inputAddress {
+  flex: 1;
+
+  &:focus {
+    outline: none;
+  }
+
+  > *:hover {
     cursor: text !important;
   }
 }
@@ -67,10 +82,6 @@
 .main {
   position: relative;
   left: 0;
-
-  &:focus {
-    outline: none;
-  }
 }
 
 .title {

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -25,6 +25,7 @@ import TextFieldUnderline from 'material-ui/TextField/TextFieldUnderline';
 
 import apiutil from '~/api/util';
 import AccountCard from '~/ui/AccountCard';
+import CopyToClipboard from '~/ui/CopyToClipboard';
 import InputAddress from '~/ui/Form/InputAddress';
 import Loading from '~/ui/Loading';
 import Portal from '~/ui/Portal';
@@ -107,18 +108,8 @@ class AddressSelect extends Component {
     const input = this.renderInput();
     const content = this.renderContent();
 
-    const classes = [ styles.main ];
-
     return (
-      <div
-        className={ classes.join(' ') }
-        onBlur={ this.handleMainBlur }
-        onClick={ this.handleFocus }
-        onFocus={ this.handleMainFocus }
-        onKeyDown={ this.handleInputAddresKeydown }
-        ref='inputAddress'
-        tabIndex={ 0 }
-      >
+      <div className={ styles.main }>
         { input }
         { content }
       </div>
@@ -151,8 +142,37 @@ class AddressSelect extends Component {
     }
 
     return (
-      <div className={ styles.inputAddress }>
-        { input }
+      <div className={ styles.inputAddressContainer }>
+        { this.renderCopyButton() }
+        <div
+          className={ styles.inputAddress }
+          onBlur={ this.handleMainBlur }
+          onClick={ this.handleFocus }
+          onFocus={ this.handleMainFocus }
+          onKeyDown={ this.handleInputAddresKeydown }
+          ref='inputAddress'
+          tabIndex={ 0 }
+        >
+          { input }
+        </div>
+      </div>
+    );
+  }
+
+  renderCopyButton () {
+    const { allowCopy, value } = this.props;
+
+    if (!allowCopy) {
+      return null;
+    }
+
+    const text = typeof allowCopy === 'string'
+      ? allowCopy
+      : value.toString();
+
+    return (
+      <div className={ styles.copy }>
+        <CopyToClipboard data={ text } />
       </div>
     );
   }

js/src/ui/Form/Input/input.js

@@ -59,11 +59,15 @@ export default class Input extends Component {
     autoFocus: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
+    defaultValue: PropTypes.string,
     disabled: PropTypes.bool,
     error: nodeOrStringProptype(),
+    escape: PropTypes.oneOf([
+      'default',
+      'initial'
+    ]),
     focused: PropTypes.bool,
     readOnly: PropTypes.bool,
-    floatCopy: PropTypes.bool,
     hint: nodeOrStringProptype(),
     hideUnderline: PropTypes.bool,
     label: nodeOrStringProptype(),
@@ -92,8 +96,8 @@ export default class Input extends Component {
 
   static defaultProps = {
     allowCopy: false,
+    escape: 'initial',
     hideUnderline: false,
-    floatCopy: false,
     onBlur: noop,
     onFocus: noop,
     onChange: noop,
@@ -124,8 +128,8 @@ export default class Input extends Component {
 
   render () {
     const { value } = this.state;
-    const { autoFocus, children, className, hideUnderline, disabled, error, focused, label } = this.props;
-    const { hint, onClick, multiLine, rows, type, min, max, step, style, tabIndex } = this.props;
+    const { autoFocus, children, className, defaultValue, hideUnderline, disabled, error } = this.props;
+    const { focused, label, hint, onClick, multiLine, rows, type, min, max, step, style, tabIndex } = this.props;
 
     const readOnly = this.props.readOnly || disabled;
 
@@ -159,6 +163,7 @@ export default class Input extends Component {
           autoComplete='off'
           autoFocus={ autoFocus }
           className={ className }
+          defaultValue={ defaultValue }
           errorText={ error }
           floatingLabelFixed
           floatingLabelText={ label }
@@ -275,14 +280,22 @@ export default class Input extends Component {
    * if we only want to revert to initial value
    */
   onKeyUp = (event) => {
+    const { escape } = this.props;
     const codeName = keycode(event);
 
-    if (codeName === 'esc' && !this.pressedEsc && this.intialValue !== undefined) {
+    if (codeName === 'esc' && !this.pressedEsc) {
       event.stopPropagation();
       event.preventDefault();
 
       this.pressedEsc = true;
-      this.onChange(event, this.intialValue);
+
+      if (escape === 'initial' && this.intialValue !== undefined) {
+        return this.onChange(event, this.intialValue);
+      }
+
+      if (escape === 'default' && this.props.defaultValue !== undefined) {
+        return this.onSubmit(this.props.defaultValue);
+      }
     } else if (this.pressedEsc) {
       this.pressedEsc = false;
     }