From 646f5db87cf116533915814a790cb77565ceb515 Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Mon, 25 Feb 2019 19:17:23 -0500
Subject: added in editableview stuff and minor css styling

---
 src/client/views/EditableView.tsx                  |  7 +++---
 .../views/collections/CollectionTreeView.scss      |  5 +++++
 .../views/collections/CollectionTreeView.tsx       | 25 +++++++++++++---------
 3 files changed, 23 insertions(+), 14 deletions(-)

(limited to 'src')

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
-- 
cgit v1.2.3-70-g09d2


From 96895c70498957466db704dae01acc07d5ae677c Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Mon, 25 Feb 2019 19:57:17 -0500
Subject: refactored out bullets and can retitle main collection, but still
 need to retitle nested collections

---
 .../views/collections/CollectionTreeView.scss      | 18 ++--------
 .../views/collections/CollectionTreeView.tsx       | 38 +++++++++++++++++++---
 2 files changed, 37 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 054e605a0..452c56f54 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -15,19 +15,7 @@ li {
     padding-left: 0;
 }
 
-/* ALL THESE SPACINGS ARE SUPER HACKY RIGHT NOW HANNAH PLS HELP */
-
-li:before {
-    content: '\2014';
-    margin-right: 0.7em;
-}
-
-.collapsed:before {
-    content: '\25b6';
-    margin-right: 0.65em;
-}
-
-.uncollapsed:before {
-    content: '\25bc';
-    margin-right: 0.5em;
+.bullet {
+    width: 1.5em;
+    display: inline-block;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 2bcd8e8ef..3dbbb045a 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -13,6 +13,12 @@ export interface TreeViewProps {
     document: Document;
 }
 
+export enum BulletType {
+    Collapsed,
+    Collapsible,
+    List
+}
+
 @observer
 /**
  * Component that takes in a document prop and a boolean whether it's collapsed or not.
@@ -22,6 +28,17 @@ class TreeView extends React.Component<TreeViewProps> {
     @observable
     collapsed: boolean = false;
 
+    renderBullet(type: BulletType) {
+        switch (type) {
+            case BulletType.Collapsed:
+                return <div className="bullet">&#9654;</div>
+            case BulletType.Collapsible:
+                return <div className="bullet">&#9660;</div>
+            case BulletType.List:
+                return <div className="bullet">&mdash;</div>
+        }
+    }
+
     /**
      * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element.
      * @param document The document to render.
@@ -38,10 +55,10 @@ 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)} >
+                    <li key={document.Id} onClick={action(() => this.collapsed = true)} >
+                        {this.renderBullet(BulletType.Collapsible)}
                         {title.Data}
                         <ul key={document.Id}>
                             <TreeView
@@ -51,13 +68,17 @@ class TreeView extends React.Component<TreeViewProps> {
                     </li>
                 );
             } else {
-                return <li className="collapsed" key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
+                return <li key={document.Id} onClick={action(() => this.collapsed = false)}>
+                    {this.renderBullet(BulletType.Collapsed)}
+                    {title.Data}
+                </li>
             }
         }
 
         // finally, if it's a normal document, then render it as such.
         else {
             return <li key={document.Id}>
+                {this.renderBullet(BulletType.List)}
                 <EditableView contents={title.Data}
                     height={36} GetValue={() => {
                         let title = document.GetT<TextField>(KeyStore.Title, TextField);
@@ -97,7 +118,16 @@ export class CollectionTreeView extends CollectionViewBase {
         }
         return (
             <div id="body">
-                <h3>{titleStr}</h3>
+                <h3><EditableView contents={titleStr}
+                    height={72} GetValue={() => {
+                        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+                        if (title && title !== "<Waiting>")
+                            return title.Data;
+                        return "";
+                    }} SetValue={(value: string) => {
+                        this.props.Document.SetData(KeyStore.Title, value, TextField);
+                        return true;
+                    }}></EditableView></h3>
                 <ul className="no-indent">
                     <TreeView
                         document={this.props.Document}
-- 
cgit v1.2.3-70-g09d2


From 6b61bc19641b3c10658aba00b9cc2cddb6254049 Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Tue, 26 Feb 2019 16:04:30 -0500
Subject: merge

---
 src/client/views/collections/CollectionTreeView.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 3dbbb045a..273f312dd 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -28,6 +28,7 @@ class TreeView extends React.Component<TreeViewProps> {
     @observable
     collapsed: boolean = false;
 
+    // TODO this will eventually come with functions for what to attach to them
     renderBullet(type: BulletType) {
         switch (type) {
             case BulletType.Collapsed:
-- 
cgit v1.2.3-70-g09d2


From 11fe73b1f0ec63f7bf7d2341d787e3e20a66ab2b Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Tue, 26 Feb 2019 16:53:25 -0500
Subject: only bullets toggle clicks nowgit add .

---
 .../views/collections/CollectionTreeView.tsx       | 50 ++++++++--------------
 1 file changed, 17 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 4075ff423..b6036b251 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -31,13 +31,16 @@ class TreeView extends React.Component<TreeViewProps> {
     @observable
     collapsed: boolean = false;
 
+
     // TODO this will eventually come with functions for what to attach to them
     renderBullet(type: BulletType) {
+        let onClicked = action(() => this.collapsed = !this.collapsed);
+
         switch (type) {
             case BulletType.Collapsed:
-                return <div className="bullet">&#9654;</div>
+                return <div className="bullet" onClick={onClicked}>&#9654;</div>
             case BulletType.Collapsible:
-                return <div className="bullet">&#9660;</div>
+                return <div className="bullet" onClick={onClicked}>&#9660;</div>
             case BulletType.List:
                 return <div className="bullet">&mdash;</div>
         }
@@ -53,13 +56,19 @@ class TreeView extends React.Component<TreeViewProps> {
         let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
         let onItemDown = setupDrag(reference, childDocument);
 
-        if (title && title != FieldWaiting) {
+        // if the title hasn't loaded, immediately return the div
+        if (!title || title === "<Waiting>") {
+            return <div key={childDocument.Id}></div>;
+        }
+
+        // otherwise, check if it's a collection.
+        else if (children && children !== "<Waiting>") {
             // if it's not collapsed, then render the full TreeView.
             var subView = null;
 
             if (!this.collapsed) {
                 subView =
-                    <li key={childDocument.Id} onClick={action(() => this.collapsed = true)} >
+                    <li key={childDocument.Id} >
                         {this.renderBullet(BulletType.Collapsible)}
                         {title.Data}
                         <ul key={childDocument.Id}>
@@ -67,7 +76,7 @@ class TreeView extends React.Component<TreeViewProps> {
                         </ul>
                     </li>
             } else {
-                subView = <li key={childDocument.Id} onClick={action(() => this.collapsed = false)}>
+                subView = <li key={childDocument.Id}>
                     {this.renderBullet(BulletType.Collapsed)}
                     {title.Data}
                 </li>
@@ -76,48 +85,23 @@ class TreeView extends React.Component<TreeViewProps> {
             return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
                 {subView}
             </div>
-
-
-            // let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
-            //     <ul key={childDocument.Id}>
-            //         <TreeView document={childDocument} />
-            //     </ul>;
-            // return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
-            //     <li className={!children ? "leaf" : this.collapsed ? "collapsed" : "uncollapsed"}
-            //         onClick={action(() => this.collapsed = !this.collapsed)} >
-            //         {title.Data}
-            //         {subView}
-            //     </li>
-            // </div>
-        }
-
-        // if the title hasn't loaded, immediately return the div
-        if (!title || title === "<Waiting>") {
-            return <div key={childDocument.Id}></div>;
-        }
-
-        // otherwise, check if it's a collection.
-        else if (children && children !== "<Waiting>") {
-
         }
 
         // finally, if it's a normal document, then render it as such.
         else {
-            return <li key={document.Id}>
+            return <li key={childDocument.Id}>
                 {this.renderBullet(BulletType.List)}
                 <EditableView contents={title.Data}
                     height={36} GetValue={() => {
-                        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+                        let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
                         if (title && title !== "<Waiting>")
                             return title.Data;
                         return "";
                     }} SetValue={(value: string) => {
-                        document.SetData(KeyStore.Title, value, TextField);
+                        childDocument.SetData(KeyStore.Title, value, TextField);
                         return true;
                     }}></EditableView>
             </li>;
-
-            return (null);
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 95dfe5a650d4d4f5fde890cabaeae949cb3aaf9d Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Tue, 26 Feb 2019 17:01:35 -0500
Subject: collection names can be renamed now

---
 .../views/collections/CollectionTreeView.tsx       | 34 ++++++++++++----------
 1 file changed, 18 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index b6036b251..2b85645db 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -61,8 +61,20 @@ class TreeView extends React.Component<TreeViewProps> {
             return <div key={childDocument.Id}></div>;
         }
 
+        // set up the title element, which will be rendered the same way for everyone
+        let titleElement = <EditableView contents={title.Data}
+            height={36} GetValue={() => {
+                let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
+                if (title && title !== "<Waiting>")
+                    return title.Data;
+                return "";
+            }} SetValue={(value: string) => {
+                childDocument.SetData(KeyStore.Title, value, TextField);
+                return true;
+            }} />
+
         // otherwise, check if it's a collection.
-        else if (children && children !== "<Waiting>") {
+        if (children && children !== "<Waiting>") {
             // if it's not collapsed, then render the full TreeView.
             var subView = null;
 
@@ -70,7 +82,7 @@ class TreeView extends React.Component<TreeViewProps> {
                 subView =
                     <li key={childDocument.Id} >
                         {this.renderBullet(BulletType.Collapsible)}
-                        {title.Data}
+                        {titleElement}
                         <ul key={childDocument.Id}>
                             <TreeView document={childDocument} />
                         </ul>
@@ -78,7 +90,7 @@ class TreeView extends React.Component<TreeViewProps> {
             } else {
                 subView = <li key={childDocument.Id}>
                     {this.renderBullet(BulletType.Collapsed)}
-                    {title.Data}
+                    {titleElement}
                 </li>
             }
 
@@ -91,16 +103,7 @@ class TreeView extends React.Component<TreeViewProps> {
         else {
             return <li key={childDocument.Id}>
                 {this.renderBullet(BulletType.List)}
-                <EditableView contents={title.Data}
-                    height={36} GetValue={() => {
-                        let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
-                        if (title && title !== "<Waiting>")
-                            return title.Data;
-                        return "";
-                    }} SetValue={(value: string) => {
-                        childDocument.SetData(KeyStore.Title, value, TextField);
-                        return true;
-                    }}></EditableView>
+                {titleElement}
             </li>;
         }
     }
@@ -138,15 +141,14 @@ export class CollectionTreeView extends CollectionViewBase {
                         }} SetValue={(value: string) => {
                             this.props.Document.SetData(KeyStore.Title, value, TextField);
                             return true;
-                        }}>
-                    </EditableView>
+                        }} />
                 </h3>
                 <ul className="no-indent">
                     <TreeView
                         document={this.props.Document}
                     />
                 </ul>
-            </div>
+            </div >
         );
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From ef4cfe47ba73e63e91bb389ea8a55951baf20067 Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Tue, 26 Feb 2019 18:21:52 -0500
Subject: collapsing things no longer make other siblings die

---
 .../views/collections/CollectionTreeView.tsx       | 73 +++++++++++-----------
 1 file changed, 37 insertions(+), 36 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 25885cf49..924312d06 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -31,8 +31,6 @@ class TreeView extends React.Component<TreeViewProps> {
     @observable
     collapsed: boolean = false;
 
-
-    // TODO this will eventually come with functions for what to attach to them
     renderBullet(type: BulletType) {
         let onClicked = action(() => this.collapsed = !this.collapsed);
 
@@ -47,48 +45,56 @@ class TreeView extends React.Component<TreeViewProps> {
     }
 
     /**
-     * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element.
-     * @param childDocument The document to render.
+     * Renders the EditableView title element for placement into the tree.
      */
-    renderChild(childDocument: Document) {
-        let reference = React.createRef<HTMLDivElement>();
-        var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
-        let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
-        let onItemDown = setupDrag(reference, () => childDocument);
+    renderTitle() {
+        let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
 
         // if the title hasn't loaded, immediately return the div
         if (!title || title === "<Waiting>") {
-            return <div key={childDocument.Id}></div>;
+            return <div key={this.props.document.Id}></div>;
         }
 
-        // set up the title element, which will be rendered the same way for everyone
-        let titleElement = <EditableView contents={title.Data}
+        return <EditableView contents={title.Data}
             height={36} GetValue={() => {
-                let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
+                let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
                 if (title && title !== "<Waiting>")
                     return title.Data;
                 return "";
             }} SetValue={(value: string) => {
-                childDocument.SetData(KeyStore.Title, value, TextField);
+                this.props.document.SetData(KeyStore.Title, value, TextField);
                 return true;
             }} />
+    }
+
+    render() {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+
+        let reference = React.createRef<HTMLDivElement>();
+        let onItemDown = setupDrag(reference, () => this.props.document);
+        let titleElement = this.renderTitle();
 
-        // otherwise, check if it's a collection.
-        if (children && children !== "<Waiting>") {
-            // if it's not collapsed, then render the full TreeView.
+        // check if this document is a collection
+        if (children && children !== FieldWaiting) {
             var subView = null;
 
+            // render all children elements
+            let childrenElement = (children.Data.map(value =>
+                <TreeView document={value} />)
+            )
+
+            // if uncollapsed, then add the children elements
             if (!this.collapsed) {
                 subView =
-                    <li key={childDocument.Id} >
+                    <li key={this.props.document.Id} >
                         {this.renderBullet(BulletType.Collapsible)}
                         {titleElement}
-                        <ul key={childDocument.Id}>
-                            <TreeView document={childDocument} />
+                        <ul key={this.props.document.Id}>
+                            {childrenElement}
                         </ul>
                     </li>
             } else {
-                subView = <li key={childDocument.Id}>
+                subView = <li key={this.props.document.Id}>
                     {this.renderBullet(BulletType.Collapsed)}
                     {titleElement}
                 </li>
@@ -99,24 +105,14 @@ class TreeView extends React.Component<TreeViewProps> {
             </div>
         }
 
-        // finally, if it's a normal document, then render it as such.
+        // otherwise this is a normal leaf node
         else {
-            return <li key={childDocument.Id}>
+            return <li key={this.props.document.Id}>
                 {this.renderBullet(BulletType.List)}
                 {titleElement}
             </li>;
         }
     }
-
-    render() {
-        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-        return !children || children === FieldWaiting ? (null) :
-            (children.Data.map(value =>
-                <div key={value.Id}>
-                    {this.renderChild(value)}
-                </div>)
-            )
-    }
 }
 
 
@@ -129,6 +125,13 @@ export class CollectionTreeView extends CollectionViewBase {
         if (title && title !== FieldWaiting) {
             titleStr = title.Data;
         }
+
+        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let childrenElement = !children || children === FieldWaiting ? (null) :
+            (children.Data.map(value =>
+                <TreeView document={value} />)
+            )
+
         return (
             <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
                 <h3>
@@ -144,9 +147,7 @@ export class CollectionTreeView extends CollectionViewBase {
                         }} />
                 </h3>
                 <ul className="no-indent">
-                    <TreeView
-                        document={this.props.Document}
-                    />
+                    {childrenElement}
                 </ul>
             </div >
         );
-- 
cgit v1.2.3-70-g09d2


From 33809739a0a24a256d6a1b30bf237fc8bd749db3 Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Tue, 26 Feb 2019 18:59:56 -0500
Subject: set up infrastructure for deletedoc

---
 src/client/views/collections/CollectionTreeView.scss | 10 ++++++++++
 src/client/views/collections/CollectionTreeView.tsx  | 13 ++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 75feebbbe..f8d580a7b 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -24,4 +24,14 @@ li {
     border-style: solid;
     box-sizing: border-box;
     height: 100%;
+}
+
+.docContainer {
+    display: inline-table;
+}
+
+.delete-button {
+    color: #999999;
+    float: right;
+    margin-left: 1em;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 924312d06..b075737d2 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -14,6 +14,7 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 
 export interface TreeViewProps {
     document: Document;
+    deleteDoc: (doc: Document) => void;
 }
 
 export enum BulletType {
@@ -31,6 +32,10 @@ class TreeView extends React.Component<TreeViewProps> {
     @observable
     collapsed: boolean = false;
 
+    delete() {
+        this.props.deleteDoc;
+    }
+
     renderBullet(type: BulletType) {
         let onClicked = action(() => this.collapsed = !this.collapsed);
 
@@ -55,7 +60,7 @@ class TreeView extends React.Component<TreeViewProps> {
             return <div key={this.props.document.Id}></div>;
         }
 
-        return <EditableView contents={title.Data}
+        return <div className="docContainer"> <EditableView contents={title.Data}
             height={36} GetValue={() => {
                 let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField);
                 if (title && title !== "<Waiting>")
@@ -65,6 +70,8 @@ class TreeView extends React.Component<TreeViewProps> {
                 this.props.document.SetData(KeyStore.Title, value, TextField);
                 return true;
             }} />
+            <div className="delete-button" onClick={this.delete}>x</div>
+        </div >
     }
 
     render() {
@@ -80,7 +87,7 @@ class TreeView extends React.Component<TreeViewProps> {
 
             // render all children elements
             let childrenElement = (children.Data.map(value =>
-                <TreeView document={value} />)
+                <TreeView document={value} deleteDoc={() => console.log("test")} />)
             )
 
             // if uncollapsed, then add the children elements
@@ -129,7 +136,7 @@ export class CollectionTreeView extends CollectionViewBase {
         var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
         let childrenElement = !children || children === FieldWaiting ? (null) :
             (children.Data.map(value =>
-                <TreeView document={value} />)
+                <TreeView document={value} deleteDoc={() => console.log("test")} />)
             )
 
         return (
-- 
cgit v1.2.3-70-g09d2