cleanup

Author: jasonford

TODO.txt

@@ -12,15 +12,13 @@ order from below:
 X progress metadata
 X email user auth
 X typing outside of input selects child in current view that starts with that title
-  sensible rendering of progress (child progress takes presidence over own reported progress)
-    different color for own progress and show blocks for combined progress??
   user root nodes
   note metadata
   visual feedback for add right/left, edit and drag into
   move elements between levels of hierarchy
     dropping in middle of child copies element into that element
     dropping on a breadcrumb copies dropped element into that parent (or copies within current)
-
+  types
 
 Metadata for each node:
 X title

src/App.js

@@ -7,4 +7,4 @@ let App = React.createClass({
   }
 })
 
-export default App;
+export default App;

src/TreeChart.css

@@ -8,7 +8,7 @@
   right : 0;
   bottom : 0;
   overflow: hidden;
-  background: rgba(128,128,128,0.05);
+  background: white;
   color : #444444;
   font-family: Helvetica, sans-serif;
 }
@@ -19,8 +19,12 @@
   display : flex;
   flex-flow: row;
   justify-content: space-between;
+  box-shadow: 0px 0px 5px #888888;
+  background: white;
+  z-index: 1;
 }
 
+
 .TreeChartChildren
 {
   width : 100%;
@@ -40,7 +44,6 @@
   min-width : 1px;
   position: relative;
   overflow: hidden;
-  background: rgba(128,128,128,0.01);
 }
 
 .TreeChartRowDivider
@@ -53,6 +56,7 @@
 .TreeChartChild
 {
   transition: flex-grow 0.3s, height 0.3s;
+  background : white;
 }
 
 .TreeChartChildInner,
@@ -67,14 +71,15 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  background : #EEEEEE;
 }
 
-.TreeChartChildTitle.Top { top : 0;}
-.TreeChartChildTitle.Left { left : 0;}
-.TreeChartChildTitle.Right { right : 0; }
-.TreeChartChildTitle.Bottom { bottom : 0; }
+.TreeChartChildInner.Top { top : 0;}
+.TreeChartChildInner.Left { left : 0;}
+.TreeChartChildInner.Right { right : 0; }
+.TreeChartChildInner.Bottom { bottom : 0; }
 
-.TreeChartChildTitle
+.TreeChartChildInner
 {
   left : 1px;
   top : 1px;

src/TreeChart.js

@@ -122,7 +122,7 @@ let TreeChart = React.createClass({
       title : null,
       index : index,
       importance : 1,
-      progress : null,
+      type : 'TreeChart',
       notes : '',
       elements : []
     });
@@ -232,6 +232,7 @@ let TreeChart = React.createClass({
             childIndex={childIndex}
             move={self.moveChild}
             remove={remove}/>);
+
         childIndex += 1;
       });
     });
@@ -241,7 +242,8 @@ let TreeChart = React.createClass({
     }
 
     let header = <div className="TreeChartHeader">
-      <BreadCrumbs focus={this.focus} path={this.state.focus || this.state.path}/>
+      <BreadCrumbs focus={this.focus}
+                   path={this.state.focus || this.state.path}/>
       <div className="TreeChartLogin">
         <LoginTag />
       </div>
@@ -253,46 +255,8 @@ let TreeChart = React.createClass({
         {this.state.editing && !this.props.preview ? <TreeChartChildEditor path={this.state.editing} remove={stopEditing}/> : null}
         {childElements}
       </div>
-      <ProgressBar path={this.props.path} depth={this.depth()}/>
     </div>;
   }
 });
 
-
-
-let ProgressBar = React.createClass({
-  mixins : [ReactFireMixin],
-  componentWillMount() {
-    this.setState({
-      path : this.props.path,
-      focus : this.props.path,
-      element : { // start with empty element designed to show loading
-        elements : {}
-      }
-    });
-    let ref = firebase.database().ref(this.props.path);
-    this.bindAsObject(ref, "element");
-  },
-  render() {
-    let parts = [];
-    if (!isNaN(this.state.element.progress)) {
-      let style = {
-        width : this.state.element.progress + '%'
-      };
-      parts.push(<div className="TreeChartProgressBarPart" style={style} key={this.props.path}></div>)
-    }
-    else {
-
-    }
-    let style = {
-      height : this.props.depth === 0 || this.props.depth === 1 ? '16px' : 0
-    };
-    return <div ref="progressBar" style={style} className="TreeChartProgressBar" key={this.props.path}>
-      {parts}
-    </div>
-  }
-});
-
-
-
 export default TreeChart;

