From fb76a0d66fc074a458706adf6fbb02492205b6e4 Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Tue, 20 Aug 2019 12:54:44 -0400
Subject: factoring out masonry code into new file

---
 .../views/collections/CollectionStackingView.scss    | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 01d4ea2b6..a83c97624 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -1,12 +1,15 @@
 @import "../globalCssVariables";
 
 .collectionMasonryView {
-    display:inline;
+    display: inline;
 }
-.collectionStackingView{
+
+.collectionStackingView {
     display: flex;
 }
-.collectionStackingView, .collectionMasonryView{
+
+.collectionStackingView,
+.collectionMasonryView {
     height: 100%;
     width: 100%;
     position: absolute;
@@ -14,6 +17,7 @@
     overflow-y: auto;
     flex-wrap: wrap;
     transition: top .5s;
+
     .collectionSchemaView-previewDoc {
         height: 100%;
         position: absolute;
@@ -40,10 +44,12 @@
         top: 0;
         left: 0;
     }
+
     .collectionStackingView-masonrySingle {
         height: 100%;
         position: absolute;
     }
+
     .collectionStackingView-masonryGrid {
         margin: auto;
         height: max-content;
@@ -91,7 +97,7 @@
         height: 100%;
         margin: auto;
     }
-    
+
     .collectionStackingView-masonrySection {
         margin: auto;
     }
@@ -290,4 +296,10 @@
     }
 
 
+}
+
+.red-box {
+    width: 200px;
+    height: 200px;
+    background: red;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 86eac2d13f619f0e7d7ba4abeed0bd7d53d7e2d6 Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Wed, 21 Aug 2019 12:03:25 -0400
Subject: can drag-drop in masonry

---
 .../collections/CollectionMasonryViewFieldRow.tsx  | 34 ++++++++++++----------
 .../views/collections/CollectionStackingView.scss  |  8 -----
 .../views/collections/CollectionStackingView.tsx   |  3 ++
 3 files changed, 21 insertions(+), 24 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 630d510a1..dbd7f9e3c 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -143,14 +143,14 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
     }
 
     @action
-    pointerEntered = () => {
+    pointerEnteredRow = () => {
         if (SelectionManager.GetIsDragging()) {
             this._background = "#b4b4b4";
         }
     }
 
     @action
-    pointerLeave = () => {
+    pointerLeaveRow = () => {
         this._background = "inherit";
         document.removeEventListener("pointermove", this.startDrag);
     }
@@ -249,6 +249,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
     @observable _headingsHack: number = 1;
     render() {
         let cols = this.props.rows();
+        let rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap))));
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
         let templatecols = "";
         let headings = this.props.headings();
@@ -302,22 +303,23 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         return (
             <div className="collectionStackingView-masonrySection"
                 key={heading = "empty"}
-                style={{ width: `${100 / ((uniqueHeadings.length + ((this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? 1 : 0)) || 1)}%`, background: this._background }}
-                ref={this.createRowDropRef} onPointerEnter={this.pointerEntered} onPointerLeave={this.pointerLeave} >
+                style={{ width: this.props.parent.NodeWidth }}
+                ref={this.createRowDropRef}
+                onPointerEnter={this.pointerEnteredRow}
+                onPointerLeave={this.pointerLeaveRow}
+            >
                 {headingView}
                 {
-                    this._headingsHack && heading ? (null) :
-                        <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
-                            style={{
-                                padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
-                                width: `${cols * (this.props.parent.columnWidth + this.props.parent.gridGap) + 2 * this.props.parent.xMargin - this.props.parent.gridGap}px`,
-                                gridGap: this.props.parent.gridGap,
-                                // gridTemplateColumns: undefined,
-                                gridTemplateColumns: numberRange(cols).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
-                            }}>
-                            {this.masonryChildren(this.props.docList)}
-                            {this.props.parent.columnDragger}
-                        </div>
+                    <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
+                        style={{
+                            padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
+                            width: this.props.parent.NodeWidth,
+                            gridGap: this.props.parent.gridGap,
+                            gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
+                        }}>
+                        {this.masonryChildren(this.props.docList)}
+                        {this.props.parent.columnDragger}
+                    </div>
                 }
                 { //controls the +NEW for each row
                     (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ?
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index a83c97624..deb295a41 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -294,12 +294,4 @@
     .rc-switch-checked .rc-switch-inner {
         left: 8px;
     }
-
-
-}
-
-.red-box {
-    width: 200px;
-    height: 200px;
-    background: red;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index c2342eb50..289c3a1fa 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -48,6 +48,9 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         return Math.min(this.props.PanelWidth() / (this.props as any).ContentScaling() - 2 * this.xMargin,
             this.isStackingView ? Number.MAX_VALUE : NumCast(this.props.Document.columnWidth, 250));
     }
+    @computed get NodeWidth() {
+        return this.props.PanelWidth();
+    }
 
     childDocHeight(child: Doc) { return this.getDocHeight(Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, child).layout); }
 
-- 
cgit v1.2.3-70-g09d2


From 2e6c8efbcea67d345023db679de15f294a792dc5 Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Tue, 24 Sep 2019 18:09:31 -0400
Subject: Initial menu for header capabilities

---
 .../collections/CollectionMasonryViewFieldRow.tsx  | 11 +++----
 .../views/collections/CollectionStackingView.scss  | 38 +++++++++++++++++++++-
 .../views/collections/CollectionStackingView.tsx   |  7 ----
 .../CollectionStackingViewFieldColumn.tsx          | 31 +++++++++++++++---
 4 files changed, 68 insertions(+), 19 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index b1afd09c2..38f7493de 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -327,11 +327,11 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                             </ Flyout >
                         </div>
                     }
-                    {evContents === `NO ${key.toUpperCase()} VALUE` ?
-                        (null) :
-                        <button className="collectionStackingView-sectionDelete" onClick={this.deleteRow}>
-                            <FontAwesomeIcon icon="trash" />
-                        </button>}
+                    {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
+                        <button className="collectionStackingView-sectionOptions" onClick={this.deleteRow}>
+                            <FontAwesomeIcon icon="ellipsis-v" size="lg"></FontAwesomeIcon>
+                        </button>
+                    }
                 </div>
             </div > : (null);
         const background = this._background; //to account for observables in Measure
