settings panel auto resize fix

react/src/components/dashboard/settings/settings.daemonStdoutPanel.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import { translate } from '../../../translate/translate';
+import { connect } from 'react-redux';
+import { coindGetStdout } from '../../../actions/actionCreators';
+import Store from '../../../store';
+
+class DaemonStdoutPanel extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      coindStdOut: 'Loading...',
+      coin: null,
+      textareaHeight: '100px',
+    };
+    this.getCoindGetStdout = this.getCoindGetStdout.bind(this);
+    this.updateInput = this.updateInput.bind(this);
+  }
+
+  componentWillMount() {
+    this.getCoindGetStdout();
+  }
+
+  getCoindGetStdout() {
+    const _coin = this.state.coin || this.props.ActiveCoin.coin;
+
+    coindGetStdout(_coin)
+    .then((res) => {
+      this.setState({
+        coindStdOut: res.msg === 'success' ? res.result : `Error reading ${_coin} stdout`,
+      });
+
+      setTimeout(() => {
+        document.querySelector('#settingsCoindStdoutTextarea').style.height = '1px';
+        document.querySelector('#settingsCoindStdoutTextarea').style.height = `${(15 + document.querySelector('#settingsCoindStdoutTextarea').scrollHeight)}px`;
+      }, 100);
+    });
+  }
+
+  updateInput(e) {
+    this.setState({
+      [e.target.name]: e.target.value,
+    });
+
+    this.getCoindGetStdout();
+  }
+
+  renderCoinListSelectorOptions(coin) {
+    let _items = [];
+    let _nativeCoins = this.props.Main.coins.native;
+
+    for (let i = 0; i < _nativeCoins.length; i++) {
+      _items.push(
+        <option
+          key={ `coind-stdout-coins-${ coin }` }
+          value={ `${_nativeCoins[i]}` }>{ `${_nativeCoins[i]}` }</option>
+      );
+    }
+
+    return _items;
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="row">
+          <div className="col-sm-12 padding-bottom-10">
+            <div>
+              <div className="col-sm-3 no-padding-left">
+                <select
+                  className="form-control form-material"
+                  name="coin"
+                  value={ this.state.coin || this.props.ActiveCoin.coin }
+                  onChange={ (event) => this.updateInput(event) }
+                  autoFocus>
+                  { this.renderCoinListSelectorOptions() }
+                </select>
+              </div>
+              <div className="col-sm-1">
+                <i
+                  className="icon fa-refresh coind-stdout-refresh-icon pointer"
+                  onClick={ this.getCoindGetStdout }></i>
+              </div>
+            </div>
+          </div>
+          <div className="col-sm-12">
+            <div className="form-group form-material floating col-sm-8 no-padding-left">
+              <textarea
+                id="settingsCoindStdoutTextarea"
+                readOnly
+                className="form-control settings-coind-stdout-textarea"
+                value={ this.state.coindStdOut }
+                style={{ height: this.state.textareaHeight }}></textarea>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+}
+
+const mapStateToProps = (state) => {
+  return {
+    ActiveCoin: {
+      coin: state.ActiveCoin.coin,
+      mode: state.ActiveCoin.mode,
+    },
+    Main: state.Main,
+  };
+};
+
+export default connect(mapStateToProps)(DaemonStdoutPanel);

react/src/components/dashboard/settings/settings.panelBody.js

@@ -13,6 +13,7 @@ class PanelSection extends React.Component {
 
   componentDidMount() {
     const { active } = this.props;
+    let _pass = false;
 
     if (active) {
       this.setState({
@@ -22,14 +23,15 @@ class PanelSection extends React.Component {
 
     this.accordionResizeInterval = setInterval(() => {
       if (this.props.active) {
-        this.setState({
+        this.setState({ // auto resize hack
-          sectionHeight: `${this.accordionContent.scrollHeight}px`,
+          sectionHeight: _pass ? 'auto' : `${this.accordionContent.scrollHeight}px`,
         });
+        _pass = !_pass;
       }
     }, 500);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount() { // revise(?)
     clearInterval(this.accordionResizeInterval);
   }
 

react/src/components/dashboard/settings/settings.render.js

@@ -14,6 +14,8 @@ import ExportKeysPanel from './settings.exportKeysPanel';
 // import ImportKeysPanel from './settings.importKeysPanel';
 import SupportPanel from './settings.supportPanel';
 import SPVServersPanel from './settings.spvServersPanel';
+import DaemonStdoutPanel from './settings.daemonStdoutPanel';
+
 // import WalletInfoPanel from './settings.walletInfoPanel';
 // import WalletBackupPanel from './settings.walletBackupPanel';
 
@@ -73,9 +75,18 @@ export const SettingsRender = function() {
                   openByDefault={this.props.disableWalletSpecificUI}>
                   <DebugLogPanel />
                 </PanelSection>
+                { this.props.Main.coins &&
+                  this.props.Main.coins.native &&
+                  Object.keys(this.props.Main.coins.native).length > 0 &&
                   <PanelSection
-                  title={ translate('SETTINGS.APP_CONFIG') + ' (config.json)' }
+                    title={ 'Debug / Komodod stdout' }
                     icon="icon fa-bug">
+                    <DaemonStdoutPanel />
+                  </PanelSection>
+                }
+                <PanelSection
+                  title={ translate('SETTINGS.APP_CONFIG') + ' (config.json)' }
+                  icon="icon fa-wrench">
                   <AppSettingsPanel />
                 </PanelSection>
                 <PanelSection

react/src/components/overrides.scss

@@ -537,3 +537,13 @@ select{
   right: 40px;
   font-size: 20px;
 }
+
+.coind-stdout-refresh-icon {
+  font-size: 20px;
+  margin-top: 7px;
+}
+
+.settings-coind-stdout-textarea {
+  border: none;
+  background-image: none !important;
+}