"Rebased" Stanley's image upload changes

4 files changed, 102 insertions, 0 deletions

diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 5686ccfef..2bccde241 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -16,6 +16,7 @@ export enum CollectionViewType {
     Schema,
     Docking,
     Tree,
+    Stacking
 }
 
 export interface CollectionRenderProps {
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
new file mode 100644
index 000000000..803e680e5
--- /dev/null
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -0,0 +1,44 @@
+@import "../globalCssVariables";
+
+.collectionStackingView {
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow-y: scroll;
+    min-width: 250px;
+    border-width: 0;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
+    border-color: $light-color-secondary;
+    border-style: solid;
+    border-radius: 0 0 $border-radius $border-radius;
+    box-sizing: border-box;
+
+    .collectionStackingView-docView-container {
+        width: 45%;
+        margin: 5% 2.5%;
+        padding-left: 2.5%;
+        height: auto;
+    }
+
+    .collectionStackingView-flexCont {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .collectionStackingView-description {
+        font-size: 100%;
+        margin-bottom: 1vw;
+        padding: 10px;
+        height: 2vw;
+        width: 100%;
+        font-family: $sans-serif;
+        background: $dark-color;
+        color: $light-color;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
new file mode 100644
index 000000000..a1cb73123
--- /dev/null
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -0,0 +1,54 @@
+import React = require("react");
+import { observer } from "mobx-react";
+import { CollectionSubView } from "./CollectionSubView";
+import Measure from "react-measure";
+import { Doc, WidthSym, HeightSym } from "../../../new_fields/Doc";
+import { DocumentView } from "../nodes/DocumentView";
+import { Transform } from "../../util/Transform";
+import { emptyFunction, returnOne } from "../../../Utils";
+import "./CollectionStackingView.scss";
+import { runInAction, action, observable, computed } from "mobx";
+import { StrCast } from "../../../new_fields/Types";
+
+@observer
+export class CollectionStackingView extends CollectionSubView(doc => doc) {
+    getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform();
+
+    @action
+    moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => {
+        this.props.removeDocument(doc);
+        addDocument(doc);
+        return true;
+    }
+
+    render() {
+        const docs = this.childDocs;
+        return (
+            <div className="collectionStackingView" onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
+                <div className="collectionStackingView-description">{StrCast(this.props.Document.documentText, StrCast(this.props.Document.title, "stacking collection"))}</div>
+                <div className="collectionStackingView-flexCont">
+                    {docs.map(d => {
+                        return (<div className="collectionStackingView-docView-container">
+                            <DocumentView Document={d}
+                                addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
+                                moveDocument={this.moveDocument}
+                                ContainingCollectionView={this.props.CollectionView}
+                                isTopMost={false}
+                                ScreenToLocalTransform={this.getPreviewTransform}
+                                focus={emptyFunction}
+                                ContentScaling={returnOne}
+                                PanelWidth={d[WidthSym]}
+                                PanelHeight={d[HeightSym]}
+                                selectOnLoad={false}
+                                parentActive={this.props.active}
+                                addDocTab={this.props.addDocTab}
+                                bringToFront={emptyFunction}
+                                toggleMinimized={emptyFunction}
+                                whenActiveChanged={this.props.active} />
+                        </div>);
+                    })}
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index bfdef8e8c..39c8af4ab 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -12,6 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionTreeView } from "./CollectionTreeView";
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
+import { CollectionStackingView } from './CollectionStackingView';
 export const COLLECTION_BORDER_WIDTH = 2;
 
 library.add(faTh);
@@ -31,6 +32,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
             case CollectionViewType.Schema: return (<CollectionSchemaView {...props} CollectionView={this} />);
             case CollectionViewType.Docking: return (<CollectionDockingView {...props} CollectionView={this} />);
             case CollectionViewType.Tree: return (<CollectionTreeView {...props} CollectionView={this} />);
+            case CollectionViewType.Stacking: return (<CollectionStackingView {...props} CollectionView={this} />);
             case CollectionViewType.Freeform:
             default:
                 return (<CollectionFreeFormView {...props} CollectionView={this} />);
@@ -48,6 +50,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
             }
             ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "th-list" });
             ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
+            ContextMenu.Instance.addItem({ description: "Stacking", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Stacking), icon: "th-list" });
         }
     }