Add subtle edit button to instructions bar

Closes popcodeorg#145

Author: greenberga

src/components/Workspace.jsx

@@ -30,6 +30,7 @@ export default class Workspace extends React.Component {
       this,
       '_handleUnload',
       '_handleClickInstructionsBar',
+      '_handleClickInstructionsEditButton',
     );
     this.columnRefs = [null, null];
   }
@@ -76,6 +77,15 @@ export default class Workspace extends React.Component {
     }
   }
 
+  _handleClickInstructionsEditButton() {
+    const {isEditingInstructions, onClickInstructionsEditButton} = this.props;
+    if (!isEditingInstructions) {
+      onClickInstructionsEditButton(
+        get(this.props, ['currentProject', 'projectKey']),
+      );
+    }
+  }
+
   _renderInstructionsBar() {
     const currentInstructions = get(
       this.props,
@@ -98,6 +108,17 @@ export default class Workspace extends React.Component {
             u__icon_disabled: this.props.isEditingInstructions,
           })}
         >&#xf05a;</span>
+        {!this.props.isEditingInstructions &&
+          <span
+            className="u__icon layout__instructions-bar-edit-button"
+            onClick={(e) => {
+              e.stopPropagation();
+              this._handleClickInstructionsEditButton();
+            }}
+          >
+            &#xf044;
+          </span>
+        }
       </div>
     );
   }
@@ -164,6 +185,7 @@ Workspace.propTypes = {
   resizableFlexGrow: ImmutablePropTypes.list.isRequired,
   resizableFlexRefs: PropTypes.array.isRequired,
   onApplicationLoaded: PropTypes.func.isRequired,
+  onClickInstructionsEditButton: PropTypes.func.isRequired,
   onComponentToggle: PropTypes.func.isRequired,
   onResizableFlexDividerDrag: PropTypes.func.isRequired,
   onStartDragColumnDivider: PropTypes.func.isRequired,

src/containers/Workspace.js

@@ -7,6 +7,7 @@ import {
   applicationLoaded,
   startDragColumnDivider,
   stopDragColumnDivider,
+  startEditingInstructions,
 } from '../actions';
 import resizableFlex from '../higherOrderComponents/resizableFlex';
 
@@ -34,6 +35,10 @@ function mapDispatchToProps(dispatch) {
     onStopDragColumnDivider() {
       dispatch(stopDragColumnDivider());
     },
+
+    onClickInstructionsEditButton(projectKey) {
+      dispatch(startEditingInstructions(projectKey));
+    },
   };
 }
 

src/css/application.css

@@ -122,6 +122,7 @@ body {
   cursor: pointer;
   display: flex;
   flex: none;
+  flex-direction: column;
   font-size: 2em;
   text-align: center;
   padding: 0.25em;
@@ -131,6 +132,15 @@ body {
   cursor: default;
 }
 
+.layout__instructions-bar-edit-button {
+  margin-top: .25em;
+  opacity: 0;
+}
+
+.layout__instructions-bar:hover .layout__instructions-bar-edit-button {
+  opacity: 1;
+}
+
 .layout__main {
   flex: 1 1 100vw;
   position: relative;