Sidebar editing toggle and only scroll atlas content

frontend/components/Layout/Layout.js

@@ -22,7 +22,6 @@ class Layout extends React.Component {
     actions: React.PropTypes.node,
     title: React.PropTypes.node,
     titleText: React.PropTypes.node,
-    fixed: React.PropTypes.bool,
     loading: React.PropTypes.bool,
     user: React.PropTypes.object.isRequired,
     search: React.PropTypes.bool,
@@ -59,7 +58,7 @@ class Layout extends React.Component {
           <LoadingIndicator />
         ) : null }
 
-        <div className={ cx(styles.header, { fixed: this.props.fixed }) }>
+        <div className={ cx(styles.header) }>
           <div className={ styles.headerLeft }>
             <Link to="/" className={ styles.team }>{ user.team.name }</Link>
             <span className={ styles.title }>
@@ -93,7 +92,9 @@ class Layout extends React.Component {
           </Flex>
         </div>
 
-        <div className={ cx(styles.content, { fixed: this.props.fixed }) }>
+        <div
+          className={ cx(styles.content) }
+        >
           { this.props.children }
         </div>
       </div>

frontend/components/Layout/Layout.scss

@@ -6,6 +6,7 @@
   flex-direction: column;
 
   width: 100%;
+  height: 100%;
 }
 
 .header {
@@ -20,15 +21,6 @@
 
   font-size: 14px;
   line-height: 1;
-
-  &.fixed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 900;
-    background: #fff;
-  }
 }
 
 .headerLeft {
@@ -73,8 +65,6 @@
   display: flex;
   flex: 1;
   justify-content: center;
-
-  &.fixed {
-    padding-top: $headerHeight;
-  }
+  height: 100%;
+  overflow: scroll;
 }

frontend/components/Tree/Node.js

@@ -1,14 +1,14 @@
-var React = require('react');
+import React from 'react';
 import history from 'utils/History';
 
 import styles from './Tree.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);
 
