added collapsible headers for masonry view

2 files changed, 26 insertions, 14 deletions

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 4e49e368b..5713cc770 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -291,24 +291,28 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         });
     }
 
+    @observable _headingsHack: number = 1;
     sectionMasonry(heading: SchemaHeaderField | undefined, docList: Doc[]) {
         let cols = Math.max(1, Math.min(docList.length,
             Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap))));
         return <div key={heading ? heading.heading : "empty"} className="collectionStackingView-masonrySection">
             {!heading ? (null) :
-                <div key={`${heading.heading}`} className="collectionStackingView-sectionHeader" style={{ background: heading.color }}>
+                <div key={`${heading.heading}`} className="collectionStackingView-sectionHeader" style={{ background: heading.color }}
+                    onClick={action(() => this._headingsHack++ && heading.setCollapsed(!heading.collapsed))} >
                     {heading.heading}
                 </div>}
-            <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
-                style={{
-                    padding: `${this.yMargin}px ${this.xMargin}px`,
-                    width: `${cols * (this.columnWidth + this.gridGap) + 2 * this.xMargin - this.gridGap}px`,
-                    gridGap: this.gridGap,
-                    gridTemplateColumns: numberRange(cols).reduce((list, i) => list + ` ${this.columnWidth}px`, ""),
-                }}>
-                {this.masonryChildren(docList)}
-                {this.columnDragger}
-            </div>
+            {this._headingsHack && heading && heading.collapsed ? (null) :
+                <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
+                    style={{
+                        padding: `${this.yMargin}px ${this.xMargin}px`,
+                        width: `${cols * (this.columnWidth + this.gridGap) + 2 * this.xMargin - this.gridGap}px`,
+                        gridGap: this.gridGap,
+                        gridTemplateColumns: numberRange(cols).reduce((list, i) => list + ` ${this.columnWidth}px`, ""),
+                    }}>
+                    {this.masonryChildren(docList)}
+                    {this.columnDragger}
+                </div>
+            }
         </div>;
     }
 
diff --git a/src/new_fields/SchemaHeaderField.ts b/src/new_fields/SchemaHeaderField.ts
index 23605cfb0..7494c9bd1 100644
--- a/src/new_fields/SchemaHeaderField.ts
+++ b/src/new_fields/SchemaHeaderField.ts
@@ -1,8 +1,8 @@
 import { Deserializable } from "../client/util/SerializationHelper";
-import { serializable, createSimpleSchema, primitive } from "serializr";
+import { serializable, primitive } from "serializr";
 import { ObjectField } from "./ObjectField";
 import { Copy, ToScriptString, OnUpdate } from "./FieldSymbols";
-import { scriptingGlobal, Scripting } from "../client/util/Scripting";
+import { scriptingGlobal } from "../client/util/Scripting";
 import { ColumnType } from "../client/views/collections/CollectionSchemaView";
 
 export const PastelSchemaPalette = new Map<string, string>([
@@ -53,9 +53,11 @@ export class SchemaHeaderField extends ObjectField {
     @serializable(primitive())
     width: number;
     @serializable(primitive())
+    collapsed: boolean | undefined;
+    @serializable(primitive())
     desc: boolean | undefined; // boolean determines sort order, undefined when no sort
 
-    constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType, width?: number, desc?: boolean) {
+    constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType, width?: number, desc?: boolean, collapsed?: boolean) {
         super();
 
         this.heading = heading;
@@ -63,6 +65,7 @@ export class SchemaHeaderField extends ObjectField {
         this.type = type ? type : 0;
         this.width = width ? width : -1;
         this.desc = desc;
+        this.collapsed = collapsed;
     }
 
     setHeading(heading: string) {
@@ -90,6 +93,11 @@ export class SchemaHeaderField extends ObjectField {
         this[OnUpdate]();
     }
 
+    setCollapsed(collapsed: boolean | undefined) {
+        this.collapsed = collapsed;
+        this[OnUpdate]();
+    }
+
     [Copy]() {
         return new SchemaHeaderField(this.heading, this.color, this.type);
     }