collapsing sections

3 files changed, 107 insertions, 13 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index c889557ba..0a0136d87 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -577,7 +577,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             </> :
             <>
                 {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
-                    <FontAwesomeIcon size="lg" icon="cog" />
+                    <FontAwesomeIcon size="lg" icon="bars" />
                 </div></Tooltip>}
                 <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
                     <span style={{ width: "100%", display: "inline-block", cursor: "move" }}>{`${this.selectionTitle}`}</span>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 856f8e7f2..1fda8e5a2 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -40,6 +40,10 @@
         border-bottom: 1px solid black;
         padding: 8.5px;
         font-size: 12.5px;
+
+        &:hover {
+            cursor: pointer;
+        }
     }
 
     .propertiesView-settings {
@@ -52,6 +56,17 @@
             font-weight: bold;
             font-size: 12.5px;
             padding-bottom: 7px;
+            display: flex;
+            width: 200px;
+
+            .propertiesView-settings-title-icon {
+                margin-left: 2px;
+                margin-right: 7px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
         }
 
         .propertiesView-settings-content {
@@ -69,6 +84,16 @@
             font-size: 12.5px;
             font-weight: bold;
             padding-bottom: 7px;
+            display: flex;
+
+            .propertiesView-sharing-title-icon {
+                margin-left: 2px;
+                margin-right: 7px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
         }
 
         .propertiesView-sharing-content {
@@ -172,6 +197,16 @@
                 font-weight: bold;
                 white-space: nowrap;
                 width: 35px;
+                display: flex;
+            }
+
+            .propertiesView-fields-title-icon {
+                margin-left: 2px;
+                margin-right: 7px;
+
+                &:hover {
+                    cursor: pointer;
+                }
             }
 
             .propertiesView-fields-title-checkbox {
@@ -225,6 +260,16 @@
             font-weight: bold;
             font-size: 12.5px;
             padding-bottom: 7px;
+            display: flex;
+
+            .propertiesView-layout-title-icon {
+                margin-left: 2px;
+                margin-right: 7px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
         }
 
         .propertiesView-layout-content {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index be024b772..91d407eea 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -1,7 +1,7 @@
 import React = require("react");
 import { observer } from "mobx-react";
 import "./PropertiesView.scss";
-import { observable, action, computed } from "mobx";
+import { observable, action, computed, runInAction } from "mobx";
 import { Doc, Field, DocListCast, WidthSym, HeightSym } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
 import { ComputedField } from "../../../../fields/ScriptField";
@@ -43,6 +43,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @observable layoutFields: boolean = false;
 
+    @observable openActions: boolean = true;
+    @observable openSharing: boolean = true;
+    @observable openFields: boolean = true;
+    @observable openLayout: boolean = true;
+
     @action
     rtfWidth = () => {
         if (this.selectedDoc) {
@@ -314,6 +319,25 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         this.layoutFields = !this.layoutFields;
     }
 
+    @computed get editableTitle() {
+        return <EditableView
+            key="editableView"
+            contents={StrCast(this.selectedDoc?.title)}
+            height={25}
+            fontSize={14}
+            GetValue={() => StrCast(this.selectedDoc?.title)}
+            SetValue={this.setTitle} />;
+    }
+
+    setTitle = (value: string) => {
+        if (this.dataDoc) {
+            this.selectedDoc && (this.selectedDoc.title = value);
+            KeyValueBox.SetField(this.dataDoc, "title", value, true);
+            return true;
+        }
+        return false;
+    }
+
     render() {
 
         if (!this.selectedDoc) {
@@ -333,35 +357,60 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 </div>
             </div>
             <div className="propertiesView-name">
-                {this.selectedDoc.title}
+                {this.editableTitle}
             </div>
             <div className="propertiesView-settings">
-                <div className="propertiesView-settings-title"> Document Actions </div>
-                <div className="propertiesView-settings-content">
-                    <PropertiesButtons />
+                <div className="propertiesView-settings-title">
+                    <div className="propertiesView-settings-title-icon"
+                        onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}>
+                        <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="black" />
+                    </div>
+                    Document Actions
                 </div>
+                {this.openActions ? <div className="propertiesView-settings-content">
+                    <PropertiesButtons />
+                </div> : null}
             </div>
             <div className="propertiesView-sharing">
-                <div className="propertiesView-sharing-title"> Sharing {"&"} Permissions</div>
-                <div className="propertiesView-sharing-content">
-                    {this.sharingTable}
+                <div className="propertiesView-sharing-title">
+                    <div className="propertiesView-sharing-title-icon"
+                        onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}>
+                        <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="black" />
+                    </div>
+                    Sharing {"&"} Permissions
                 </div>
+                {this.openSharing ? <div className="propertiesView-sharing-content">
+                    {this.sharingTable}
+                </div> : null}
             </div>
             <div className="propertiesView-fields">
                 <div className="propertiesView-fields-title">
                     <div className="propertiesView-fields-title-name">
+                        <div className="propertiesView-fields-title-icon"
+                            onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}>
+                            <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="black" />
+                        </div>
                         Fields {"&"} Tags
                     </div>
-                    {!novice ? <div className="propertiesView-fields-title-checkbox">
+                    {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
                         {this.fieldsCheckbox}
                         <div className="propertiesView-fields-title-checkbox-text">Layout</div>
                     </div> : null}
                 </div>
-                <div className="propertiesView-fields-content"> {novice ? this.noviceFields : this.expandedField} </div>
+                {this.openFields ?
+                    <div className="propertiesView-fields-content">
+                        {novice ? this.noviceFields : this.expandedField}
+                    </div> : null}
             </div>
             <div className="propertiesView-layout">
-                <div className="propertiesView-layout-title" >Layout</div>
-                <div className="propertiesView-layout-content">{this.layoutPreview}</div>
+                <div className="propertiesView-layout-title" >
+                    <div className="propertiesView-layout-title-icon"
+                        onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
+                        <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="black" />
+                    </div>
+                    Layout
+                </div>
+                {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
             </div>
         </div>;
     }