-var Node = React.createClass({
-  displayName: 'UITreeNode',
+class Node extends React.Component {
+  displayName: 'UITreeNode'
 
-  renderCollapse() {
+  renderCollapse = () => {
     var index = this.props.index;
 
     if(index.children && index.children.length) {
@@ -26,9 +26,9 @@ var Node = React.createClass({
     }
 
     return null;
-  },
+  }
 
-  renderChildren() {
+  renderChildren = () => {
     var index = this.props.index;
     var tree = this.props.tree;
     var dragging = this.props.dragging;
@@ -51,6 +51,7 @@ var Node = React.createClass({
                 index={childIndex}
                 key={childIndex.id}
                 dragging={dragging}
+                allowUpdates={ this.props.allowUpdates }
                 paddingLeft={this.props.paddingLeft}
                 onCollapse={this.props.onCollapse}
                 onDragStart={this.props.onDragStart}
@@ -62,14 +63,25 @@ var Node = React.createClass({
     }
 
     return null;
-  },
+  }
+
+  isModifying = () => {
+    return this.props.allowUpdates && !this.props.rootNode;
+  }
+
+  onClick = () => {
+    const index = this.props.index;
+    const node = index.node;
+
+    if (!this.isModifying()) history.push(node.url);
+  }
 
   render() {
-    var tree = this.props.tree;
-    var index = this.props.index;
-    var dragging = this.props.dragging;
-    var node = index.node;
-    var style = {};
+    const tree = this.props.tree;
+    const index = this.props.index;
+    const dragging = this.props.dragging;
+    const node = index.node;
+    const style = {};
 
     return (
       <div className={cx(styles.node, {
@@ -79,12 +91,15 @@ var Node = React.createClass({
         <div
           className={ styles.inner }
           ref="inner"
-          onMouseDown={this.props.rootNode ? (e) => e.stopPropagation() : this.handleMouseDown}
+          onMouseDown={this.props.rootNode || !this.props.allowUpdates ? (e) => e.stopPropagation() : this.handleMouseDown}
         >
-          {!this.props.rootNode && this.renderCollapse()}
+          { !this.props.rootNode && this.renderCollapse() }
           <span
-            className={ cx(styles.nodeLabel, { rootLabel: this.props.rootNode }) }
-            onClick={() => { history.push(node.url) }}
+            className={ cx(styles.nodeLabel, {
+              rootLabel: this.props.rootNode,
+              isModifying: this.isModifying(),
+            }) }
+            onClick={ this.onClick }
           >
             { node.title }
           </span>
@@ -92,15 +107,15 @@ var Node = React.createClass({
         {this.renderChildren()}
       </div>
     );
-  },
+  }
 
-  handleCollapse(e) {
+  handleCollapse = (e) => {
     e.stopPropagation();
     var nodeId = this.props.index.id;
     if(this.props.onCollapse) this.props.onCollapse(nodeId);
-  },
+  }
 
-  handleMouseDown(e) {
+  handleMouseDown = (e) => {
     var nodeId = this.props.index.id;
     var dom = this.refs.inner;
 
@@ -108,6 +123,6 @@ var Node = React.createClass({
       this.props.onDragStart(nodeId, dom, e);
     }
   }
-});
+};
 
-module.exports = Node;
+module.exports = Node;

frontend/components/Tree/Tree.scss

@@ -7,9 +7,14 @@
 }
 
 .tree {
-  position: relative;
-  overflow: hidden;
   @include no-select;
+  padding: 20px 20px 20px 5px;
+  overflow: scroll;
+  position: absolute;
+  top: 0;
+  bottom: 40px;
+  right: 0;
+  left: 0;
 }
 
 .draggable {
@@ -71,6 +76,10 @@
     white-space: nowrap;
     overflow: hidden;
 
+    &.isModifying {
+      cursor: move;
+    }
+
     &.isActive {
       background-color: #31363F;
     }

frontend/components/Tree/UiTree.js

@@ -10,8 +10,8 @@ module.exports = React.createClass({
   propTypes: {
     tree: React.PropTypes.object.isRequired,
     paddingLeft: React.PropTypes.number,
-    renderNode: React.PropTypes.func.isRequired,
     onCollapse: React.PropTypes.func,
+    allowUpdates: React.PropTypes.bool,
   },
 
   getDefaultProps() {
@@ -32,7 +32,6 @@ module.exports = React.createClass({
   init(props) {
     var tree = new Tree(props.tree);
     tree.isNodeCollapsed = props.isNodeCollapsed;
-    tree.renderNode = props.renderNode;
     tree.changeNodeCollapsed = props.changeNodeCollapsed;
     tree.updateNodesPosition();
 
@@ -61,11 +60,12 @@ module.exports = React.createClass({
       };
 
       return (
-        <div className={ styles.draggable } style={draggingStyles}>
+        <div className={ styles.draggable } style={ draggingStyles }>
           <Node
-            tree={tree}
-            index={draggingIndex}
-            paddingLeft={this.props.paddingLeft}
+            tree={ tree }
+            index={ draggingIndex }
+            paddingLeft={ this.props.paddingLeft }
+            allowUpdates={ this.props.allowUpdates }
           />
         </div>
       );
@@ -81,16 +81,17 @@ module.exports = React.createClass({
 
     return (
       <div className={ styles.tree }>
-        {draggingDom}
+        { draggingDom }
         <Node
-          rootNode={ true }
-          tree={tree}
-          index={tree.getIndex(1)}
-          key={1}
-          paddingLeft={this.props.paddingLeft}
-          onDragStart={this.dragStart}
-          onCollapse={this.toggleCollapse}
-          dragging={dragging && dragging.id}
+          rootNode
+          tree={ tree }
+          index={ tree.getIndex(1) }
+          key={ 1 }
+          paddingLeft={ this.props.paddingLeft }
+          allowUpdates={ this.props.allowUpdates }
+          onDragStart={ this.dragStart }
+          onCollapse={ this.toggleCollapse }
+          dragging={ dragging && dragging.id }
         />
       </div>
     );