2 files changed, 26 insertions, 6 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 46f38795c..041eec2b4 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -387,7 +387,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     /**
-     * @returns the sharing and permissiosn panel.
+     * @returns the sharing and permissions panel.
      */
     @computed get sharingTable() {
         const AclMap = new Map<symbol, string>([
@@ -907,6 +907,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         </div>
                         {!this.openSharing ? (null) :
                             <div className="propertiesView-sharing-content">
+                                {!novice ? (<div className="propertiesView-acls-checkbox">
+                                    <Checkbox
+                                        color="primary"
+                                        onChange={action(() => this.layoutDocAcls = !this.layoutDocAcls)}
+                                        checked={this.layoutDocAcls}
+                                    />;
+                                    <div className="propertiesView-acls-checkbox-text">Layout</div>
+                                </div>) : (null)}
                                 {this.sharingTable}
                                 {/* <div className="change-buttons">
                             <button
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index dd4f01a88..65695d22a 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DataSym } from "../../../fields/Doc";
+import { Doc, DocListCast, DataSym } from "../../../fields/Doc";
 import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { ScriptField } from "../../../fields/ScriptField";
 import { StrCast, NumCast } from "../../../fields/Types";
@@ -90,7 +90,8 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                 this.props.parent.Document.dropConverter.script.run({ dragData: de.complete.docDragData });
             const key = StrCast(this.props.parent.props.Document._pivotField);
             const castedValue = this.getValue(this.heading);
-            de.complete.docDragData.droppedDocuments.forEach(d => d[key] = d[DataSym][key] = castedValue);
+            const onLayoutDoc = this.onLayoutDoc(key);
+            de.complete.docDragData.droppedDocuments.forEach(d => Doc.SetInPlace(d, key, castedValue, !onLayoutDoc));
             this.props.parent.onInternalDrop(e, de);
             e.stopPropagation();
         }
@@ -115,7 +116,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                     return false;
                 }
             }
-            this.props.docList.forEach(d => d[key] = castedValue);
+            this.props.docList.forEach(d => Doc.SetInPlace(d, key, castedValue, true));
             this._heading = castedValue.toString();
             return true;
         }
@@ -141,7 +142,8 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         this._createAliasSelected = false;
         const key = StrCast(this.props.parent.props.Document._pivotField);
         const newDoc = Docs.Create.TextDocument(value, { _autoHeight: true, _showTitle: Doc.UserDoc().showTitle ? "title" : undefined, _width: 200, title: value });
-        newDoc[key] = this.getValue(this.props.heading);
+        const onLayoutDoc = this.onLayoutDoc(key);
+        (onLayoutDoc ? newDoc : newDoc[DataSym])[key] = this.getValue(this.props.heading);
         const docs = this.props.parent.childDocList;
         return docs ? (docs.splice(0, 0, newDoc) ? true : false) : this.props.parent.props.addDocument(newDoc);
     }
@@ -149,7 +151,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
     deleteRow = undoBatch(action(() => {
         this._createAliasSelected = false;
         const key = StrCast(this.props.parent.props.Document._pivotField);
-        this.props.docList.forEach(d => d[key] = undefined);
+        this.props.docList.forEach(d => Doc.SetInPlace(d, key, undefined, true));
         if (this.props.parent.columnHeaders && this.props.headingObject) {
             const index = this.props.parent.columnHeaders.indexOf(this.props.headingObject);
             this.props.parent.columnHeaders.splice(index, 1);
@@ -185,6 +187,16 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         }
     }
 
+    /**
+     * Returns true if a key is on the layout doc of the documents in the collection.
+     */
+    onLayoutDoc = (key: string): boolean => {
+        DocListCast(this.props.parent.Document.data).forEach(doc => {
+            if (Doc.Get(doc, key, true)) return true;
+        });
+        return false;
+    }
+
     renderColorPicker = () => {
         const selected = this.color;