AGT-115, tab resize interval

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

@@ -60,7 +60,8 @@ class AppSettingsPanel extends React.Component {
       if (key.indexOf('__') === -1) {
         _appSettingsPristine[key] = this.state.appConfigSchema[key] && this.state.appConfigSchema[key].type === 'number' ? Number(_appSettings[key]) : _appSettings[key];
 
-        if (this.state.appConfigSchema[key] && this.state.appConfigSchema[key].type === 'folder' &&
+        if (this.state.appConfigSchema[key] &&
+            this.state.appConfigSchema[key].type === 'folder' &&
             _appSettings[key] &&
             _appSettings[key].length) {
           const _testLocation = window.require('electron').remote.getCurrentWindow().testLocation;
@@ -72,18 +73,20 @@ class AppSettingsPanel extends React.Component {
               isError = true;
               Store.dispatch(
                 triggerToaster(
-                  translate('TOASTR.KOMODO_DATADIR_INVALID'),
+                  this.renderLB('TOASTR.KOMODO_DATADIR_INVALID'),
                   translate('INDEX.SETTINGS'),
-                  'error'
+                  'error',
+                  false
                 )
               );
             } else if (res === false) {
               isError = true;
               Store.dispatch(
                 triggerToaster(
-                  translate('TOASTR.KOMODO_DATADIR_NOT_DIR'),
+                  this.renderLB('TOASTR.KOMODO_DATADIR_NOT_DIR'),
                   translate('INDEX.SETTINGS'),
-                  'error'
+                  'error',
+                  false
                 )
               );
             } else {
@@ -102,6 +105,17 @@ class AppSettingsPanel extends React.Component {
     }
   }
 
+  renderLB(_translationID) {
+    const _translationComponents = translate(_translationID).split('<br>');
+
+    return _translationComponents.map((_translation) =>
+      <span key={ `translate-${Math.random(0, 9) * 10}` }>
+        {_translation}
+        <br />
+      </span>
+    );
+  }
+
   renderConfigEditForm() {
     let items = [];
     const _appConfig = this.state.appSettings;
@@ -257,7 +271,8 @@ class AppSettingsPanel extends React.Component {
     let _appSettings = this.state.appSettings;
     let _appSettingsPrev = Object.assign({}, _appSettings);
 
-    if (!childKey && this.state.appConfigSchema[parentKey].type === 'boolean') {
+    if (!childKey &&
+        this.state.appConfigSchema[parentKey].type === 'boolean') {
       _appSettings[parentKey] = typeof _appSettings[parentKey] !== undefined ? !_appSettings[parentKey] : !this.state.appSettings[parentKey];
     } else if (childKey && this.state.appConfigSchema[parentKey][childKey].type === 'boolean') {
       _appSettings[parentKey][childKey] = typeof _appSettings[parentKey][childKey] !== undefined ? !_appSettings[parentKey][childKey] : !this.state.appSettings[parentKey][childKey];

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

@@ -17,6 +17,7 @@ class DebugLogPanel extends React.Component {
       debugTarget: 'iguana',
       nativeOnly: Config.iguanaLessMode,
       toggleAppRuntimeLog: false,
+      pristine: true,
     };
     this.readDebugLog = this.readDebugLog.bind(this);
     this.updateInput = this.updateInput.bind(this);
@@ -26,17 +27,21 @@ class DebugLogPanel extends React.Component {
   }
 
   readDebugLog() {
+    this.setState(Object.assign({}, this.state, {
+      pristine: false,
+    }));
+
     Store.dispatch(
       getDebugLog(
-        this.state.debugTarget,
+        'komodo',
         this.state.debugLinesCount
       )
     );
   }
 
   renderAppRuntimeLog() {
-    let _items = [];
     const _appRuntimeLog = this.state.appRuntimeLog;
+    let _items = [];
 
     for (let i = 0; i < _appRuntimeLog.length; i++) {
       _items.push(
@@ -74,7 +79,8 @@ class DebugLogPanel extends React.Component {
   }
 
   renderDebugLogData() {
-    if (this.props.Settings.debugLog) {
+    if (this.props.Settings.debugLog &&
+        !this.state.pristine) {
       const _debugLogDataRows = this.props.Settings.debugLog.split('\n');
 
       if (_debugLogDataRows &&
@@ -106,7 +112,9 @@ class DebugLogPanel extends React.Component {
     return (
       <div className="row">
         <div className="col-sm-12">
-          { this.props.Main.coins && this.props.Main.coins.native && Object.keys(this.props.Main.coins.native).length > 0 &&
+          { this.props.Main.coins &&
+            this.props.Main.coins.native &&
+            Object.keys(this.props.Main.coins.native).length > 0 &&
             <p>{ translate('INDEX.DEBUG_LOG_DESC') }</p>
           }
           <div className="margin-top-30">
@@ -123,10 +131,13 @@ class DebugLogPanel extends React.Component {
               </label>
               <span
                 className="title"
-                onClick={ this.toggleAppRuntimeLog }>Show app runtime log</span>
+                onClick={ this.toggleAppRuntimeLog }>{ translate('SETTINGS.SHOW_APP_RUNTIME_LOG') }</span>
             </span>
           </div>
-          { !this.state.toggleAppRuntimeLog && this.props.Main.coins && this.props.Main.coins.native && Object.keys(this.props.Main.coins.native).length > 0 &&
+          { !this.state.toggleAppRuntimeLog &&
+            this.props.Main.coins &&
+            this.props.Main.coins.native &&
+            Object.keys(this.props.Main.coins.native).length > 0 &&
             <form
               className="read-debug-log-import-form"
               method="post"

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

@@ -31,7 +31,7 @@ class Settings extends React.Component {
     if (this.props.Main &&
         this.props.Main.coins &&
         this.props.Main.coins.spv) {
-      for (let i = 0; this.props.Main.coins.spv.length; i++) {
+      for (let i = 0; i < this.props.Main.coins.spv.length; i++) {
         if (this.props.Dashboard.electrumCoins[this.props.Main.coins.spv[i]].serverList) {
           return true;
         }

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

@@ -3,7 +3,6 @@ import className from 'classnames';
 import * as Utils from './settings.panelUtils';
 
 class Panel extends React.Component {
-
   constructor(props) {
     super(props);
     this.toggleSection = this.toggleSection.bind(this);

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

@@ -6,7 +6,8 @@ class PanelSection extends React.Component {
     super(props);
     this.state = {
       sectionHeight: 0,
-    }
+    };
+    this.accordionResizeInterval = null;
     this.toggleSection = this.toggleSection.bind(this);
   }
 
@@ -18,6 +19,18 @@ class PanelSection extends React.Component {
         sectionHeight: this.accordionContent.scrollHeight,
       });
     }
+
+    this.accordionResizeInterval = setInterval(() => {
+      if (this.props.active) {
+        this.setState({
+          sectionHeight: `${this.accordionContent.scrollHeight}px`,
+        });
+      }
+    }, 500);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.accordionResizeInterval);
   }
 
   componentWillReceiveProps(props) {
@@ -78,10 +91,10 @@ class PanelSection extends React.Component {
     });
 
     return(
-      <div
+      <div className={triggerClasses}>
-        className={triggerClasses}
+        <div
-        onClick={() => this.toggleSection()}>
+          onClick={() => this.toggleSection()}
-        <div className="panel-heading">
+          className="panel-heading">
           <a className="panel-title">
             <i className={icon}></i> {title}
           </a>