adding fields to properties column

6 files changed, 93 insertions, 27 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 088e20a3e..1dd25ae30 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -660,7 +660,7 @@ export class CurrentUserUtils {
 
         CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], {
             title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150, hideFilterView: true,
+            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
             lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
         })) as any as Doc;
 
@@ -679,7 +679,7 @@ export class CurrentUserUtils {
 
         CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], {
             title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150, hideFilterView: true,
+            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
             lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
         })) as any as Doc;
 
@@ -703,7 +703,7 @@ export class CurrentUserUtils {
 
         CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], {
             title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150, hideFilterView: true,
+            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
             lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
         })) as any as Doc;
 
@@ -718,7 +718,7 @@ export class CurrentUserUtils {
         if (doc["tabs-button-library"] === undefined) {
             const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], {
                 title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-                treeViewTruncateTitleWidth: 150, hideFilterView: true,
+                treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
             })) as any as Doc;
             doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 25a87ab56..259a803a2 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -192,7 +192,7 @@ export class EditableView extends React.Component<EditableProps> {
             return (this.props.contents instanceof ObjectField ? (null) :
                 <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`}
                     ref={this._ref}
-                    style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
+                    style={{ display: this.props.display, minHeight: "17px", whiteSpace: "nowrap", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
                     onClick={this.onClick} placeholder={this.props.placeholder}>
                     <span style={{
                         fontStyle: this.props.fontStyle, fontSize: this.props.fontSize,
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 9c04458fe..55280b231 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -121,6 +121,9 @@
     padding: 20px;
     padding-right: 50px;
 
+    overflow-y: scroll;
+    overflow-x: hidden;
+
     .mainView-menuPanel-button {
         width: 45px;
         height: 45px;
@@ -174,7 +177,7 @@
         background-color: dimgray;
         border-radius: 100%;
         transform-origin: top left;
-        margin-bottom: 23px;
+        margin-bottom: 20px;
         margin-top: 5px;
 
         margin-right: 25px;
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 44d22dd5d..616e7995d 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -588,7 +588,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                 width: `${this.propertiesWidth()}px`,
                 overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
             }}>
-                <PropertiesView />
+                <PropertiesView document={this.dataDoc} />
             </div>;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index d4cc53bfa..bb5b80abd 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -1,32 +1,59 @@
 .propertiesView {
 
-    background-color: rgb(168, 168, 168);
+    background-color: rgb(205, 205, 205);
     height: 100%;
     z-index: 1;
+    font-family: "Noto Sans";
+    cursor: auto;
+
+    //overflow-y: scroll;
 
     .propertiesView-title {
-        background-color: rgb(134, 134, 134);
-        border-top: 1px solid black;
-        border-bottom: 1px solid black;
+        background-color: rgb(159, 159, 159);
+        text-align: center;
+        font-size: 18px;
+        font-weight: bold;
+        padding-top: 12px;
+        padding-bottom: 12px;
     }
 
     .propertiesView-name {
-        border-top: 1px solid black;
         border-bottom: 1px solid black;
+        padding: 8.5px;
+        font-size: 12.5px;
     }
 
     .propertiesView-settings {
-        border-top: 1px solid black;
         border-bottom: 1px solid black;
+        padding: 8.5px;
+        font-size: 12.5px;
+        font-weight: bold;
     }
 
     .propertiesView-fields {
-        border-top: 1px solid black;
         border-bottom: 1px solid black;
+        padding: 8.5px;
+
+        .propertiesView-fields-title {
+            font-size: 12.5px;
+            font-weight: bold;
+            padding-bottom: 7px;
+        }
+
+        .propertiesView-fields-content {
+            font-size: 10px;
+            margin-left: 5px;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
     }
 
     .propertiesView-layout {
-        border-top: 1px solid black;
         border-bottom: 1px solid black;
+        padding: 8.5px;
+        font-size: 12.5px;
+        font-weight: bold;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 4306453ea..bc78fccdf 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -1,20 +1,54 @@
 import React = require("react");
 import { observer } from "mobx-react";
 import "./PropertiesView.scss";
-import { observable, action } from "mobx";
-import { Doc } from "../../../../fields/Doc";
+import { observable, action, computed } from "mobx";
+import { Doc, Field, DocListCast } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
+import { ComputedField } from "../../../../fields/ScriptField";
+import { EditableView } from "../../EditableView";
+import { KeyValueBox } from "../../nodes/KeyValueBox";
+import { Cast } from "../../../../fields/Types";
+import { listSpec } from "../../../../fields/Schema";
 
 
-// interface PropertiesViewProps {
-//     document: Doc;
-//     dataDoc: Doc;
-//     docView: DocumentView;
-//     width: number;
-// }
+interface PropertiesViewProps {
+    document: Doc;
+    //dataDoc: Doc;
+    //docView: DocumentView;
+}
 
 @observer
-export class PropertiesView extends React.Component<{}> {
+export class PropertiesView extends React.Component<PropertiesViewProps> {
+
+    @computed get expandedField() {
+        const ids: { [key: string]: string } = {};
+        const doc = this.props.document;
+        doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
+
+        const rows: JSX.Element[] = [];
+        for (const key of Object.keys(ids).slice().sort()) {
+            const contents = doc[key];
+            let contentElement: (JSX.Element | null)[] | JSX.Element = [];
+            contentElement = <EditableView key="editableView"
+                contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
+                height={13}
+                fontSize={10}
+                GetValue={() => Field.toKeyValueString(doc, key)}
+                SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)}
+            />;
+
+            rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
+                <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
+                &nbsp;
+                {contentElement}
+            </div>);
+        }
+        return rows;
+    }
+
+    @computed get layoutPreview() {
+        return "layout";
+    }
 
     render() {
         return <div className="propertiesView" >
@@ -22,16 +56,18 @@ export class PropertiesView extends React.Component<{}> {
                 Properties
             </div>
             <div className="propertiesView-name">
-                Properties
+                Collection
             </div>
             <div className="propertiesView-settings">
                 Settings
             </div>
             <div className="propertiesView-fields">
-                Fields
+                <div className="propertiesView-fields-title"> Fields</div>
+                <div className="propertiesView-fields-content"> {this.expandedField} </div>
             </div>
             <div className="propertiesView-layout">
-                Layout
+                <div>Layout</div>
+                <div>{this.layoutPreview}</div>
             </div>
         </div>;
     }