refactored out bullets and can retitle main collection, but still need to retitle nested collections

2 files changed, 37 insertions, 19 deletions

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}