From 843418e1955720d6808cf28c4f1e0fd3375ec956 Mon Sep 17 00:00:00 2001
From: Akarshit Wal <akarshitwal@gmail.com>
Date: Mon, 9 Jan 2017 23:17:32 +0530
Subject: [PATCH] toggling menu (#258)

* toggling menu

* Other components should be treated equally
---
 client/modules/IDE/components/Editor.jsx   | 12 ++++++++++--
 client/modules/IDE/components/FileNode.jsx | 12 ++++++++++--
 client/modules/IDE/components/Sidebar.jsx  | 12 ++++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index a468fa4e..1d51ea9f 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -177,6 +177,15 @@ class Editor extends React.Component {
     }
   }
 
+  toggleEditorOptions() {
+    if (this.props.editorOptionsVisible) {
+      this.props.closeEditorOptions();
+    } else {
+      this.refs.optionsButton.focus();
+      this.props.showEditorOptions();
+    }
+  }
+
   _cm: CodeMirror.Editor
 
   render() {
@@ -222,8 +231,7 @@ class Editor extends React.Component {
             tabIndex="0"
             ref="optionsButton"
             onClick={() => {
-              this.refs.optionsButton.focus();
-              this.props.showEditorOptions();
+              this.toggleEditorOptions();
             }}
             onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
           >
diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 79e32e0c..b71d8fe8 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -48,6 +48,15 @@ export class FileNode extends React.Component {
     }
   }
 
+  toggleFileOptions() {
+    if (this.props.isOptionsOpen) {
+      this.props.hideFileOptions(this.props.id);
+    } else {
+      this.refs[`fileOptions-${this.props.id}`].focus();
+      this.props.showFileOptions(this.props.id);
+    }
+  }
+
   renderChild(childId) {
     return (
       <li key={childId}>
@@ -120,8 +129,7 @@ export class FileNode extends React.Component {
                   ref={`fileOptions-${this.props.id}`}
                   tabIndex="0"
                   onClick={() => {
-                    this.refs[`fileOptions-${this.props.id}`].focus();
-                    this.props.showFileOptions(this.props.id);
+                    this.toggleFileOptions();
                   }}
                 >
                   <InlineSVG src={downArrowUrl} />
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 67edc61d..82d5fb72 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -16,6 +16,15 @@ class Sidebar extends React.Component {
     this.props.setSelectedFile(this.props.files[1].id);
   }
 
+  toggleProjectOptions() {
+    if (this.props.projectOptionsVisible) {
+      this.props.closeProjectOptions();
+    } else {
+      this.refs.sidebarOptions.focus();
+      this.props.openProjectOptions();
+    }
+  }
+
   render() {
     const sidebarClass = classNames({
       sidebar: true,
@@ -39,8 +48,7 @@ class Sidebar extends React.Component {
               tabIndex="0"
               ref="sidebarOptions"
               onClick={() => {
-                this.refs.sidebarOptions.focus();
-                this.props.openProjectOptions();
+                this.toggleProjectOptions();
               }}
               onBlur={() => setTimeout(this.props.closeProjectOptions, 200)}
             >