From 0e0d3975e1e87efcc6e4cca79dd1e009984b2d9c Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Wed, 7 Sep 2016 22:49:29 -0400
Subject: [PATCH] fix #89, fix closed sidebar on Safari

---
 client/modules/IDE/components/Editor.js   | 6 +++++-
 client/modules/IDE/components/FileNode.js | 5 ++++-
 client/modules/IDE/components/Sidebar.js  | 5 ++++-
 client/modules/IDE/pages/IDEView.js       | 4 ++--
 client/styles/components/_sidebar.scss    | 1 +
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index 3ae43ed1..43379a4d 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -144,7 +144,11 @@ class Editor extends React.Component {
       >
         <button
           className="editor__options-button"
-          onClick={this.props.showEditorOptions}
+          tabIndex="0"
+          onClick={(e) => {
+            e.target.focus();
+            this.props.showEditorOptions();
+          }}
           onBlur={() => setTimeout(this.props.closeEditorOptions, 200)}
         >
           <InlineSVG src={downArrowUrl} />
diff --git a/client/modules/IDE/components/FileNode.js b/client/modules/IDE/components/FileNode.js
index 7e83e7d2..48651984 100644
--- a/client/modules/IDE/components/FileNode.js
+++ b/client/modules/IDE/components/FileNode.js
@@ -117,7 +117,10 @@ export class FileNode extends React.Component {
                 <button
                   className="sidebar__file-item-show-options"
                   aria-label="view file options"
-                  onClick={() => this.props.showFileOptions(this.props.id)}
+                  onClick={(e) => {
+                    e.target.focus();
+                    this.props.showFileOptions(this.props.id);
+                  }}
                 >
                   <InlineSVG src={downArrowUrl} />
                 </button>
diff --git a/client/modules/IDE/components/Sidebar.js b/client/modules/IDE/components/Sidebar.js
index 2ee6cdc4..b35f7c0e 100644
--- a/client/modules/IDE/components/Sidebar.js
+++ b/client/modules/IDE/components/Sidebar.js
@@ -38,7 +38,10 @@ class Sidebar extends React.Component {
             <button
               aria-label="add file or folder"
               className="sidebar__add"
-              onClick={this.props.openProjectOptions}
+              onClick={(e) => {
+                e.target.focus();
+                this.props.openProjectOptions();
+              }}
               onBlur={() => setTimeout(this.props.closeProjectOptions, 200)}
             >
               <InlineSVG src={downArrowUrl} />
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 9cc2dcfb..f7b77a54 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/client/modules/IDE/pages/IDEView.js
@@ -50,7 +50,7 @@ class IDEView extends React.Component {
     }
 
     this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
-    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 20;
+    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 200 : 25;
     this.forceUpdate();
 
     this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
@@ -63,7 +63,7 @@ class IDEView extends React.Component {
     }
 
     if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
-      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 200 : 20;
+      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 200 : 25;
     }
 
     if (nextProps.params.project_id && !this.props.params.project_id) {
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 0efd4f25..2081f4a0 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -191,6 +191,7 @@
     display: block;
   }
   top: 100%;
+  right: #{-70 / $base-font-size}rem;
   padding: #{8 / $base-font-size}rem;
   width: #{110 / $base-font-size}rem;
 }