updates

3 files changed, 67 insertions, 7 deletions

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 2f002736d..a77eb6b8a 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -131,9 +131,37 @@
         margin-left: -5;
     }
 
+    // Documents in stacking view
     .collectionStackingView-columnDoc {
-        display: inline-block;
-        margin: auto;
+        display: flex;
+        // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change 
+        position: relative;
+
+        &:hover {
+          .hoverButtons{
+            opacity: 1;
+          }
+        }
+
+        .hoverButtons {
+          display: flex;
+          opacity: 0;
+          position: absolute;
+          height: 100%;
+          left: -35px;
+          justify-content: center;
+          align-items: center;
+          padding: 0px 10px;
+
+          .buttonWrapper {
+            padding: 3px;
+            border-radius: 3px;
+            
+            &:hover {
+              background: rgba(0, 0, 0, 0.26);
+            }
+          }
+        }
     }
 
     .collectionStackingView-masonryDoc {
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()} >
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 58289a161..3e4e5bdcb 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -309,14 +309,16 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         </div>
                         {!this.props.chromeHidden && type !== DocumentType.PRES ?
                             <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
-                                style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
+                                style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10, marginLeft: 25 }}>
                                 <EditableView
                                     GetValue={returnEmptyString}
                                     SetValue={this.addNewTextDoc}
                                     textCallback={this.textCallback}
-                                    contents={"+ NEW"}
+                                    placeholder={"Type ':' for commands"}
+                                    contents={<FontAwesomeIcon icon={"plus"}/>}
                                     toggle={this.toggleVisibility}
-                                    menuCallback={this.menuCallback} />
+                                    menuCallback={this.menuCallback} 
+                                />
                             </div> : null}
                     </div>
             }