From 7039acf37f4748d47a3b9cf50339a7e83ca47e57 Mon Sep 17 00:00:00 2001
From: Miika Turunen <miika.turunen@gmail.com>
Date: Fri, 15 Sep 2017 00:53:51 +0300
Subject: [PATCH] Control panel visibility & animation with css

---
 react/package.json                            |  1 +
 .../components/dashboard/settings/settings.js |  2 +-
 .../dashboard/settings/settings.render.js     | 36 +++++++------------
 .../dashboard/settings/settings.scss          | 25 +++++++++++--
 4 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/react/package.json b/react/package.json
index f50b05e..b4a7c4a 100644
--- a/react/package.json
+++ b/react/package.json
@@ -41,6 +41,7 @@
     "qrcode.react": "^0.7.1",
     "rc-tree": "^1.4.6",
     "react": "^15.3.1",
+    "react-bootstrap": "^0.31.3",
     "react-dom": "^15.3.1",
     "react-hot-loader": "^1.3.0",
     "react-qr-reader": "^1.1.3",
diff --git a/react/src/components/dashboard/settings/settings.js b/react/src/components/dashboard/settings/settings.js
index 32c276d..f7d0979 100644
--- a/react/src/components/dashboard/settings/settings.js
+++ b/react/src/components/dashboard/settings/settings.js
@@ -72,7 +72,7 @@ class Settings extends React.Component {
   }
 
   openTab(elemId, tab) {
-     this.setState(Object.assign({}, this.state, {
+    this.setState(Object.assign({}, this.state, {
       activeTab: tab,
       tabElId: elemId,
     }));
diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js
index 5a999d1..4e8d798 100644
--- a/react/src/components/dashboard/settings/settings.render.js
+++ b/react/src/components/dashboard/settings/settings.render.js
@@ -27,8 +27,7 @@ export const SettingsRender = function() {
                         </a>
                       </div>
                       <div
-                        className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }
-                        style={{ height: this.state.activeTab === 0 ? `auto` : '0' }}>
+                        className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }>
                         { this.renderWalletInfo() }
                       </div>
                     </div>
@@ -44,8 +43,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 1 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') }>
                       { this.renderAddNode() }
                     </div>
                   </div>
@@ -61,8 +59,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 2 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') }>
                       { this.renderWalletBackup() }
                     </div>
                   </div>
@@ -78,8 +75,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 3 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') }>
                       { this.renderFiatCurrency() }
                     </div>
                   </div>
@@ -95,8 +91,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 4 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') }>
                       { this.renderExportKeys() }
                     </div>
                   </div>
@@ -112,8 +107,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 5 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') }>
                       { this.renderImportKeys() }
                     </div>
                   </div>
@@ -129,8 +123,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 6 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') }>
                       { this.renderDebugLog() }
                     </div>
                   </div>
@@ -145,8 +138,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 7 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') }>
                       { this.renderAppSettings() }
                     </div>
                   </div>
@@ -161,8 +153,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 8 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') }>
                       { this.renderAppInfoTab() }
                     </div>
                   </div>
@@ -178,8 +169,7 @@ export const SettingsRender = function() {
                         </a>
                       </div>
                       <div
-                        className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }
-                        style={{ height: this.state.activeTab === 9 ? `auto` : '0' }}>
+                        className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }>
                         { this.renderCliPanel() }
                       </div>
                     </div>
@@ -195,8 +185,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 10 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') }>
                       { this.renderAppUpdateTab() }
                     </div>
                   </div>
@@ -211,8 +200,7 @@ export const SettingsRender = function() {
                       </a>
                     </div>
                     <div
-                      className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }
-                      style={{ height: this.state.activeTab === 11 ? `auto` : '0' }}>
+                      className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }>
                       { this.renderSupportPanel() }
                     </div>
                   </div>
diff --git a/react/src/components/dashboard/settings/settings.scss b/react/src/components/dashboard/settings/settings.scss
index bc1a47c..e27331f 100644
--- a/react/src/components/dashboard/settings/settings.scss
+++ b/react/src/components/dashboard/settings/settings.scss
@@ -93,10 +93,17 @@
 #SettingsAccordion {
   .panel {
     .panel-collapse {
-      transition: all .3s;
-
+  
       &.collapse {
-        height: 0;
+        max-height: 0;
+        overflow: hidden;
+
+      }
+      &.in {
+        animation-name: max-height;
+        animation-duration: 1s;
+        animation-iteration-count: 1;
+        max-height: none;
       }
     }
   }
@@ -118,4 +125,16 @@
       }
     }
   }
+}
+
+@keyframes max-height {
+  from {
+    max-height: 0;
+  }
+  99% {
+    max-height: 2000px;
+  }
+  100% {
+    max-height: none;
+  }
 }
\ No newline at end of file