From bdccc7c147dbb985bff5286e318718e48fd7cc62 Mon Sep 17 00:00:00 2001
From: Geireann <60007097+geireann@users.noreply.github.com>
Date: Tue, 15 Feb 2022 16:06:18 -0500
Subject: updates

---
 .../views/collections/CollectionStackingView.tsx   | 34 ++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index cdc680a08..ad3f3b217 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -65,6 +65,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
     @computed get isStackingView() { return (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking; }
     @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; }
     @computed get showAddAGroup() { return this.pivotField && !this.chromeHidden; }
+    // columnWidth handles the margin on the left and right side of the documents
     @computed get columnWidth() {
         return Math.min(this.props.PanelWidth() - 2 * this.xMargin,
             this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this.props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250));
@@ -88,8 +89,21 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
             const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
             return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} style={style} >
+                <div className="hoverButtons">
+                  {/* We'll want to add an onPointerDown that uses DragManager.DocumentDragData
+                   -- we also want to remember to preventDefault (so other drag events are not recognized over this one)
+                   -- Design discussion as to whether we want dragging to be on the document itself or with a drag button
+                   -- Do we want clicking on this button to do anything as well?
+                   -- Design Question: Schema view also has the notion of a drag manager (different from this one), do we want
+                   the same functionality?
+                   -- Problem: This only shows when the outer container is selected...
+                  */}
+                  <div className="buttonWrapper">
+                    <FontAwesomeIcon icon={"grip-vertical"} onPointerDown={e => e.stopPropagation()} />
+                  </div>
+                </div>
                 {this.getDisplayDoc(d, width)}
-            </div>;
+            </div>
         });
     }
     @action
@@ -275,7 +289,13 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
     getDocWidth(d?: Doc) {
         if (!d) return 0;
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
-        const maxWidth = this.columnWidth / this.numGroupColumns;
+        // TODO: pj - replace with a better way to calculate the margin
+        let margin = 25;
+        d.margin = 25;
+        if (this.columnWidth < 150){
+          margin = 0;
+        }
+        const maxWidth = (this.columnWidth / this.numGroupColumns) - (margin * 2);
         if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) {
             return Math.min(d[WidthSym](), maxWidth);
         }
@@ -317,9 +337,17 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         </div>;
     }
 
+    @action
+    onPointerOver = (e: React.PointerEvent) => {
+      if (DragManager.docsBeingDragged.length){
+        console.log(DragManager.docsBeingDragged[0].title)
+      }
+    }
+
     @undoBatch
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+        console.log('drop')
         const where = [de.x, de.y];
         let dropInd = -1;
         let dropAfter = 0;
@@ -371,6 +399,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
     @undoBatch
     @action
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
+        console.log('external drop')
         const where = [e.clientX, e.clientY];
         let targInd = -1;
         this._docXfs.map((cd, i) => {
@@ -600,6 +629,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                             pointerEvents: this.backgroundEvents ? "all" : undefined
                         }}
                         onScroll={action(e => this._scroll = e.currentTarget.scrollTop)}
+                        onPointerOver={this.onPointerOver}
                         onDrop={this.onExternalDrop.bind(this)}
                         onContextMenu={this.onContextMenu}
                         onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} >
-- 
cgit v1.2.3-70-g09d2