src/TreeChartChild.js

@@ -79,27 +79,15 @@ let TreeChartChild = React.createClass({
       };
     }
 
-    let titleClasses = "TreeChartChildTitle";
-    if (this.props.location.top   ) titleClasses += " Top";
-    if (this.props.location.left  ) titleClasses += " Left";
-    if (this.props.location.right ) titleClasses += " Right";
-    if (this.props.location.bottom) titleClasses += " Bottom";
-
-    let content;
-    if (this.props.focused) {
-      content = <div className={titleClasses}>
-        <TreeChart path={this.props.path} isChild={true} focus={this.props.focus} depth={this.props.depth} />
-      </div>
-    }
-    else {
-      content = <div className={titleClasses}>
-        <TreeChart path={this.props.path} preview={true} isChild={true} focus={this.props.focus} depth={this.props.depth}/>
-      </div>
-    }
+    let innerClasses = "TreeChartChildInner";
+    if (this.props.location.top   ) innerClasses += " Top";
+    if (this.props.location.left  ) innerClasses += " Left";
+    if (this.props.location.right ) innerClasses += " Right";
+    if (this.props.location.bottom) innerClasses += " Bottom";
 
     return <div ref="root" className="TreeChartChild" style={style}>
-      <div className="TreeChartChildInner">
-        {content}
+      <div className={innerClasses}>
+        <TreeChart path={this.props.path} preview={!this.props.focused} isChild={true} focus={this.props.focus} depth={this.props.depth}/>
         {this.props.focused || this.props.preview ? null : <div className="TreeChartChildTitle">{this.state.element.title || this.props.childIndex+1}</div>}
       </div>
     </div>

src/TreeChartChildEditor.js

@@ -2,17 +2,12 @@ import React from 'react';
 import firebase from 'firebase';
 import ReactFireMixin from 'reactfire';
 
-let types = ['none', 'TreeChart', 'Progress', 'Link', 'HTML'];
+let types = ['TreeChart', 'Task', 'Link', 'HTML'];
 
 let TreeChartChildEditor = React.createClass({
   mixins : [ReactFireMixin],
   componentWillMount() {
-    this.setState({
-      path : this.props.path,
-      element : {
-        importance : 0
-      }
-    });
+    this.setState({path : this.props.path});
     let ref = firebase.database().ref(this.props.path).orderByChild("index");
     this.bindAsObject(ref, "element");
   },
@@ -41,10 +36,6 @@ let TreeChartChildEditor = React.createClass({
     }
   },
   render() {
-    let progressEnabled = this.state.element.progress === 0 || this.state.element.progress > 0;
-    let progressBar = <span>
-      <input type="range" onChange={this.update('progress', parseInt)} value={this.state.element.progress}/>{this.state.element.progress}
-    </span>
     return <div ref="root" className="TreeChartChildEditor">
       <input type="text" className="TreeChartChildEditorTitle" value={this.state.element.title} onChange={this.update('title')}/>
       <select className="TreeChartChildEditorImportance" default={this.state.element.importance} value={this.state.element.importance} onChange={this.update('importance', parseInt)}>
@@ -57,13 +48,6 @@ let TreeChartChildEditor = React.createClass({
         onChange={this.update('type')}>
         {types.map((type)=>{return <option key={type} value={type}>{type}</option>})}
       </select>
-      <div>
-       <input
-          type="checkbox"
-          checked={progressEnabled}
-          onChange={this.update('progress', (val)=>{return val ? 0 : null})}/>
-        {progressEnabled ? progressBar : null}
-      </div>
     </div>;
   }
 });