added in editableview stuff and minor css styling

3 files changed, 23 insertions, 14 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 8d9a47eaa..88ef67afa 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -27,12 +27,11 @@ export class EditableView extends React.Component<EditableProps> {
     render() {
         if (this.editing) {
             return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
-                style={{ width: "100%" }}></input>
+                style={{ display: "inline" }}></input>
         } else {
             return (
-                <div className="editableView-container-editing" style={{ display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
-                    onClick={action(() => this.editing = true)}
-                >
+                <div className="editableView-container-editing" style={{ display: "inline", height: "100%", maxHeight: `${this.props.height}` }}
+                    onClick={action(() => this.editing = true)}>
                     {this.props.contents}
                 </div>
             )
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 675fc6c53..054e605a0 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,3 +1,8 @@
+#body {
+    padding: 20px;
+    background: #bbbbbb;
+}
+
 ul {
     list-style: none;
 }
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 52e853bf7..2bcd8e8ef 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -7,6 +7,7 @@ import React = require("react")
 import { TextField } from "../../../fields/TextField";
 import { observable, action } from "mobx";
 import "./CollectionTreeView.scss";
+import { EditableView } from "../EditableView";
 
 export interface TreeViewProps {
     document: Document;
@@ -37,6 +38,7 @@ class TreeView extends React.Component<TreeViewProps> {
         // otherwise, check if it's a collection.
         else if (children && children !== "<Waiting>") {
             // if it's not collapsed, then render the full TreeView.
+            // TODO once clicking the title no longer expands the thing also make collection titles editable 
             if (!this.collapsed) {
                 return (
                     <li className="uncollapsed" key={document.Id} onClick={action(() => this.collapsed = true)} >
@@ -55,7 +57,18 @@ class TreeView extends React.Component<TreeViewProps> {
 
         // finally, if it's a normal document, then render it as such.
         else {
-            return <li key={document.Id}>{title.Data}</li>;
+            return <li key={document.Id}>
+                <EditableView contents={title.Data}
+                    height={36} GetValue={() => {
+                        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+                        if (title && title !== "<Waiting>")
+                            return title.Data;
+                        return "";
+                    }} SetValue={(value: string) => {
+                        document.SetData(KeyStore.Title, value, TextField);
+                        return true;
+                    }}></EditableView>
+            </li>;
         }
     }
 
@@ -66,14 +79,6 @@ class TreeView extends React.Component<TreeViewProps> {
             return (<div>
                 {children.Data.map(value => this.renderChild(value))}
             </div>)
-            // let results: JSX.Element[] = [];
-
-            // // append a list item for each child in the collection
-            // children.Data.forEach((value) => {
-            //     results.push(this.renderChild(value));
-            // })
-
-            // return results;
         } else {
             return <div></div>;
         }
@@ -91,7 +96,7 @@ export class CollectionTreeView extends CollectionViewBase {
             titleStr = title.Data;
         }
         return (
-            <div>
+            <div id="body">
                 <h3>{titleStr}</h3>
                 <ul className="no-indent">
                     <TreeView