@@ -351,7 +351,6 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                             {collapsed ? (null) :
                                 < div >
                                     <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
-                                        // ref={this.getTrueHeight}
                                         ref={this._contRef}
                                         style={{
                                             padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`,
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index deb295a41..f34b3768b 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -138,7 +138,7 @@
             .editableView-input:hover,
             .editableView-container-editing:hover,
             .editableView-container-editing-oneLine:hover {
-                cursor: text
+                cursor: text;
             }
 
             .editableView-input {
@@ -188,6 +188,42 @@
             }
         }
 
+        .collectionStackingView-sectionOptions {
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 100%;
+
+            [class*="css"] {
+                max-width: 102px;
+            }
+
+            .collectionStackingView-sectionOptionButton {
+                height: 35px;
+            }
+
+            .collectionStackingView-optionPicker {
+                width: 78px;
+
+                .optionOptions {
+                    display: inline;
+                }
+
+                .optionPicker {
+                    cursor: pointer;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 10px;
+                    margin: 3px;
+
+                    &.active {
+                        border: 2px solid white;
+                        box-shadow: 0 0 0 2px lightgray;
+                    }
+                }
+            }
+        }
+
         .collectionStackingView-sectionDelete {
             position: absolute;
             right: 0;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 3fec7a85f..9c6d5c52a 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -25,8 +25,6 @@ import { ContextMenuProps } from "../ContextMenuItem";
 import { ScriptBox } from "../ScriptBox";
 import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow";
 
-// let _height: number = 0;
-
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
     _masonryGridRef: HTMLDivElement | null = null;
@@ -103,8 +101,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                 args[1] instanceof Doc &&
                     this.childDocs.map(async doc => !Doc.AreProtosEqual(args[1] as Doc, (await doc).layout as Doc) && Doc.ApplyTemplateTo(args[1] as Doc, (await doc), undefined));
             });
-
-
         // is there any reason this needs to exist? -syip.  yes, it handles autoHeight for stacking and masonry views -eeng
         this._heightDisposer = reaction(() => {
             if (BoolCast(this.props.Document.autoHeight)) {
@@ -114,9 +110,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                         (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin)), 0);
                 } else {
                     let sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0);
-                    // let transformScale = this.props.ScreenToLocalTransform().Scale;
-                    // let trueHeight = 30 * transformScale;
-                    // sum += trueHeight;
                     sum += 30;
                     return this.props.ContentScaling() * (sum + (this.Sections.size ? 50 : 0));
                 }
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index c0c4750eb..aacf8ad4b 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -20,6 +20,7 @@ import { anchorPoints, Flyout } from "../DocumentDecorations";
 import { EditableView } from "../EditableView";
 import { CollectionStackingView } from "./CollectionStackingView";
 import "./CollectionStackingView.scss";
+import Measure from "react-measure";
 
 library.add(faPalette);
 
@@ -38,6 +39,9 @@ interface CSVFieldColumnProps {
 @observer
 export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldColumnProps> {
     @observable private _background = "inherit";
+    @observable private _selected: boolean = false;
+    @observable private _mouseX: number = 0;
+    @observable private _mouseY: number = 0;
 
     private _dropRef: HTMLDivElement | null = null;
     private dropDisposer?: DragManager.DragDropDisposer;
@@ -248,6 +252,19 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         );
     }
 
+    renderMenu = () => {
+        return (
+            <div className="collectionStackingView-optionPicker">
+                <div className="optionOptions">
+                    <div className="optionPicker">Delete</div>
+                    <div className="optionPicker">Edit</div>
+                    <div className="optionPicker">Collapse</div>
+                    <div className="optionPicker">Alias</div>
+                </div>
+            </div>
+        );
+    }
+
     @observable private collapsed: boolean = false;
 
     private toggleVisibility = action(() => {
@@ -312,11 +329,15 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                             </ Flyout >
                         </div>
                     }
-                    {evContents === `NO ${key.toUpperCase()} VALUE` ?
-                        (null) :
-                        <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
-                            <FontAwesomeIcon icon="trash" />
-                        </button>}
+                    {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
+                        <div className="collectionStackingView-sectionOptions">
+                            <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderMenu()}>
+                                <button className="collectionStackingView-sectionOptionButton">
+                                    <FontAwesomeIcon icon="ellipsis-v" size="lg"></FontAwesomeIcon>
+                                </button>
+                            </Flyout>
+                        </div>
+                    }
                 </div>
             </div> : (null);
         for (let i = 0; i < cols; i++) templatecols += `${style.columnWidth / style.numGroupColumns}px `;
-- 
cgit v1.2.3-70-g09d2


From 16e511e35ecbe6166ced813d27884b367f6c6fbb Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Sat, 28 Sep 2019 16:53:13 -0400
Subject: delete and menu button for group header

---
 .../collections/CollectionMasonryViewFieldRow.tsx  | 26 +++++++++++++++++++---
 .../views/collections/CollectionStackingView.scss  |  2 +-
 .../CollectionStackingViewFieldColumn.tsx          | 12 +++++-----
 3 files changed, 31 insertions(+), 9 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 38f7493de..ad84b7635 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -261,6 +261,17 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         );
     }
 
+    renderMenu = () => {
+        let selected = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
+        return (
+            <div className="collectionStackingView-optionPicker">
+                <div className="optionOptions">
+                    <div className="optionPicker">Create Alias</div>
+                </div>
+            </div>
+        );
+    }
+
     @observable private collapsed: boolean = false;
 
     private toggleVisibility = action(() => {
@@ -327,10 +338,19 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                             </ Flyout >
                         </div>
                     }
+                    {evContents === `NO ${key.toUpperCase()} VALUE` ?
+                        (null) :
+                        <button className="collectionStackingView-sectionDelete" onClick={this.deleteRow}>
+                            <FontAwesomeIcon icon="trash" size="lg" />
+                        </button>}
                     {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
-                        <button className="collectionStackingView-sectionOptions" onClick={this.deleteRow}>
-                            <FontAwesomeIcon icon="ellipsis-v" size="lg"></FontAwesomeIcon>
-                        </button>
+                        <div className="collectionStackingView-sectionOptions">
+                            <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderMenu()}>
+                                <button className="collectionStackingView-sectionOptionButton">
+                                    <FontAwesomeIcon icon="ellipsis-v" size="lg"></FontAwesomeIcon>
+                                </button>
+                            </Flyout>
+                        </div>
                     }
                 </div>
             </div > : (null);
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index f34b3768b..d3deff9f1 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -226,7 +226,7 @@
 
         .collectionStackingView-sectionDelete {
             position: absolute;
-            right: 0;
+            right: 25px;
             top: 0;
             height: 100%;
         }
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index b04e1fc73..e94a7d7f6 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -257,10 +257,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         return (
             <div className="collectionStackingView-optionPicker">
                 <div className="optionOptions">
-                    <div className="optionPicker" onClick={() => this.deleteColumn()}>Delete</div>
-                    <div className="optionPicker">Edit</div>
-                    <div className="optionPicker">Collapse</div>
-                    <div className="optionPicker">Alias</div>
+                    <div className="optionPicker">Create Alias</div>
                 </div>
             </div>
         );
@@ -325,11 +322,16 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         <div className="collectionStackingView-sectionColor">
                             <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderColorPicker()}>
                                 <button className="collectionStackingView-sectionColorButton">
-                                    <FontAwesomeIcon icon="palette" size="sm" />
+                                    <FontAwesomeIcon icon="palette" size="lg" />
                                 </button>
                             </ Flyout >
                         </div>
                     }
+                    {evContents === `NO ${key.toUpperCase()} VALUE` ?
+                        (null) :
+                        <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
+                            <FontAwesomeIcon icon="trash" size="lg" />
+                        </button>}
                     {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
                         <div className="collectionStackingView-sectionOptions">
                             <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderMenu()}>
-- 
cgit v1.2.3-70-g09d2


From 2b26a9e8b718fb595a0f40914741e4f7d7c19d14 Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Tue, 1 Oct 2019 18:52:53 -0400
Subject: UI changes: 3 buttons, bar, menu w/ alias

---
 src/client/views/EditableView.tsx                  | 13 ----------
 .../collections/CollectionMasonryViewFieldRow.tsx  | 25 +++++++++++++++----
 .../views/collections/CollectionStackingView.scss  | 10 +++++++-
 .../CollectionStackingViewFieldColumn.tsx          | 28 ++++++++++++++++------
 4 files changed, 51 insertions(+), 25 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4a77db3d6..58f5d662d 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -73,14 +73,6 @@ export class EditableView extends React.Component<EditableProps> {
         }
     }
 
-    collapseSection() {
-        if (this.props.HeadingObject) {
-            this._headingsHack++;
-            this.props.HeadingObject.setCollapsed(!this.props.HeadingObject.collapsed);
-            this.props.toggle && this.props.toggle();
-        }
-    }
-
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Tab") {
@@ -110,11 +102,6 @@ export class EditableView extends React.Component<EditableProps> {
             this._editing = true;
             this.props.isEditingCallback && this.props.isEditingCallback(true);
         }
-        if (e.ctrlKey) {
-            this._editing = false;
-            this.props.isEditingCallback && this.props.isEditingCallback(false);
-            this.collapseSection();
-        }
         e.stopPropagation();
     }
 
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index ad84b7635..8ba33b38d 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -40,6 +40,7 @@ interface CMVFieldRowProps {
 @observer
 export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowProps> {
     @observable private _background = "inherit";
+    @observable private _createAliasSelected: boolean = false;
 
     private _dropRef: HTMLDivElement | null = null;
     private dropDisposer?: DragManager.DragDropDisposer;
@@ -186,6 +187,15 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         }
     }
 
+    @action
+    collapseSection = () => {
+        if (this.props.headingObject) {
+            this._headingsHack++;
+            this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed);
+            this.toggleVisibility();
+        }
+    }
+
     startDrag = (e: PointerEvent) => {
         let [dx, dy] = this.props.screenToLocalTransform().transformDirection(e.clientX - this._startDragPosition.x, e.clientY - this._startDragPosition.y);
         if (Math.abs(dx) + Math.abs(dy) > this._sensitivity) {
@@ -223,12 +233,13 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         let [dx, dy] = this.props.screenToLocalTransform().transformDirection(e.clientX, e.clientY);
         this._startDragPosition = { x: dx, y: dy };
 
-        if (e.altKey) { //release alt key before dropping alias; also, things must have existed outside of the collection first in order to be in the alias...
+        if (this._createAliasSelected) {
             document.removeEventListener("pointermove", this.startDrag);
             document.addEventListener("pointermove", this.startDrag);
             document.removeEventListener("pointerup", this.pointerUp);
             document.addEventListener("pointerup", this.pointerUp);
         }
+        this._createAliasSelected = false;
     }
 
     renderColorPicker = () => {
@@ -261,12 +272,17 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         );
     }
 
+    @action
+    toggleAlias = () => {
+        this._createAliasSelected = true;
+    }
+
     renderMenu = () => {
         let selected = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
         return (
             <div className="collectionStackingView-optionPicker">
                 <div className="optionOptions">
-                    <div className="optionPicker">Create Alias</div>
+                    <div className="optionPicker" onClick={this.toggleAlias}>Create Alias</div>
                 </div>
             </div>
         );
@@ -320,6 +336,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         };
         let headingView = this.props.headingObject ?
             <div className="collectionStackingView-sectionHeader" ref={this._headerRef} >
+                <div className="collectionStackingView-collapseBar" onClick={this.collapseSection}></div>
                 <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
                     title={evContents === `NO ${key.toUpperCase()} VALUE` ?
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
@@ -333,7 +350,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                         <div className="collectionStackingView-sectionColor">
                             <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderColorPicker()}>
                                 <button className="collectionStackingView-sectionColorButton">
-                                    <FontAwesomeIcon icon="palette" size="sm" />
+                                    <FontAwesomeIcon icon="palette" size="lg" />
                                 </button>
                             </ Flyout >
                         </div>
@@ -345,7 +362,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                         </button>}
                     {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
                         <div className="collectionStackingView-sectionOptions">
-                            <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderMenu()}>
+                            <Flyout anchorPoint={anchorPoints.TOP_RIGHT} content={this.renderMenu()}>
                                 <button className="collectionStackingView-sectionOptionButton">
                                     <FontAwesomeIcon icon="ellipsis-v" size="lg"></FontAwesomeIcon>
                                 </button>
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index d3deff9f1..818db1669 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -102,12 +102,20 @@
         margin: auto;
     }
 
+    .collectionStackingView-collapseBar {
+        margin-left: 2px;
+        margin-right: 2px;
+        margin-top: 2px;
+        background: $main-accent;
+        height: 5px;
+    }
+
     .collectionStackingView-sectionHeader {
         text-align: center;
         margin-left: 2px;
         margin-right: 2px;
         margin-top: 10px;
-        background: gray;
+        background: $main-accent;
         // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
 
         .editableView-input {
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index e94a7d7f6..a8015472a 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -39,9 +39,7 @@ interface CSVFieldColumnProps {
 @observer
 export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldColumnProps> {
     @observable private _background = "inherit";
-    @observable private _selected: boolean = false;
-    @observable private _mouseX: number = 0;
-    @observable private _mouseY: number = 0;
+    @observable private _createAliasSelected: boolean = false;
 
     private _dropRef: HTMLDivElement | null = null;
     private dropDisposer?: DragManager.DragDropDisposer;
@@ -177,6 +175,15 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         }
     }
 
+    @action
+    collapseSection = () => {
+        if (this.props.headingObject) {
+            this._headingsHack++;
+            this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed);
+            this.toggleVisibility();
+        }
+    }
+
     startDrag = (e: PointerEvent) => {
         let [dx, dy] = this.props.screenToLocalTransform().transformDirection(e.clientX - this._startDragPosition.x, e.clientY - this._startDragPosition.y);
         if (Math.abs(dx) + Math.abs(dy) > this._sensitivity) {
@@ -214,12 +221,13 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         let [dx, dy] = this.props.screenToLocalTransform().transformDirection(e.clientX, e.clientY);
         this._startDragPosition = { x: dx, y: dy };
 
-        if (e.altKey) { //release alt key before dropping alias; also, things must have existed outside of the collection first in order to be in the alias...
+        if (this._createAliasSelected) {
             document.removeEventListener("pointermove", this.startDrag);
             document.addEventListener("pointermove", this.startDrag);
             document.removeEventListener("pointerup", this.pointerUp);
             document.addEventListener("pointerup", this.pointerUp);
         }
+        this._createAliasSelected = false;
     }
 
     renderColorPicker = () => {
@@ -252,14 +260,19 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         );
     }
 
+    @action
+    toggleAlias = () => {
+        this._createAliasSelected = true;
+    }
+
     renderMenu = () => {
         let selected = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
         return (
             <div className="collectionStackingView-optionPicker">
                 <div className="optionOptions">
-                    <div className="optionPicker">Create Alias</div>
+                    <div className={"optionPicker" + (selected === " active")} onClick={this.toggleAlias}>Create Alias</div>
                 </div>
-            </div>
+            </div >
         );
     }
 
@@ -307,6 +320,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         ((uniqueHeadings.length +
                             ((this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? 1 : 0)) || 1)
                 }}>
+                <div className="collectionStackingView-collapseBar" onClick={this.collapseSection}></div>
                 {/* the default bucket (no key value) has a tooltip that describes what it is.
                     Further, it does not have a color and cannot be deleted. */}
                 <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
@@ -334,7 +348,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         </button>}
                     {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
                         <div className="collectionStackingView-sectionOptions">
-                            <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderMenu()}>
+                            <Flyout anchorPoint={anchorPoints.TOP_RIGHT} content={this.renderMenu()}>
                                 <button className="collectionStackingView-sectionOptionButton">
                                     <FontAwesomeIcon icon="ellipsis-v" size="lg"></FontAwesomeIcon>
                                 </button>
-- 
cgit v1.2.3-70-g09d2


From c0055c5677489b4cc7896c6e0b36f4730d49b4eb Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Sun, 6 Oct 2019 14:47:22 -0400
Subject: indicator for create alias

---
 .../views/collections/CollectionMasonryViewFieldRow.tsx      | 12 ++++++++++--
 src/client/views/collections/CollectionStackingView.scss     |  3 +--
 .../views/collections/CollectionStackingViewFieldColumn.tsx  | 12 ++++++++++--
 3 files changed, 21 insertions(+), 6 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 8ba33b38d..e3d7fc481 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -74,6 +74,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
     @undoBatch
     @action
     rowDrop = (e: Event, de: DragManager.DropEvent) => {
+        this._createAliasSelected = false;
         if (de.data instanceof DragManager.DocumentDragData) {
             let key = StrCast(this.props.parent.props.Document.sectionFilter);
             let castedValue = this.getValue(this._heading);
@@ -130,6 +131,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @action
     headingChanged = (value: string, shiftDown?: boolean) => {
+        this._createAliasSelected = false;
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
         let castedValue = this.getValue(value);
         if (castedValue) {
@@ -150,6 +152,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @action
     changeColumnColor = (color: string) => {
+        this._createAliasSelected = false;
         if (this.props.headingObject) {
             this.props.headingObject.setColor(color);
             this._color = color;
@@ -158,6 +161,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @action
     pointerEnteredRow = () => {
+        this._createAliasSelected = false;
         if (SelectionManager.GetIsDragging()) {
             this._background = "#b4b4b4";
         }
@@ -165,12 +169,14 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @action
     pointerLeaveRow = () => {
+        this._createAliasSelected = false;
         this._background = "inherit";
         document.removeEventListener("pointermove", this.startDrag);
     }
 
     @action
     addDocument = (value: string, shiftDown?: boolean) => {
+        this._createAliasSelected = false;
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
         let newDoc = Docs.Create.TextDocument({ height: 18, width: 200, title: value });
         newDoc[key] = this.getValue(this.props.heading);
@@ -179,6 +185,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @action
     deleteRow = () => {
+        this._createAliasSelected = false;
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
         this.props.docList.forEach(d => d[key] = undefined);
         if (this.props.parent.sectionHeaders && this.props.headingObject) {
@@ -189,6 +196,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @action
     collapseSection = () => {
+        this._createAliasSelected = false;
         if (this.props.headingObject) {
             this._headingsHack++;
             this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed);
@@ -278,11 +286,11 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
     }
 
     renderMenu = () => {
-        let selected = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
+        let selected = this._createAliasSelected;
         return (
             <div className="collectionStackingView-optionPicker">
                 <div className="optionOptions">
-                    <div className="optionPicker" onClick={this.toggleAlias}>Create Alias</div>
+                    <div className={"optionPicker" + (selected === true ? " active" : "")} onClick={this.toggleAlias}>Create Alias</div>
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 818db1669..df3f7e70d 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -225,8 +225,7 @@
                     margin: 3px;
 
                     &.active {
-                        border: 2px solid white;
-                        box-shadow: 0 0 0 2px lightgray;
+                        color: red;
                     }
                 }
             }
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index a8015472a..fabe19d52 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -61,6 +61,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
     @undoBatch
     @action
     columnDrop = (e: Event, de: DragManager.DropEvent) => {
+        this._createAliasSelected = false;
         if (de.data instanceof DragManager.DocumentDragData) {
             let key = StrCast(this.props.parent.props.Document.sectionFilter);
             let castedValue = this.getValue(this._heading);
@@ -118,6 +119,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
 
     @action
     headingChanged = (value: string, shiftDown?: boolean) => {
+        this._createAliasSelected = false;
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
         let castedValue = this.getValue(value);
         if (castedValue) {
@@ -138,6 +140,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
 
     @action
     changeColumnColor = (color: string) => {
+        this._createAliasSelected = false;
         if (this.props.headingObject) {
             this.props.headingObject.setColor(color);
             this._color = color;
@@ -147,18 +150,21 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
     @action
     pointerEntered = () => {
         if (SelectionManager.GetIsDragging()) {
+            this._createAliasSelected = false;
             this._background = "#b4b4b4";
         }
     }
 
     @action
     pointerLeave = () => {
+        this._createAliasSelected = false;
         this._background = "inherit";
         document.removeEventListener("pointermove", this.startDrag);
     }
 
     @action
     addDocument = (value: string, shiftDown?: boolean) => {
+        this._createAliasSelected = false;
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
         let newDoc = Docs.Create.TextDocument({ height: 18, width: 200, title: value });
         newDoc[key] = this.getValue(this.props.heading);
@@ -167,6 +173,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
 
     @action
     deleteColumn = () => {
+        this._createAliasSelected = false;
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
         this.props.docList.forEach(d => d[key] = undefined);
         if (this.props.parent.sectionHeaders && this.props.headingObject) {
@@ -177,6 +184,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
 
     @action
     collapseSection = () => {
+        this._createAliasSelected = false;
         if (this.props.headingObject) {
             this._headingsHack++;
             this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed);
@@ -266,11 +274,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
     }
 
     renderMenu = () => {
-        let selected = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
+        let selected = this._createAliasSelected;
         return (
             <div className="collectionStackingView-optionPicker">
                 <div className="optionOptions">
-                    <div className={"optionPicker" + (selected === " active")} onClick={this.toggleAlias}>Create Alias</div>
+                    <div className={"optionPicker" + (selected === true ? " active" : "")} onClick={this.toggleAlias}>Create Alias</div>
                 </div>
             </div >
         );
-- 
cgit v1.2.3-70-g09d2


From 9c980548765016911c0f7624ac15c9692243dfb5 Mon Sep 17 00:00:00 2001
From: eeng5 <eleanor_eng@brown.edu>
Date: Sun, 6 Oct 2019 15:31:46 -0400
Subject: masonry alias fixed, collapse inidicator added

---
 src/client/views/collections/CollectionMasonryViewFieldRow.tsx     | 3 +--
 src/client/views/collections/CollectionStackingView.scss           | 6 ++++++
 src/client/views/collections/CollectionStackingViewFieldColumn.tsx | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index e3d7fc481..4505aeb70 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -161,7 +161,6 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @action
     pointerEnteredRow = () => {
-        this._createAliasSelected = false;
         if (SelectionManager.GetIsDragging()) {
             this._background = "#b4b4b4";
         }
@@ -344,7 +343,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         };
         let headingView = this.props.headingObject ?
             <div className="collectionStackingView-sectionHeader" ref={this._headerRef} >
-                <div className="collectionStackingView-collapseBar" onClick={this.collapseSection}></div>
+                <div className={"collectionStackingView-collapseBar" + (this.props.headingObject.collapsed === true ? " active" : "")} onClick={this.collapseSection}></div>
                 <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
                     title={evContents === `NO ${key.toUpperCase()} VALUE` ?
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index df3f7e70d..cf7da069c 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -108,6 +108,12 @@
         margin-top: 2px;
         background: $main-accent;
         height: 5px;
+
+        &.active {
+            margin-left: 0;
+            margin-right: 0;
+            background: red;
+        }
     }
 
     .collectionStackingView-sectionHeader {
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index fabe19d52..dccc9462a 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -328,7 +328,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         ((uniqueHeadings.length +
                             ((this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? 1 : 0)) || 1)
                 }}>
-                <div className="collectionStackingView-collapseBar" onClick={this.collapseSection}></div>
+                <div className={"collectionStackingView-collapseBar" + (this.props.headingObject.collapsed === true ? " active" : "")} onClick={this.collapseSection}></div>
                 {/* the default bucket (no key value) has a tooltip that describes what it is.
                     Further, it does not have a color and cannot be deleted. */}
                 <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
-- 
cgit v1.2.3-70-g09d2


From ee10ec0995fa67d27edb9032ba6fadf79bbdaaa1 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 10 Oct 2019 01:22:27 -0400
Subject: fixed document decorations for masonry view & scrolling.  cleaned up
 duplicated code a bit.

---
 .../collections/CollectionMasonryViewFieldRow.tsx  | 28 +-------
 .../views/collections/CollectionStackingView.scss  |  8 ++-
 .../views/collections/CollectionStackingView.tsx   | 75 +++++++++++++---------
 .../CollectionStackingViewFieldColumn.tsx          | 21 +-----
 4 files changed, 53 insertions(+), 79 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index b744ce4a5..5c1960d53 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -88,32 +88,6 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         }
     })
 
-    masonryChildren(docs: Doc[]) {
-        let parent = this.props.parent;
-        parent._docXfs.length = 0;
-        return docs.map((d, i) => {
-            let dref = React.createRef<HTMLDivElement>();
-            let layoutDoc = Doc.expandTemplateLayout(d, parent.props.DataDoc);
-            let width = () => (d.nativeWidth && !d.ignoreAspect && !parent.props.Document.fillColumn ? Math.min(d[WidthSym](), parent.columnWidth) : parent.columnWidth);/// (uniqueHeadings.length + 1);
-            let height = () => parent.getDocHeight(layoutDoc);
-            let dxf = () => parent.getDocTransform(layoutDoc as Doc, dref.current!);
-            let rowSpan = Math.ceil((height() + parent.gridGap) / parent.gridGap);
-            parent._docXfs.push({ dxf: dxf, width: width, height: height });
-            return <div className="collectionStackingView-masonryDoc" key={d[Id]} ref={dref} style={{ gridRowEnd: `span ${rowSpan}` }} >
-                {this.props.parent.getDisplayDoc(layoutDoc as Doc, d, dxf, width)}
-            </div>;
-        });
-    }
-
-    getDocTransform(doc: Doc, dref: HTMLDivElement) {
-        let { scale, translateX, translateY } = Utils.GetScreenTransform(dref);
-        let outerXf = Utils.GetScreenTransform(this.props.parent._masonryGridRef!);
-        let offset = this.props.parent.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY);
-        return this.props.parent.props.ScreenToLocalTransform().
-            translate(offset[0], offset[1]).
-            scale(NumCast(doc.width, 1) / this.props.parent.columnWidth);
-    }
-
     getValue = (value: string): any => {
         let parsed = parseInt(value);
         if (!isNaN(parsed)) {
@@ -402,7 +376,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                                             gridGap: this.props.parent.gridGap,
                                             gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""),
                                         }}>
-                                        {this.masonryChildren(this.props.docList)}
+                                        {this.props.parent.children(this.props.docList)}
                                         {this.props.parent.columnDragger}
                                     </div>
                                     {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ?
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 7bf8348ff..b31f0b8e3 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -7,12 +7,16 @@
 .collectionStackingView {
     display: flex;
 }
-
+.collectionStackingMasonry-cont {
+    position:relative;
+    height:100%;
+    width:100%;
+}
 .collectionStackingView,
 .collectionMasonryView {
     height: 100%;
     width: 100%;
-    position: relative;
+    position: absolute;
     top: 0;
     overflow-y: auto;
     flex-wrap: wrap;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index cde015152..0dfd1d9cf 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -29,12 +29,12 @@ import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow";
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
     _masonryGridRef: HTMLDivElement | null = null;
     _draggerRef = React.createRef<HTMLDivElement>();
-    @observable _heightMap = new Map<string, number>();
     _heightDisposer?: IReactionDisposer;
     _sectionFilterDisposer?: IReactionDisposer;
     _docXfs: any[] = [];
     _columnStart: number = 0;
-    @observable private cursor: CursorProperty = "grab";
+    @observable _heightMap = new Map<string, number>();
+    @observable _cursor: CursorProperty = "grab";
     @observable _scroll = 0; // used to force the document decoration to update when scrolling
     @computed get sectionHeaders() { return Cast(this.props.Document.sectionHeaders, listSpec(SchemaHeaderField)); }
     @computed get sectionFilter() { return StrCast(this.props.Document.sectionFilter); }
@@ -49,12 +49,26 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         return Math.min(this.props.PanelWidth() / (this.props as any).ContentScaling() - 2 * this.xMargin,
             this.isStackingView ? Number.MAX_VALUE : NumCast(this.props.Document.columnWidth, 250));
     }
-    @computed get NodeWidth() {
-        return this.props.PanelWidth();
-    }
+    @computed get NodeWidth() { return this.props.PanelWidth(); }
 
     childDocHeight(child: Doc) { return this.getDocHeight(Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, child).layout); }
 
+    children(docs: Doc[]) {
+        this._docXfs.length = 0;
+        return docs.map((d, i) => {
+            let pair = Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, d);
+            let width = () => Math.min(d.nativeWidth && !d.ignoreAspect && !this.props.Document.fillColumn ? d[WidthSym]() : Number.MAX_VALUE, this.columnWidth / this.numGroupColumns);
+            let height = () => this.getDocHeight(pair.layout);
+            let dref = React.createRef<HTMLDivElement>();
+            let dxf = () => this.getDocTransform(pair.layout!, dref.current!);
+            this._docXfs.push({ dxf: dxf, width: width, height: height });
+            let rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
+            let style = this.isStackingView ? { width: width(), margin: "auto", marginTop: i === 0 ? 0 : this.gridGap, height: height() } : { gridRowEnd: `span ${rowSpan}` };
+            return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} ref={dref} style={style} >
+                {this.getDisplayDoc(pair.layout as Doc, pair.data, dxf, width)}
+            </div>;
+        });
+    }
     @action
     setDocHeight = (key: string, sectionHeight: number) => {
         this._heightMap.set(key, sectionHeight);
@@ -177,19 +191,19 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         if (!d) return 0;
         let nw = NumCast(d.nativeWidth);
         let nh = NumCast(d.nativeHeight);
+        let wid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
         if (!d.ignoreAspect && !d.fitWidth && nw && nh) {
             let aspect = nw && nh ? nh / nw : 1;
-            let wid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
             if (!(d.nativeWidth && !d.ignoreAspect && this.props.Document.fillColumn)) wid = Math.min(d[WidthSym](), wid);
             return wid * aspect;
         }
-        return d.fitWidth ? this.props.PanelHeight() - 2 * this.yMargin : d[HeightSym]();
+        return d.fitWidth ? Math.min(wid * NumCast(d.scrollHeight, NumCast(d.nativeHeight)) / NumCast(d.nativeWidth, 1), this.props.PanelHeight() - 2 * this.yMargin) : d[HeightSym]();
     }
 
     columnDividerDown = (e: React.PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        runInAction(() => this.cursor = "grabbing");
+        runInAction(() => this._cursor = "grabbing");
         document.addEventListener("pointermove", this.onDividerMove);
         document.addEventListener('pointerup', this.onDividerUp);
         this._columnStart = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0];
@@ -204,13 +218,13 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
 
     @action
     onDividerUp = (e: PointerEvent): void => {
-        runInAction(() => this.cursor = "grab");
+        runInAction(() => this._cursor = "grab");
         document.removeEventListener("pointermove", this.onDividerMove);
         document.removeEventListener('pointerup', this.onDividerUp);
     }
 
     @computed get columnDragger() {
-        return <div className="collectionStackingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef} style={{ cursor: this.cursor, left: `${this.columnWidth + this.xMargin}px` }} >
+        return <div className="collectionStackingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef} style={{ cursor: this._cursor, left: `${this.columnWidth + this.xMargin}px` }} >
             <FontAwesomeIcon icon={"arrows-alt-h"} />
         </div>;
     }
@@ -375,26 +389,27 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             sections = entries.sort(this.sortFunc);
         }
         return (
-            <div className={this.isStackingView ? "collectionStackingView" : "collectionMasonryView"}
-                ref={this.createRef}
-                onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)}
-                onDrop={this.onDrop.bind(this)}
-                onContextMenu={this.onContextMenu}
-                onWheel={(e: React.WheelEvent) => e.stopPropagation()} >
-                {sections.map(section => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1]))}
-                {!this.showAddAGroup ? (null) :
-                    <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton"
-                        style={{ width: this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}>
-                        <EditableView {...editableViewProps} />
-                    </div>}
-                {this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.chromeStatus !== 'disabled' ? <Switch
-                    onChange={this.onToggle}
-                    onClick={this.onToggle}
-                    defaultChecked={this.props.ContainingCollectionDoc.chromeStatus !== 'view-mode'}
-                    checkedChildren="edit"
-                    unCheckedChildren="view"
-                /> : null}
-            </div>
+            <div className="collectionStackingMasonry-cont" >
+                <div className={this.isStackingView ? "collectionStackingView" : "collectionMasonryView"}
+                    ref={this.createRef}
+                    onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)}
+                    onDrop={this.onDrop.bind(this)}
+                    onContextMenu={this.onContextMenu}
+                    onWheel={(e: React.WheelEvent) => e.stopPropagation()} >
+                    {sections.map(section => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1]))}
+                    {!this.showAddAGroup ? (null) :
+                        <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton"
+                            style={{ width: this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}>
+                            <EditableView {...editableViewProps} />
+                        </div>}
+                    {this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.chromeStatus !== 'disabled' ? <Switch
+                        onChange={this.onToggle}
+                        onClick={this.onToggle}
+                        defaultChecked={this.props.ContainingCollectionDoc.chromeStatus !== 'view-mode'}
+                        checkedChildren="edit"
+                        unCheckedChildren="view"
+                    /> : null}
+                </div> </div>
         );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index cc7fe2aa1..e8627780d 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -73,25 +73,6 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             e.stopPropagation();
         }
     })
-
-    children(docs: Doc[]) {
-        let parent = this.props.parent;
-        parent._docXfs.length = 0;
-        return docs.map((d, i) => {
-            let pair = Doc.GetLayoutDataDocPair(parent.props.Document, parent.props.DataDoc, parent.props.fieldKey, d);
-            let width = () => Math.min(d.nativeWidth && !d.ignoreAspect && !parent.props.Document.fillColumn ? d[WidthSym]() : Number.MAX_VALUE, parent.columnWidth / parent.numGroupColumns);
-            let height = () => parent.getDocHeight(pair.layout);
-            let dref = React.createRef<HTMLDivElement>();
-            let dxf = () => parent.getDocTransform(pair.layout!, dref.current!);
-            parent._docXfs.push({ dxf: dxf, width: width, height: height });
-            let rowSpan = Math.ceil((height() + parent.gridGap) / parent.gridGap);
-            let style = parent.isStackingView ? { width: width(), margin: "auto", marginTop: i === 0 ? 0 : parent.gridGap, height: height() } : { gridRowEnd: `span ${rowSpan}` };
-            return <div className={`collectionStackingView-${parent.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} ref={dref} style={style} >
-                {parent.getDisplayDoc(pair.layout as Doc, pair.data, dxf, width)}
-            </div>;
-        });
-    }
-
     getValue = (value: string): any => {
         let parsed = parseInt(value);
         if (!isNaN(parsed)) {
@@ -373,7 +354,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                                     gridTemplateColumns: singleColumn ? undefined : templatecols,
                                     gridAutoRows: singleColumn ? undefined : "0px"
                                 }}>
