Fix vertical accordion activation

decred · Nov 30, 2018 · f5cd803 · f5cd803
1 parent 6b1413e
commit f5cd803
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 18 deletions.
diff --git a/app/components/SideBar/MenuLinks/index.js b/app/components/SideBar/MenuLinks/index.js
@@ -92,7 +92,7 @@ class MenuLinks extends React.Component {
 
     return (
       <Aux>
-        {linkList.map(link => this.getMenuLink(link))}
+        {this.links.map(link => this.getMenuLink(link))}
         {caret}
       </Aux>
     );

diff --git a/app/components/views/TrezorPage/ChangeLabel.js b/app/components/views/TrezorPage/ChangeLabel.js
@@ -7,7 +7,7 @@ import { KeyBlueButton } from "buttons";
 class ChangeLabel extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { newLabel: "" };
+    this.state = { newLabel: "", show: false };
   }
 
   onChangeLabelClicked() {
@@ -18,6 +18,10 @@ class ChangeLabel extends React.Component {
     this.setState({ newLabel: e.target.value });
   }
 
+  onToggleAccordion() {
+    this.setState({ show: !this.state.show });
+  }
+
   render() {
 
     const changeLabelHeader = (
@@ -32,22 +36,22 @@ class ChangeLabel extends React.Component {
       <VerticalAccordion
         height={100}
         header={changeLabelHeader}
+        show={this.state.show}
+        onToggleAccordion={this.onToggleAccordion}
         className="trezor-config-accordion"
       >
-        <Aux>
-          <div><T id="trezor.changeLabel.description" m="New Label" /></div>
-          <div>
-            <TextInput
-              value={this.state.newLabel}
-              onChange={this.onNewLabelChanged}
-            />
-          </div>
-          <div>
-            <KeyBlueButton onClick={this.onChangeLabelClicked} disabled={loading} loading={loading} >
-              <T id="trezor.changeLabel.changeButton" m="Change" />
-            </KeyBlueButton>
-          </div>
-        </Aux>
+        <div><T id="trezor.changeLabel.description" m="New Label" /></div>
+        <div>
+          <TextInput
+            value={this.state.newLabel}
+            onChange={this.onNewLabelChanged}
+          />
+        </div>
+        <div>
+          <KeyBlueButton onClick={this.onChangeLabelClicked} disabled={loading} loading={loading} >
+            <T id="trezor.changeLabel.changeButton" m="Change" />
+          </KeyBlueButton>
+        </div>
       </VerticalAccordion>
 
     );

diff --git a/app/components/views/TrezorPage/ConfigButtons.js b/app/components/views/TrezorPage/ConfigButtons.js
@@ -6,6 +6,11 @@ import { KeyBlueButton } from "buttons";
 class ConfigButtons extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { show: false };
+  }
+
+  onToggleAccordion() {
+    this.setState({ show: !this.state.show });
   }
 
   render() {
@@ -21,8 +26,10 @@ class ConfigButtons extends React.Component {
 
     return (
       <VerticalAccordion
-        height={75}
+        height={105}
         header={ConfigButtonsHeader}
+        show={this.state.show}
+        onToggleAccordion={this.onToggleAccordion}
         className="trezor-config-accordion trezor-config-regular-buttons"
       >
         <KeyBlueButton onClick={onTogglePinProtection} loading={loading} disabled={loading}>

diff --git a/app/components/views/TrezorPage/FirmwareUpdate.js b/app/components/views/TrezorPage/FirmwareUpdate.js
@@ -8,7 +8,7 @@ import { PathBrowseInput } from "inputs";
 class FirmwareUpdate extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { path: "" };
+    this.state = { path: "", show: false };
   }
 
   onChangePath(path) {
@@ -19,6 +19,10 @@ class FirmwareUpdate extends React.Component {
     this.props.onUpdateFirmware(this.state.path);
   }
 
+  onToggleAccordion() {
+    this.setState({ show: !this.state.show });
+  }
+
   render() {
 
     const header = (
@@ -33,6 +37,8 @@ class FirmwareUpdate extends React.Component {
       <VerticalAccordion
         height={250}
         header={header}
+        show={this.state.show}
+        onToggleAccordion={this.onToggleAccordion}
         className="trezor-config-accordion trezor-config-regular-buttons"
       >
         <div className="trezor-wipe-warning">

diff --git a/app/components/views/TrezorPage/RecoveryButtons.js b/app/components/views/TrezorPage/RecoveryButtons.js
@@ -7,6 +7,11 @@ import { Documentation } from "shared";
 class RecoveryButtons extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { show: false };
+  }
+
+  onToggleAccordion() {
+    this.setState({ show: !this.state.show });
   }
 
   render() {
@@ -23,6 +28,8 @@ class RecoveryButtons extends React.Component {
       <VerticalAccordion
         height={250}
         header={header}
+        show={this.state.show}
+        onToggleAccordion={this.onToggleAccordion}
         className="trezor-config-accordion trezor-config-regular-buttons"
       >
         <div className="trezor-wipe-warning">
-Original file line number
+Diff line change
@@ Expand Up / @@ -92,7 +92,7 @@ class MenuLinks extends React.Component { @@
         return (
           <Aux>
-            {linkList.map(link => this.getMenuLink(link))}
+            {this.links.map(link => this.getMenuLink(link))}
             {caret}
           </Aux>
         );
@@ Expand Down @@