merging

6 files changed, 75 insertions, 18 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 3e7b0bd0f..25b1381fe 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAnchor, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Checkbox, Tooltip } from "@material-ui/core";
 import { intersection } from "lodash";
 import { action, autorun, computed, Lambda, observable } from "mobx";
@@ -17,6 +17,7 @@ import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, retu
 import { DocumentType } from "../documents/DocumentTypes";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { DocumentManager } from "../util/DocumentManager";
+import { LinkManager } from "../util/LinkManager";
 import { SelectionManager } from "../util/SelectionManager";
 import { SharingManager } from "../util/SharingManager";
 import { Transform } from "../util/Transform";
@@ -27,12 +28,10 @@ import { EditableView } from "./EditableView";
 import { InkStrokeProperties } from "./InkStrokeProperties";
 import { DocumentView, StyleProviderFunc } from "./nodes/DocumentView";
 import { KeyValueBox } from "./nodes/KeyValueBox";
-import { PresBox } from "./nodes/trails/PresBox";
 import { PropertiesButtons } from "./PropertiesButtons";
 import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector";
 import "./PropertiesView.scss";
 import { DefaultStyleProvider } from "./StyleProvider";
-import { LinkManager } from "../util/LinkManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 3c3d040d2..8aa813f1e 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..419b9a943 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));
@@ -79,17 +80,32 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         }
     }
 
+    // TODO: plj - these are the children
     children = (docs: Doc[]) => {
         TraceMobx();
         this._docXfs.length = 0;
+        // Go through each of the documents that are contained
         return docs.map((d, i) => {
             const height = () => this.getDocHeight(d);
             const width = () => this.getDocWidth(d);
             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 +291,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 +339,19 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
         </div>;
     }
 
+    // TODO: plj
+    @action
+    onPointerOver = (e: React.PointerEvent) => {
+      if (DragManager.docsBeingDragged.length){
+        console.log(DragManager.docsBeingDragged[0].title)
+      }
+    }
+
+    // TODO: plj - look at this
     @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 +403,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 +633,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 32424bdc8..1a27be764 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -315,22 +315,16 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         //TODO: would be great if there was additional space beyond the frame, so that you can actually see your
                         // bottom note
                             <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} />
-                                <EditableView
-                                    GetValue={returnEmptyString}
-                                    SetValue={this.addNewTextDoc}
-                                    textCallback={this.textCallback}
-                                    contents={"+ OLD"}
-                                    toggle={this.toggleVisibility}
-                                    menuCallback={this.menuCallback}
-                                    showMenuOnLoad={true} />
+                                    menuCallback={this.menuCallback} 
+                                />
                             </div> : null}
                     </div>
             }
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index fc1bcb8b9..34209ebc9 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -446,6 +446,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                 generatedDocuments.push(...await DocUtils.uploadFilesToDocs(files, options));
             }
             if (generatedDocuments.length) {
+                // Creating a dash document
                 const isFreeformView = this.props.Document._viewType === CollectionViewType.Freeform;
                 const set = !isFreeformView ? generatedDocuments :
                     generatedDocuments.length > 1 ? generatedDocuments.map(d => { DocUtils.iconify(d); return d; }) : [];
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index b30e8cc13..a93e1e8d3 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -167,6 +167,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     /**
+     * TODO: glr, pj - factor this logic into collectionStackingView
      * Function to drag and drop the pres element to a diferent location
      */
     //TODO: this is what you need to look into