-                                {this.children(this.props.docList)}
+                                {this.props.parent.children(this.props.docList)}
                                 {singleColumn ? (null) : this.props.parent.columnDragger}
                             </div>
                             {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ?
-- 
cgit v1.2.3-70-g09d2


From e36ee8c6af1105a5ff2dee704f44b575ca2b75de Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 21 Oct 2019 01:02:07 -0400
Subject: fixed masonry view resizing

---
 src/client/views/collections/CollectionStackingView.scss | 1 +
 src/client/views/collections/CollectionStackingView.tsx  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index b31f0b8e3..3f4b678c7 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -100,6 +100,7 @@
         grid-column-end: span 1;
         height: 100%;
         margin: auto;
+        display: inline-grid;
     }
 
     .collectionStackingView-masonrySection {
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 21c266b7e..1bb2d2f46 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -220,7 +220,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         let dragPos = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0];
         let delta = dragPos - this._columnStart;
         this._columnStart = dragPos;
-        this.layoutDoc.columnWidth = this.columnWidth + delta;
+        this.layoutDoc.columnWidth = Math.max(10, this.columnWidth + delta);
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From c97b98c165e318da787361b8fc11382b0b98afa4 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 24 Oct 2019 11:54:03 -0400
Subject: several fixes to audioboxes.

---
 src/client/documents/Documents.ts                  |  3 ++-
 .../collections/CollectionMasonryViewFieldRow.tsx  |  2 +-
 .../views/collections/CollectionStackingView.scss  |  5 ++++
 .../CollectionFreeFormLinkView.scss                |  1 +
 .../CollectionFreeFormLinkView.tsx                 |  3 +++
 src/client/views/nodes/AudioBox.scss               | 28 ++++++++++++++--------
 src/client/views/nodes/AudioBox.tsx                | 19 +++++++--------
 src/client/views/nodes/DocuLinkBox.tsx             |  2 +-
 src/client/views/nodes/FormattedTextBox.tsx        |  2 +-
 9 files changed, 40 insertions(+), 25 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f26594e04..d1fcabc4a 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -171,7 +171,7 @@ export namespace Docs {
             }],
             [DocumentType.AUDIO, {
                 layout: { view: AudioBox, dataField: data },
-                options: { height: 35, backgroundColor: "lightGray", borderRounding: "20%" }
+                options: { height: 35, backgroundColor: "lightGray" }
             }],
             [DocumentType.PDF, {
                 layout: { view: PDFBox, dataField: data },
@@ -714,6 +714,7 @@ export namespace DocUtils {
             linkDocProto.anchor2Timecode = target.doc.currentTimecode;
             linkDocProto.layoutKey1 = DocuLinkBox.LayoutString("anchor1");
             linkDocProto.layoutKey2 = DocuLinkBox.LayoutString("anchor2");
+            linkDocProto.borderRounding = "20";
             linkDocProto.width = linkDocProto.height = 0;
             linkDocProto.isBackground = true;
             linkDocProto.isButton = true;
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 4259e948b..0249b90b4 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -366,7 +366,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                         >
                             {headingView}
                             {collapsed ? (null) :
-                                < div >
+                                < div style={{ position: "relative" }}>
                                     <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`}
                                         ref={this._contRef}
                                         style={{
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 3f4b678c7..1ff2275d4 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -21,6 +21,11 @@
     overflow-y: auto;
     flex-wrap: wrap;
     transition: top .5s;
+    >div {
+        height: 100%;
+        position: relative;
+        display: inline-block;
+    }
 
     .collectionSchemaView-previewDoc {
         height: 100%;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
index 1f1bca2f2..75af11537 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
@@ -3,6 +3,7 @@
     opacity: 0.8;
     pointer-events: all;
     stroke-width: 3px;
+    transition: opacity 0.5s ease-in;
 }
 .collectionfreeformlinkview-linkCircle {
     stroke: rgb(0,0,0);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 962fe2a1c..837413842 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -17,10 +17,12 @@ export interface CollectionFreeFormLinkViewProps {
 @observer
 export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFormLinkViewProps> {
     @observable _alive: number = 0;
+    @observable _opacity: number = 1;
     @action
     componentDidMount() {
         this._alive = 1;
         setTimeout(this.rerender, 50);
+        setTimeout(action(() => this._opacity = 0.05), 50);
     }
     @action
     componentWillUnmount() {
@@ -42,6 +44,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         let pt1 = Utils.getNearestPointInPerimeter(a.left, a.top, a.width, a.height, b.left + b.width / 2, b.top + b.height / 2);
         let pt2 = Utils.getNearestPointInPerimeter(b.left, b.top, b.width, b.height, a.left + a.width / 2, a.top + a.height / 2);
         return (<line key="linkLine" className="collectionfreeformlinkview-linkLine"
+            style={{ opacity: this._opacity }}
             x1={`${pt1[0]}`} y1={`${pt1[1]}`}
             x2={`${pt2[0]}`} y2={`${pt2[1]}`} />);
     }
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index ccbf0d75f..3b19a6dba 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -44,22 +44,27 @@
             width:100%;
             height: 80%;
             position: relative;
+            padding-right: 5px;
             display: flex;
             .audiobox-playhead {
                 position: relative;
                 margin-top: auto;
                 margin-bottom: auto;
                 width: 25px;
+                padding: 2px;
             }
             .audiobox-timeline {
                 position:relative;
                 height:100%;
                 width:100%;
+                background: white;
+                border: gray solid 1px;
+                border-radius: 3px;
                 .audiobox-current {
                     width: 1px;
                     height:100%;
                     background-color: red;
-                    position: absolute;;
+                    position: absolute;
                 }
                 .audiobox-linker, .audiobox-linker-mini {
                     position:absolute;
@@ -72,10 +77,11 @@
                     background-color: transparent;
                     box-shadow: black 2px 2px 1px;
                     .docuLinkBox-cont {
-                        width:15px !important;
-                        height:15px !important;
-                        left: calc(100% - 15px) !important;
-                        top: calc(100% - 15px) !important;
+                        position: relative !important;
+                        height: 100%  !important;
+                        width: 100% !important;
+                        left:unset !important;
+                        top:unset !important;
                     }
                 }
                 .audiobox-linker-mini {
@@ -86,10 +92,11 @@
                     margin-left: -1;
                     margin-top: -2;
                     .docuLinkBox-cont {
-                        width:8px !important;
-                        height:8px !important;
-                        left: calc(100% - 8px) !important;
-                        top: calc(100% - 8px) !important;
+                        position: relative !important;
+                        height: 100%  !important;
+                        width: 100% !important;
+                        left:unset !important;
+                        top:unset !important;
                     }
                 }
                 .audiobox-linker:hover, .audiobox-linker-mini:hover {
@@ -98,7 +105,8 @@
                 .audiobox-marker-container, .audiobox-marker-minicontainer {
                     position:absolute;
                     width:10px;
-                    height:100%;
+                    height:90%;
+                    top:2.5%;
                     background:gray;
                     border-radius: 5px;
                     box-shadow: black 2px 2px 1px;
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index cc1c63d44..bd1caaf1b 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -12,12 +12,11 @@ import { RouteStore } from "../../../server/RouteStore";
 import { runInAction, observable, reaction, IReactionDisposer, computed, action } from "mobx";
 import { DateField } from "../../../new_fields/DateField";
 import { SelectionManager } from "../../util/SelectionManager";
-import { Doc, DocListCast, WidthSym } from "../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ContextMenu } from "../ContextMenu";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { DocumentManager } from "../../util/DocumentManager";
 import { DocumentView } from "./DocumentView";
 
 interface Window {
@@ -59,7 +58,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
                 scrollLinkId && DocListCast(this.dataDoc.links).filter(l => l[Id] === scrollLinkId).map(l => {
                     let la1 = l.anchor1 as Doc;
                     let linkTime = Doc.AreProtosEqual(la1, this.dataDoc) ? NumCast(l.anchor1Timecode) : NumCast(l.anchor2Timecode);
-                    setTimeout(() => this.playFrom(linkTime), 250);
+                    setTimeout(() => { this.playFrom(linkTime); Doc.linkFollowHighlight(l); }, 250);
                 });
                 scrollLinkId && Doc.SetInPlace(this.layoutDoc, "scrollToLinkID", undefined, false);
             }, { fireImmediately: true });
@@ -75,11 +74,9 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
     }
 
     timecodeChanged = () => {
-        const extensionDoc = this.extensionDoc;
         const htmlEle = this._ele;
-        const start = extensionDoc && DateCast(extensionDoc.recordingStart);
-        if (start && htmlEle) {
-            htmlEle && htmlEle.duration && htmlEle.duration !== Infinity && runInAction(() => this.dataDoc.duration = htmlEle.duration);
+        if (this._audioState === "recorded" && htmlEle) {
+            htmlEle.duration && htmlEle.duration !== Infinity && runInAction(() => this.dataDoc.duration = htmlEle.duration);
             DocListCast(this.dataDoc.links).map(l => {
                 let la1 = l.anchor1 as Doc;
                 let linkTime = NumCast(l.anchor2Timecode);
@@ -195,7 +192,7 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
     }
 
     setRef = (e: HTMLAudioElement | null) => {
-        e && e.addEventListener("timeupdate", action(() => this.Document.currentTimecode = e!.currentTime));
+        e && e.addEventListener("timeupdate", this.timecodeChanged);
         this._ele = e;
     }
 
@@ -225,13 +222,13 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
                     </button> :
                     <div className="audiobox-controls">
                         <div className="audiobox-player" onClick={this.onPlay}>
-                            <FontAwesomeIcon className="audiobox-playhead" icon={this._playing ? "pause" : "play"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
-                            <div className="audiobox-playhead" onClick={this.onStop}><FontAwesomeIcon className="audiobox-playhead" icon="stop" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
+                            <div className="audiobox-playhead"> <FontAwesomeIcon style={{ width: "100%" }} icon={this._playing ? "pause" : "play"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
+                            <div className="audiobox-playhead" onClick={this.onStop}><FontAwesomeIcon style={{ width: "100%" }} icon="stop" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /></div>
                             <div className="audiobox-timeline" onClick={e => e.stopPropagation()}
                                 onPointerDown={e => {
                                     if (e.button === 0 && !e.ctrlKey) {
                                         let rect = (e.target as any).getBoundingClientRect();
-                                        this._ele!.currentTime = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration);
+                                        this._ele!.currentTime = this.Document.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration);
                                         this.pause();
                                         e.stopPropagation();
                                     }
diff --git a/src/client/views/nodes/DocuLinkBox.tsx b/src/client/views/nodes/DocuLinkBox.tsx
index f2ab6fcd8..8f68effe8 100644
--- a/src/client/views/nodes/DocuLinkBox.tsx
+++ b/src/client/views/nodes/DocuLinkBox.tsx
@@ -73,7 +73,7 @@ export class DocuLinkBox extends DocComponent<FieldViewProps, DocLinkSchema>(Doc
         let c = StrCast(this.props.Document.backgroundColor, "lightblue");
         return <div className="docuLinkBox-cont" onPointerDown={this.onPointerDown} onClick={this.onClick} title={StrCast((this.props.Document[this.props.fieldKey === "anchor1" ? "anchor2" : "anchor1"]! as Doc).title)}
             ref={this._ref} style={{
-                background: c, width: "25px", left: `calc(${x}% - 12.5px)`, top: `calc(${y}% - 12.5px)`,
+                background: c, left: `calc(${x}% - 12.5px)`, top: `calc(${y}% - 12.5px)`,
                 transform: `scale(${hasAnchor ? 0.333 : 1 / this.props.ContentScaling()})`
             }} />;
     }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 566b698bd..cf55a10ba 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -192,7 +192,7 @@ export class FormattedTextBox extends DocExtendableComponent<(FieldViewProps & F
             }
 
             let tsel = this._editorView.state.selection.$from;
-            tsel.marks().filter(m => m.type === this._editorView!.state.schema.marks.user_mark).map(m => AudioBox.SetScrubTime(Math.max(0, m.attrs.modified * 5000 - 5000)));
+            tsel.marks().filter(m => m.type === this._editorView!.state.schema.marks.user_mark).map(m => AudioBox.SetScrubTime(Math.max(0, m.attrs.modified * 5000 - 1000)));
             this._applyingChange = true;
             this.extensionDoc && (this.extensionDoc.text = state.doc.textBetween(0, state.doc.content.size, "\n\n"));
             this.extensionDoc && (this.extensionDoc.lastModified = new DateField(new Date(Date.now())));
-- 
cgit v1.2.3-70-g09d2


From 93bbfe84f126c8f02ec2756b8bc236cb93c40d88 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 24 Oct 2019 19:43:46 -0400
Subject: some fixes for stacking view layouts

---
 .../collections/CollectionMasonryViewFieldRow.tsx  | 96 +++++++---------------
 .../views/collections/CollectionStackingView.scss  |  6 +-
 .../authentication/models/current_user_utils.ts    | 11 +--
 3 files changed, 39 insertions(+), 74 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 0249b90b4..d885f558e 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -20,6 +20,7 @@ import { anchorPoints, Flyout } from "../DocumentDecorations";
 import { EditableView } from "../EditableView";
 import { CollectionStackingView } from "./CollectionStackingView";
 import "./CollectionStackingView.scss";
+import { undo } from "prosemirror-history";
 
 library.add(faPalette);
 
@@ -40,27 +41,28 @@ interface CMVFieldRowProps {
 export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowProps> {
     @observable private _background = "inherit";
     @observable private _createAliasSelected: boolean = false;
+    @observable private _collapsed: boolean = false;
+    @observable private _headingsHack: number = 1;
+    @observable private _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading;
+    @observable private _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
 
-    private _dropRef: HTMLDivElement | null = null;
-    private dropDisposer?: DragManager.DragDropDisposer;
+    private _dropDisposer?: DragManager.DragDropDisposer;
     private _headerRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _startDragPosition: { x: number, y: number } = { x: 0, y: 0 };
     private _contRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _sensitivity: number = 16;
+    private _counter: number = 0;
 
-    @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading;
-    @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
 
     createRowDropRef = (ele: HTMLDivElement | null) => {
-        this._dropRef = ele;
-        this.dropDisposer && this.dropDisposer();
+        this._dropDisposer && this._dropDisposer();
         if (ele) {
-            this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.rowDrop.bind(this) } });
+            this._dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.rowDrop.bind(this) } });
         }
     }
 
     getTrueHeight = () => {
-        if (this.collapsed) {
+        if (this._collapsed) {
             this.props.setDocHeight(this._heading, 20);
         } else {
             let rawHeight = this._contRef.current!.getBoundingClientRect().height + 15; //+ 15 accounts for the group header
@@ -76,12 +78,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         if (de.data instanceof DragManager.DocumentDragData) {
             let key = StrCast(this.props.parent.props.Document.sectionFilter);
             let castedValue = this.getValue(this._heading);
-            if (castedValue) {
-                de.data.droppedDocuments.forEach(d => d[key] = castedValue);
-            }
-            else {
-                de.data.droppedDocuments.forEach(d => d[key] = undefined);
-            }
+            de.data.droppedDocuments.forEach(d => d[key] = castedValue);
             this.props.parent.drop(e, de);
             e.stopPropagation();
         }
@@ -89,15 +86,9 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     getValue = (value: string): any => {
         let parsed = parseInt(value);
-        if (!isNaN(parsed)) {
-            return parsed;
-        }
-        if (value.toLowerCase().indexOf("true") > -1) {
-            return true;
-        }
-        if (value.toLowerCase().indexOf("false") > -1) {
-            return false;
-        }
+        if (!isNaN(parsed)) return parsed;
+        if (value.toLowerCase().indexOf("true") > -1) return true;
+        if (value.toLowerCase().indexOf("false") > -1) return false;
         return value;
     }
 
@@ -131,12 +122,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         }
     }
 
-    @action
-    pointerEnteredRow = () => {
-        if (SelectionManager.GetIsDragging()) {
-            this._background = "#b4b4b4";
-        }
-    }
+    pointerEnteredRow = action(() => SelectionManager.GetIsDragging() && (this._background = "#b4b4b4"));
 
     @action
     pointerLeaveRow = () => {
@@ -154,8 +140,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         return this.props.parent.props.addDocument(newDoc);
     }
 
-    @action
-    deleteRow = () => {
+    deleteRow = undoBatch(action(() => {
         this._createAliasSelected = false;
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
         this.props.docList.forEach(d => d[key] = undefined);
@@ -163,7 +148,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
             let index = this.props.parent.sectionHeaders.indexOf(this.props.headingObject);
             this.props.parent.sectionHeaders.splice(index, 1);
         }
-    }
+    }));
 
     @action
     collapseSection = () => {
@@ -205,6 +190,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         document.removeEventListener("pointerup", this.pointerUp);
     }
 
+    @action
     headerDown = (e: React.PointerEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
@@ -251,48 +237,31 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         );
     }
 
-    @action
-    toggleAlias = () => {
-        this._createAliasSelected = true;
-    }
+    toggleAlias = action(() => this._createAliasSelected = true);
+    toggleVisibility = action(() => this._collapsed = !this._collapsed);
 
     renderMenu = () => {
         let selected = this._createAliasSelected;
-        return (
-            <div className="collectionStackingView-optionPicker">
-                <div className="optionOptions">
-                    <div className={"optionPicker" + (selected === true ? " active" : "")} onClick={this.toggleAlias}>Create Alias</div>
-                </div>
+        return (<div className="collectionStackingView-optionPicker">
+            <div className="optionOptions">
+                <div className={"optionPicker" + (selected === true ? " active" : "")} onClick={this.toggleAlias}>Create Alias</div>
+                <div className={"optionPicker" + (selected === true ? " active" : "")} onClick={this.deleteRow}>Delete</div>
             </div>
-        );
+        </div>);
     }
 
-    @observable private collapsed: boolean = false;
-
-    private toggleVisibility = action(() => {
-        this.collapsed = !this.collapsed;
-    });
-
-    @observable _headingsHack: number = 1;
-
     handleResize = (size: any) => {
-        this.counter += 1;
-        if (this.counter !== 1) {
+        if (++this._counter !== 1) {
             this.getTrueHeight();
         }
     }
 
-    private counter: number = 0;
 
     render() {
-        let cols = this.props.rows();
         let rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap))));
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
-        let templatecols = "";
-        let headings = this.props.headings();
         let heading = this._heading;
         let style = this.props.parent;
-        let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         let evContents = heading ? heading : this.props.type && this.props.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`;
         let headerEditableViewProps = {
             GetValue: () => evContents,
@@ -315,7 +284,6 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         };
         let headingView = this.props.headingObject ?
             <div className="collectionStackingView-sectionHeader" ref={this._headerRef} >
-                <div className={"collectionStackingView-collapseBar" + (this.props.headingObject.collapsed === true ? " active" : "")} onClick={this.collapseSection}></div>
                 <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
                     title={evContents === `NO ${key.toUpperCase()} VALUE` ?
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
@@ -334,16 +302,14 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                             </ Flyout >
                         </div>
                     }
-                    {evContents === `NO ${key.toUpperCase()} VALUE` ?
-                        (null) :
-                        <button className="collectionStackingView-sectionDelete" onClick={this.deleteRow}>
-                            <FontAwesomeIcon icon="trash" size="lg" />
-                        </button>}
+                    <button className="collectionStackingView-sectionDelete" onClick={this.collapseSection}>
+                        <FontAwesomeIcon icon={this._collapsed ? "chevron-down" : "chevron-up"} size="lg" />
+                    </button>
                     {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
                         <div className="collectionStackingView-sectionOptions">
                             <Flyout anchorPoint={anchorPoints.TOP_RIGHT} content={this.renderMenu()}>
                                 <button className="collectionStackingView-sectionOptionButton">
-                                    <FontAwesomeIcon icon="ellipsis-v" size="lg"></FontAwesomeIcon>
+                                    <FontAwesomeIcon icon="ellipsis-v" size="lg" />
                                 </button>
                             </Flyout>
                         </div>
@@ -351,7 +317,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                 </div>
             </div > : (null);
         const background = this._background; //to account for observables in Measure
-        const collapsed = this.collapsed;
+        const collapsed = this._collapsed;
         let chromeStatus = this.props.parent.props.Document.chromeStatus;
         return (
             <Measure offset onResize={this.handleResize}>
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 1ff2275d4..f5530ab26 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -22,9 +22,8 @@
     flex-wrap: wrap;
     transition: top .5s;
     >div {
-        height: 100%;
         position: relative;
-        display: inline-block;
+        display: block;
     }
 
     .collectionSchemaView-previewDoc {
@@ -227,7 +226,6 @@
             }
 
             .collectionStackingView-optionPicker {
-                width: 78px;
 
                 .optionOptions {
                     display: inline;
@@ -235,10 +233,10 @@
 
                 .optionPicker {
                     cursor: pointer;
-                    width: 20px;
                     height: 20px;
                     border-radius: 10px;
                     margin: 3px;
+                    width:max-content;
 
                     &.active {
                         color: red;
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index ee9794564..56ea5bfe1 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -71,7 +71,7 @@ export class CurrentUserUtils {
     }
 
     // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker.  when clicked, this panel will be displayed in the target container (ie, sidebarContainer)  
-    static setupCreatePanel(sidebarContainer: Doc, doc: Doc) {
+    static setupToolsPanel(sidebarContainer: Doc, doc: Doc) {
         // setup a masonry view of all he creators
         const dragCreators = Docs.Create.MasonryDocument(CurrentUserUtils.setupCreatorButtons(doc), {
             width: 500, autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons",
@@ -83,9 +83,9 @@ export class CurrentUserUtils {
         });
 
         return Docs.Create.ButtonDocument({
-            width: 35, height: 35, borderRounding: "50%", boxShadow: "2px 2px 1px", title: "Create", targetContainer: sidebarContainer,
+            width: 35, height: 35, borderRounding: "50%", boxShadow: "2px 2px 1px", title: "Tools", targetContainer: sidebarContainer,
             sourcePanel: Docs.Create.StackingDocument([dragCreators, color], {
-                width: 500, height: 800, chromeStatus: "disabled", title: "creator stack"
+                width: 500, height: 800, lockedPosition: true, chromeStatus: "disabled", title: "tools stack"
             }),
             onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"),
         });
@@ -125,6 +125,7 @@ export class CurrentUserUtils {
                 title: "search stack", ignoreClick: true
             }),
             targetContainer: sidebarContainer,
+            lockedPosition: true,
             onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
         });
     }
@@ -135,12 +136,12 @@ export class CurrentUserUtils {
         (doc.sidebarContainer as Doc).chromeStatus = "disabled";
         (doc.sidebarContainer as Doc).onClick = ScriptField.MakeScript("freezeSidebar()");
 
-        doc.CreateBtn = this.setupCreatePanel(doc.sidebarContainer as Doc, doc);
+        doc.ToolsBtn = this.setupToolsPanel(doc.sidebarContainer as Doc, doc);
         doc.LibraryBtn = this.setupLibraryPanel(doc.sidebarContainer as Doc, doc);
         doc.SearchBtn = this.setupSearchPanel(doc.sidebarContainer as Doc);
 
         // Finally, setup the list of buttons to display in the sidebar
-        doc.sidebarButtons = Docs.Create.StackingDocument([doc.SearchBtn as Doc, doc.LibraryBtn as Doc, doc.CreateBtn as Doc], {
+        doc.sidebarButtons = Docs.Create.StackingDocument([doc.SearchBtn as Doc, doc.LibraryBtn as Doc, doc.ToolsBtn as Doc], {
             width: 500, height: 80, boxShadow: "0 0", sectionFilter: "title", hideHeadings: true, ignoreClick: true,
             backgroundColor: "lightgrey", chromeStatus: "disabled", title: "library stack"
         });
-- 
cgit v1.2.3-70-g09d2


From 2786a2e4b33ff874f320697b89fecec3105df201 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 24 Oct 2019 22:55:57 -0400
Subject: fixed some stacking view layout.  added a miniHeader layout for
 stacks

---
 .../collections/CollectionMasonryViewFieldRow.tsx  | 74 ++++++++++++----------
 .../views/collections/CollectionSchemaView.scss    |  1 -
 .../views/collections/CollectionStackingView.scss  | 33 +++++++++-
 .../views/collections/CollectionStackingView.tsx   |  7 +-
 .../CollectionStackingViewFieldColumn.tsx          |  2 +-
 5 files changed, 77 insertions(+), 40 deletions(-)

(limited to 'src/client/views/collections/CollectionStackingView.scss')

diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index d885f558e..52ebfafd3 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -76,6 +76,8 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
     rowDrop = action((e: Event, de: DragManager.DropEvent) => {
         this._createAliasSelected = false;
         if (de.data instanceof DragManager.DocumentDragData) {
+            (this.props.parent.Document.dropConverter instanceof ScriptField) &&
+                this.props.parent.Document.dropConverter.script.run({ dragData: de.data });
             let key = StrCast(this.props.parent.props.Document.sectionFilter);
             let castedValue = this.getValue(this._heading);
             de.data.droppedDocuments.forEach(d => d[key] = castedValue);
@@ -282,40 +284,44 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
             toggle: this.toggleVisibility,
             color: this._color
         };
-        let headingView = this.props.headingObject ?
-            <div className="collectionStackingView-sectionHeader" ref={this._headerRef} >
-                <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
-                    title={evContents === `NO ${key.toUpperCase()} VALUE` ?
-                        `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
-                    style={{
-                        width: "100%",
-                        background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "lightgrey",
-                        color: "grey"
-                    }}>
-                    {<EditableView {...headerEditableViewProps} />}
-                    {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
-                        <div className="collectionStackingView-sectionColor">
-                            <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderColorPicker()}>
-                                <button className="collectionStackingView-sectionColorButton">
-                                    <FontAwesomeIcon icon="palette" size="lg" />
-                                </button>
-                            </ Flyout >
-                        </div>
-                    }
-                    <button className="collectionStackingView-sectionDelete" onClick={this.collapseSection}>
-                        <FontAwesomeIcon icon={this._collapsed ? "chevron-down" : "chevron-up"} size="lg" />
-                    </button>
-                    {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
-                        <div className="collectionStackingView-sectionOptions">
-                            <Flyout anchorPoint={anchorPoints.TOP_RIGHT} content={this.renderMenu()}>
-                                <button className="collectionStackingView-sectionOptionButton">
-                                    <FontAwesomeIcon icon="ellipsis-v" size="lg" />
-                                </button>
-                            </Flyout>
-                        </div>
-                    }
-                </div>
-            </div > : (null);
+        let headingView = this.props.parent.props.Document.miniHeaders ?
+            <div className="collectionStackingView-miniHeader" style={{ width: "100%" }}>
+                {<EditableView {...headerEditableViewProps} />}
+            </div> :
+            this.props.headingObject ?
+                <div className="collectionStackingView-sectionHeader" ref={this._headerRef} >
+                    <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
+                        title={evContents === `NO ${key.toUpperCase()} VALUE` ?
+                            `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
+                        style={{
+                            width: "100%",
+                            background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "lightgrey",
+                            color: "grey"
+                        }}>
+                        {<EditableView {...headerEditableViewProps} />}
+                        {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
+                            <div className="collectionStackingView-sectionColor">
+                                <Flyout anchorPoint={anchorPoints.CENTER_RIGHT} content={this.renderColorPicker()}>
+                                    <button className="collectionStackingView-sectionColorButton">
+                                        <FontAwesomeIcon icon="palette" size="lg" />
+                                    </button>
+                                </ Flyout >
+                            </div>
+                        }
+                        <button className="collectionStackingView-sectionDelete" onClick={this.collapseSection}>
+                            <FontAwesomeIcon icon={this._collapsed ? "chevron-down" : "chevron-up"} size="lg" />
+                        </button>
+                        {evContents === `NO  ${key.toUpperCase()} VALUE` ? (null) :
+                            <div className="collectionStackingView-sectionOptions">
+                                <Flyout anchorPoint={anchorPoints.TOP_RIGHT} content={this.renderMenu()}>
+                                    <button className="collectionStackingView-sectionOptionButton">
+                                        <FontAwesomeIcon icon="ellipsis-v" size="lg" />
+                                    </button>
+                                </Flyout>
+                            </div>
+                        }
+                    </div>
+                </div > : (null);
         const background = this._background; //to account for observables in Measure
         const collapsed = this._collapsed;
         let chromeStatus = this.props.parent.props.Document.chromeStatus;
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index e0cedc210..6a9392253 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -40,7 +40,6 @@
 
 .collectionSchemaView-previewRegion {
     position: relative;
-    background: $light-color;
     height: auto !important;
 
     .collectionSchemaView-previewDoc {
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index f5530ab26..29178b909 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -124,7 +124,38 @@
             background: red;
         }
     }
-
+    .collectionStackingView-miniHeader {
+        width: 100%;
+        .editableView-container-editing-oneLine {
+            min-height: 20px;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+        }
+        span::before , span::after{
+            content: "";
+            width: 50%;
+            border-top: dashed gray 1px;
+            position: relative;
+            display: inline-block;
+        }
+        span::before {
+            margin-right: 10px;
+        }
+        span::after{
+            margin-left: 10px;
+        }
+        span {
+            position: relative;
+            text-align: center;
+            white-space: nowrap;
+            overflow: visible;
+            width: 100%;
+            display: flex;
+            color:gray;
+            align-items: center;
+        }
+    }
     .collectionStackingView-sectionHeader {
         text-align: center;
         margin-left: 2px;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 96940acbc..7f0165ad4 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -44,7 +44,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     @computed get gridGap() { return NumCast(this.props.Document.gridGap, 10); }
     @computed get isStackingView() { return BoolCast(this.props.Document.singleColumn, true); }
     @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; }
-    @computed get showAddAGroup() { return (this.sectionFilter && this.props.ContainingCollectionDoc && (this.props.ContainingCollectionDoc.chromeStatus !== 'view-mode' && this.props.ContainingCollectionDoc.chromeStatus !== 'disabled')); }
+    @computed get showAddAGroup() { return (this.sectionFilter && (this.props.Document.chromeStatus !== 'view-mode' && this.props.Document.chromeStatus !== 'disabled')); }
     @computed get columnWidth() {
         return Math.min(this.props.PanelWidth() / (this.props as any).ContentScaling() - 2 * this.xMargin,
             this.isStackingView ? Number.MAX_VALUE : NumCast(this.props.Document.columnWidth, 250));
@@ -121,7 +121,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     return res;
                 } else {
                     let sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0);
-                    return this.props.ContentScaling() * (sum + (this.Sections.size ? 85 : -15));
+                    return this.props.ContentScaling() * (sum + (this.Sections.size ? (this.props.Document.miniHeaders ? 20 : 85) : -15));
                 }
             }
             return -1;
@@ -363,7 +363,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     }
 
     onToggle = (checked: Boolean) => {
-        this.props.ContainingCollectionDoc && (this.props.ContainingCollectionDoc.chromeStatus = checked ? "collapsed" : "view-mode");
+        this.props.Document.chromeStatus = checked ? "collapsed" : "view-mode";
     }
 
     onContextMenu = (e: React.MouseEvent): void => {
@@ -393,6 +393,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             let entries = Array.from(this.Sections.entries());
             sections = entries.sort(this.sortFunc);
         }
+        console.log("NUM = " + this.numGroupColumns);
         return (
             <div className="collectionStackingMasonry-cont" >
                 <div className={this.isStackingView ? "collectionStackingView" : "collectionMasonryView"}
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index fec3d90b9..b9d334b10 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -295,7 +295,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                 style={{
                     width: (style.columnWidth) /
                         ((uniqueHeadings.length +
-                            ((this.props.parent.props.ContainingCollectionDoc && this.props.parent.props.ContainingCollectionDoc.chromeStatus !== 'view-mode' && this.props.parent.props.ContainingCollectionDoc.chromeStatus !== 'disabled') ? 1 : 0)) || 1)
+                            ((this.props.parent.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.Document.chromeStatus !== 'disabled') ? 1 : 0)) || 1)
                 }}>
                 <div className={"collectionStackingView-collapseBar" + (this.props.headingObject.collapsed === true ? " active" : "")} onClick={this.collapseSection}></div>
                 {/* the default bucket (no key value) has a tooltip that describes what it is.
-- 
cgit v1.2.3-70-g09d2