merged with master, resolved conflicts and reformatted workspace menu

17 files changed, 898 insertions, 446 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index b5cafe681..19788447e 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -212,6 +212,12 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 stack.remove();
                 //}
             }));
+        stack.header.controlsContainer.find('.lm_popout') //get the close icon
+            .off('click') //unbind the current click handler
+            .click(action(function () {
+                var url = "http://localhost:1050/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId;
+                let win = window.open(url, stack.contentItems[0].tab.title, "width=300,height=400");
+            }));
     }
 
     render() {
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 28242c939..11addc5a1 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,35 +1,56 @@
+@import "../global_variables";
+
 .collectionfreeformview-container {
-    
-    .collectionfreeformview > .jsx-parser{
-        position:absolute;
-        height: 100%;
-        width: 100%;
-    }
-    border-style: solid;
-    box-sizing: border-box;
-    position: relative;
+  .collectionfreeformview > .jsx-parser {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
+  //nested freeform views
+  // .collectionfreeformview-container {
+    // background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px),
+    //   linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px);
+    // background-size: 30px 30px;
+  // }
+
+  border: 0px solid $light-color-secondary;
+  border-radius: $border-radius;
+  box-sizing: border-box;
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
+  .collectionfreeformview {
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    .collectionfreeformview {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width:100%;
-        height: 100%;
-    }
-}
-.collectionfreeformview-marquee{
-    border-style: dashed;
-    box-sizing: border-box;
-    position: absolute;
-    border-width: 1px;
-    border-color: black;
+  }
 }
 .collectionfreeformview-overlay {
+  .collectionfreeformview > .jsx-parser {
+    position: absolute;
+    height: 100%;
+  }
+  .formattedTextBox-cont {
+    background: $light-color-secondary;
+  }
 
+  position:absolute;
+  border: 0px solid transparent;
+  border-radius: $border-radius;
+  overflow: hidden;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  .collectionfreeformview {
     .collectionfreeformview > .jsx-parser{
         position:absolute;
         height: 100%;
@@ -38,37 +59,39 @@
         background:yellow;
     }
         
-    border-style: solid;
-    box-sizing: border-box;
+    // overflow: hidden;
+    // border-style: solid;
+    // box-sizing: border-box;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    .collectionfreeformview {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width:100%;
-        height: 100%;
-    }
+  }
 }
 
+// selection border...?
 .border {
-    border-style: solid;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
+  border-style: solid;
+  box-sizing: border-box;
+  width: 98%;
+  height: 98%;
+  border-radius: $border-radius;
 }
 
 //this is an animation for the blinking cursor!
 @keyframes blink {
-	0% {opacity: 0}
-	49%{opacity: 0}
-	50% {opacity: 1}
+  0% {
+    opacity: 0;
+  }
+  49% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
 #prevCursor {
-    animation: blink 1s infinite;
-}
\ No newline at end of file
+  animation: blink 1s infinite;
+}
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 0c74d1852..bb28dd20a 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -5,46 +5,74 @@ import { FieldWaiting } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { TextField } from "../../../fields/TextField";
-import { Documents } from "../../documents/Documents";
 import { DragManager } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { CollectionView } from "../collections/CollectionView";
 import { InkingCanvas } from "../InkingCanvas";
+import { AudioBox } from "../nodes/AudioBox";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import { KeyValueBox } from "../nodes/KeyValueBox";
 import { PDFBox } from "../nodes/PDFBox";
+import { VideoBox } from "../nodes/VideoBox";
 import { WebBox } from "../nodes/WebBox";
 import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
+import { MarqueeView } from "./MarqueeView";
+import { PreviewCursor } from "./PreviewCursor";
 import React = require("react");
-import { SelectionManager } from "../../util/SelectionManager";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
-    private _canvasRef = React.createRef<HTMLDivElement>();
-    @observable
-    private _lastX: number = 0;
-    @observable
-    private _lastY: number = 0;
+    public _canvasRef = React.createRef<HTMLDivElement>();
     private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type)
 
-    @observable
-    private _downX: number = 0;
-    @observable
-    private _downY: number = 0;
+    public addLiveTextBox = (newBox: Document) => {
+        // mark this collection so that when the text box is created we can send it the SelectOnLoad prop to focus itself
+        this._selectOnLoaded = newBox.Id;
+        //set text to be the typed key and get focus on text box
+        this.props.addDocument(newBox);
+        //remove cursor from screen
+        this.PreviewCursorVisible = false;
+    }
+
+    public selectDocuments = (docs: Document[]) => {
+        this.props.CollectionView.SelectedDocs.length = 0;
+        docs.map(d => this.props.CollectionView.SelectedDocs.push(d.Id));
+    }
+
+    public getActiveDocuments = () => {
+        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1);
+        const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
+        let active: Document[] = [];
+        if (lvalue && lvalue != FieldWaiting) {
+            lvalue.Data.map(doc => {
+                var page = doc.GetNumber(KeyStore.Page, -1);
+                if (page == curPage || page == -1) {
+                    active.push(doc);
+                }
+            })
+        }
+
+        return active;
+    }
 
     //determines whether the blinking cursor for indicating whether a text will be made on key down is visible
-    @observable
-    private _previewCursorVisible: boolean = false;
+    @observable public PreviewCursorVisible: boolean = false;
+    @observable public MarqueeVisible = false;
+    @observable public DownX: number = 0;
+    @observable public DownY: number = 0;
+    @observable private _lastX: number = 0;
+    @observable private _lastY: number = 0;
 
     @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
     @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
@@ -72,41 +100,34 @@ export class CollectionFreeFormView extends CollectionViewBase {
         }
     }
 
-    @observable
-    _marquee = false;
+
+    @action
+    cleanupInteractions = () => {
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        this.MarqueeVisible = false;
+    }
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if (((e.button === 2 && this.props.active()) || !e.defaultPrevented) &&
-            (!this.isAnnotationOverlay || this.zoomScaling != 1 || e.button == 0)) {
+        this.PreviewCursorVisible = false;
+        if ((e.button === 2 && this.props.active() && (!this.isAnnotationOverlay || this.zoomScaling != 1)) || e.button == 0) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
-            this._lastX = e.pageX;
-            this._lastY = e.pageY;
-            this._downX = e.pageX;
-            this._downY = e.pageY;
+            this._lastX = this.DownX = e.pageX;
+            this._lastY = this.DownY = e.pageY;
         }
     }
 
     @action
     onPointerUp = (e: PointerEvent): void => {
-        if (this._marquee) {
-            document.removeEventListener("keydown", this.marqueeCommand);
-        }
         e.stopPropagation();
 
-        if (this._marquee) {
-            if (!e.shiftKey) {
-                SelectionManager.DeselectAll();
-            }
-            var selectedDocs = this.marqueeSelect();
-            selectedDocs.map(s => this.props.CollectionView.SelectedDocs.push(s.Id));
-        }
-        else if (!this._marquee && Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+        if (Math.abs(this.DownX - e.clientX) < 4 && Math.abs(this.DownY - e.clientY) < 4) {
             //show preview text cursor on tap
-            this._previewCursorVisible = true;
+            this.PreviewCursorVisible = true;
             //select is not already selected
             if (!this.props.isSelected()) {
                 this.props.select(false);
@@ -116,97 +137,31 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     @action
-    cleanupInteractions = () => {
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        this._marquee = false;
-    }
-
-    intersectRect(r1: { left: number, right: number, top: number, bottom: number },
-        r2: { left: number, right: number, top: number, bottom: number }) {
-        return !(r2.left > r1.right ||
-            r2.right < r1.left ||
-            r2.top > r1.bottom ||
-            r2.bottom < r1.top);
-    }
-
-    marqueeSelect() {
-        this.props.CollectionView.SelectedDocs.length = 0;
-        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
-        let p = this.getTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
-        let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
-        let selRect = { left: p[0], top: p[1], right: p[0] + v[0], bottom: p[1] + v[1] }
-
-        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
-        const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
-        let selection: Document[] = [];
-        if (lvalue && lvalue != FieldWaiting) {
-            lvalue.Data.map(doc => {
-                var page = doc.GetNumber(KeyStore.Page, 0);
-                if (page == curPage || page == 0) {
-                    var x = doc.GetNumber(KeyStore.X, 0);
-                    var y = doc.GetNumber(KeyStore.Y, 0);
-                    var w = doc.GetNumber(KeyStore.Width, 0);
-                    var h = doc.GetNumber(KeyStore.Height, 0);
-                    if (this.intersectRect({ left: x, top: y, right: x + w, bottom: y + h }, selRect))
-                        selection.push(doc)
-                }
-            })
-        }
-        return selection;
-    }
-
-    @action
     onPointerMove = (e: PointerEvent): void => {
         if (!e.cancelBubble && this.props.active()) {
-            e.stopPropagation();
-            e.preventDefault();
-            let wasMarquee = this._marquee;
-            this._marquee = e.buttons != 2 && !e.altKey && !e.metaKey;
-            if (this._marquee && !wasMarquee) {
-                this._previewCursorVisible = false;
-                document.addEventListener("keydown", this.marqueeCommand);
+            if (e.buttons == 1 && !e.altKey && !e.metaKey) {
+                this.MarqueeVisible = true;
             }
-
-            if (!this._marquee) {
+            if (this.MarqueeVisible) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+            else if ((!this.isAnnotationOverlay || this.zoomScaling != 1) && !e.shiftKey) {
                 let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
                 let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
                 let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
-                this._previewCursorVisible = false;
                 this.SetPan(x - dx, y - dy);
+                this._lastX = e.pageX;
+                this._lastY = e.pageY;
+                e.stopPropagation();
+                e.preventDefault();
             }
         }
-        this._lastX = e.pageX;
-        this._lastY = e.pageY;
-    }
-
-    @action
-    marqueeCommand = (e: KeyboardEvent) => {
-        if (e.key == "Backspace") {
-            this.marqueeSelect().map(d => this.props.removeDocument(d));
-            this.cleanupInteractions();
-        }
-        if (e.key == "c") {
-            let p = this.getTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
-            let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
-
-            let selected = this.marqueeSelect().map(m => m);
-            this.marqueeSelect().map(d => this.props.removeDocument(d));
-            //setTimeout(() => {
-            this.props.CollectionView.addDocument(Documents.FreeformDocument(selected.map(d => {
-                d.SetNumber(KeyStore.X, d.GetNumber(KeyStore.X, 0) - p[0] - v[0] / 2);
-                d.SetNumber(KeyStore.Y, d.GetNumber(KeyStore.Y, 0) - p[1] - v[1] / 2);
-                d.SetNumber(KeyStore.Page, this.props.Document.GetNumber(KeyStore.Page, 0));
-                d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0));
-                return d;
-            }), { x: p[0], y: p[1], panx: 0, pany: 0, width: v[0], height: v[1], title: "a nested collection" }));
-            // }, 100);
-            this.cleanupInteractions();
-        }
     }
 
     @action
     onPointerWheel = (e: React.WheelEvent): void => {
+        this.props.select(false);
         e.stopPropagation();
         e.preventDefault();
         let coefficient = 1000;
@@ -242,7 +197,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     private SetPan(panX: number, panY: number) {
         var x1 = this.getLocalTransform().inverse().Scale;
-        var x2 = this.getTransform().inverse().Scale;
         const newPanX = Math.min((1 - 1 / x1) * this.nativeWidth, Math.max(0, panX));
         const newPanY = Math.min((1 - 1 / x1) * this.nativeHeight, Math.max(0, panY));
         this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
@@ -259,24 +213,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     @action
-    onKeyDown = (e: React.KeyboardEvent<Element>) => {
-        //if not these keys, make a textbox if preview cursor is active!
-        // if (!e.ctrlKey && !e.altKey) {
-        //     if (this._previewCursorVisible) {
-        //         //make textbox and add it to this collection
-        //         let [x, y] = this.getTransform().transformPoint(this._downX, this._downY); (this._downX, this._downY);
-        //         let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
-        //         // mark this collection so that when the text box is created we can send it the SelectOnLoad prop to focus itself
-        //         this._selectOnLoaded = newBox.Id;
-        //         //set text to be the typed key and get focus on text box
-        //         this.props.CollectionView.addDocument(newBox);
-        //         //remove cursor from screen
-        //         this._previewCursorVisible = false;
-        //     }
-        // }
-    }
-
-    @action
     bringToFront(doc: Document) {
         const { fieldKey: fieldKey, Document: Document } = this.props;
 
@@ -317,7 +253,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @computed
     get views() {
-        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
+        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1);
         const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
         if (lvalue && lvalue != FieldWaiting) {
             return lvalue.Data.map(doc => {
@@ -344,7 +280,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, PDFBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
                 bindings={this.props.bindings}
                 jsx={this.backgroundLayout}
                 showWarnings={true}
@@ -355,7 +291,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get overlayView() {
         return !this.overlayLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, PDFBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox }}
                 bindings={this.props.bindings}
                 jsx={this.overlayLayout}
                 showWarnings={true}
@@ -364,28 +300,17 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).translate(-this.centeringShiftX, -this.centeringShiftY).transform(this.getLocalTransform())
+    getMarqueeTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH)
     getLocalTransform = (): Transform => Transform.Identity.scale(1 / this.scale).translate(this.panX, this.panY);
     noScaling = () => 1;
 
     //when focus is lost, this will remove the preview cursor
     @action
-    onBlur = (e: React.FocusEvent<HTMLDivElement>): void => {
-        this._previewCursorVisible = false;
+    onBlur = (): void => {
+        this.PreviewCursorVisible = false;
     }
 
     render() {
-        //determines whether preview text cursor should be visible (ie when user taps this collection it should)
-        let cursor = null;
-        if (this._previewCursorVisible) {
-            //get local position and place cursor there!
-            let [x, y] = this.getTransform().transformPoint(this._downX, this._downY);
-            cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
-        }
-
-        let p = this.getTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
-        let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
-        var marquee = this._marquee ? <div className="collectionfreeformview-marquee" style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, width: `${Math.abs(v[0])}`, height: `${Math.abs(v[1])}` }}></div> : (null);
-
         let [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
 
         const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
@@ -397,7 +322,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
         return (
             <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`}
                 onPointerDown={this.onPointerDown}
-                onKeyPress={this.onKeyDown}
                 onWheel={this.onPointerWheel}
                 onDrop={this.onDrop.bind(this)}
                 onDragOver={this.onDragOver}
@@ -410,12 +334,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     ref={this._canvasRef}>
                     {this.backgroundView}
                     <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} />
-                    {cursor}
+                    <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox} getTransform={this.getTransform} />
                     {this.views}
-                    {marquee}
                 </div>
+                <MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments}
+                    addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
+                    getMarqueeTransform={this.getMarqueeTransform} getTransform={this.getTransform} />
                 {this.overlayView}
             </div>
         );
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss
new file mode 100644
index 000000000..0144625c1
--- /dev/null
+++ b/src/client/views/collections/CollectionPDFView.scss
@@ -0,0 +1,27 @@
+.collectionPdfView-buttonTray {
+    top : 25px;
+    left : 20px;
+    position: relative; 
+    transform-origin: left top;
+    position: absolute;
+}
+.collectionPdfView-cont{
+    width: 100%;
+    height: 100%;
+    position: absolute; 
+    
+}
+.collectionPdfView-backward {
+    color : white;
+    top :0px;
+    left : 0px;
+    position: absolute;
+    background-color: rgba(50, 50, 50, 0.2);
+}
+.collectionPdfView-forward {
+    color : white;
+    top :0px;
+    left : 35px;
+    position: absolute;
+    background-color: rgba(50, 50, 50, 0.2);
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index f22c07060..124d82c8b 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -1,10 +1,11 @@
-import { action, computed } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ContextMenu } from "../ContextMenu";
 import { CollectionView, CollectionViewType } from "./CollectionView";
 import { CollectionViewProps } from "./CollectionViewBase";
+import "./CollectionPDFView.scss"
 import React = require("react");
 import { FieldId } from "../../../fields/Field";
 
@@ -18,22 +19,23 @@ export class CollectionPDFView extends React.Component<CollectionViewProps> {
                     isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
     }
 
-    public SelectedDocs: FieldId[] = []
-    @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0;
-    @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0;
+    private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, -1); }
+    private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); }
+    @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : -1;
+    @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : -1;
 
-    @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); }
-    @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); }
-    @computed private get uIButtons() {
+    private get uIButtons() {
+        let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]);
         return (
-            <div className="pdfBox-buttonTray" key="tray">
-                <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button>
-                <button className="pdfButton" onClick={this.onPageForward}>{">"}</button>
+            <div className="collectionPdfView-buttonTray" key="tray" style={{ transform: `scale(${scaling}, ${scaling})` }}>
+                <button className="collectionPdfView-backward" onClick={this.onPageBack}>{"<"}</button>
+                <button className="collectionPdfView-forward" onClick={this.onPageForward}>{">"}</button>
             </div>);
     }
 
     // "inherited" CollectionView API starts here...
-
+    @observable
+    public SelectedDocs: FieldId[] = []
     public active: () => boolean = () => CollectionView.Active(this);
 
     addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); }
@@ -49,7 +51,7 @@ export class CollectionPDFView extends React.Component<CollectionViewProps> {
     get subView(): any { return CollectionView.SubView(this); }
 
     render() {
-        return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
+        return (<div className="collectionPdfView-cont" onContextMenu={this.specificContextMenu}>
             {this.subView}
             {this.props.isSelected() ? this.uIButtons : (null)}
         </div>)
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 88a3b73d4..0d615dc01 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,198 +1,162 @@
+@import "../global_variables";
+
 .collectionSchemaView-container {
-    border-style: solid;
+  border: 1px solid $intermediate-color;
+  border-radius: $border-radius;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+.collectionSchemaView-content {
+    position: absolute;  
+    height:100%;
+    width:100%;
+    overflow:auto;
+}
+  .collectionSchemaView-previewRegion {
+    position: relative;
+    background: $light-color;
+    float: left;
+    height: 100%;
+  }
+  .collectionSchemaView-previewHandle {
+    position: absolute;
+    height: 37px;
+    width: 20px;
+    z-index: 20;
+    right: 0;
+    top: 0;
+    background: $main-accent;
+  }
+  .collectionSchemaView-dividerDragger {
+    position: relative;
     box-sizing: border-box;
+    border-left: 1px solid $intermediate-color;
+    border-right: 1px solid $intermediate-color;
+    float: left;
+    height: 100%;
+  }
+  .collectionSchemaView-tableContainer {
+    position: relative;
+    float: left;
+    height: 100%;
+  }
+
+  .ReactTable {
     position: absolute;
+    // display: inline-block;
+    // overflow: auto;
     width: 100%;
     height: 100%;
-    .collectionSchemaView-previewRegion {
-        position: relative; 
-        background: black; 
-        float: left; 
-        height: 100%;
-    }
-    .collectionSchemaView-previewHandle {
-        position: absolute;
-        height: 37px;
-        width: 20px; 
-        z-index: 20; 
-        right: 0; 
-        top: 0; 
-        background: Black ;
-    }
-    .collectionSchemaView-dividerDragger{
-        position: relative; 
-        background: black; 
-        float: left; 
-        height: 100%;
-    }
-    ::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background-color: rgba(0, 0, 0, .5);
-    }   
-    .collectionSchemaView-tableContainer {
+    background: $light-color;
+    box-sizing: border-box;
+    border: none !important;
+    .rt-table {
+      overflow-y: auto;
+      overflow-x: auto;
+      height: 100%;
+      display: -webkit-inline-box;
+      direction: ltr;
+      // direction:rtl;
+      // display:block;
+    }
+    .rt-tbody {
+      //direction: ltr;
+      direction: rtl;
+    }
+    .rt-tr-group {
+      direction: ltr;
+      max-height: 44px;
+    }
+    .rt-td {
+      border-width: 1px;
+      border-right-color: $intermediate-color;
+      .imageBox-cont {
         position: relative;
-        float: left;
-        height: 100%; 
-    }
-    .ReactTable {
-        position: absolute; // display: inline-block;
-        // overflow: auto;
-        width: 100%;
+        max-height: 100%;
+      }
+      .imageBox-cont img {
+        object-fit: contain;
+        max-width: 100%;
         height: 100%;
-        background: white;
-        box-sizing: border-box;
-        .rt-table {
-            overflow-y: auto;
-            overflow-x: auto;
-            height: 100%;
-            display: -webkit-inline-box;
-            direction: ltr; // direction:rtl;
-            // display:block;
-        }
-        .rt-tbody {
-            //direction: ltr;
-            direction: rtl;
-        }
-        .rt-tr-group {
-            direction: ltr;
-            max-height: 44px;
-        }
-        .rt-td {
-            border-width: 1;
-            border-right-color: #aaa;
-            .imageBox-cont {
-                position: relative;
-                max-height: 100%;
-            }
-            .imageBox-cont img {
-                object-fit: contain;
-                max-width: 100%;
-                height: 100%
-            }
-        }
-        .rt-tr-group {
-            border-width: 1;
-            border-bottom-color: #aaa
-        }
-    }
-    .ReactTable .rt-table {
-        overflow-y: auto;
-        overflow-x: auto;
+      }
+      .videobox-cont  {
+        object-fit: contain;
+        width:auto;
         height: 100%;
-        display: -webkit-inline-box;
-        direction: ltr; // direction:rtl;
-        // display:block;
-    }
-    .ReactTable .rt-tbody {
-        //direction: ltr;
-        direction: rtl;
-    }
-    .ReactTable .rt-tr-group {
-        direction: ltr;
-    }
-    .ReactTable .rt-thead.-header {
-            background:grey;
-    }
-    .ReactTable .rt-th, .ReactTable .rt-td {
-        max-height: 44;
-        padding: 3px 7px;
-    }
-    .ReactTable .rt-tbody .rt-tr-group:last-child {
-        border-bottom: grey;
-        border-bottom-style: solid;
-        border-bottom-width: 1;
-    }
-    .documentView-node:first-child {
-        background: grey;
-        .imageBox-cont img {
-            object-fit: contain;
-        }
-    }
+      }
+    }
+  }
+  .ReactTable .rt-thead.-header {
+    background: $intermediate-color;
+    color: $light-color;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 12px;
+    height: 30px;
+    padding-top: 4px;
+  }
+  .ReactTable .rt-th,
+  .ReactTable .rt-td {
+    max-height: 44;
+    padding: 3px 7px;
+    font-size: 13px;
+    text-align: center;
+  }
+  .ReactTable .rt-tbody .rt-tr-group:last-child {
+    border-bottom: $intermediate-color;
+    border-bottom-style: solid;
+    border-bottom-width: 1;
+  }
+  .documentView-node:first-child {
+    background: $light-color;
+    .imageBox-cont img {
+      object-fit: contain;
+    }
+  }
 }
 
 .Resizer {
-    box-sizing: border-box;
-    background: #000;
-    opacity: 0.5;
-    z-index: 1;
-    background-clip: padding-box;
-    &.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-        &:hover {
-            border-top: 5px solid rgba(0, 0, 0, 0.5);
-            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
-    &.vertical {
-        width: 11px;
-        margin: 0 -5px;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-        &:hover {
-            border-left: 5px solid rgba(0, 0, 0, 0.5);
-            border-right: 5px solid rgba(0, 0, 0, 0.5);
-        }
-    }
+  box-sizing: border-box;
+  background: #000;
+  opacity: 0.5;
+  z-index: 1;
+  background-clip: padding-box;
+  &.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
     &:hover {
-        -webkit-transition: all 2s ease;
-        transition: all 2s ease;
-    }
+      border-top: 5px solid rgba(0, 0, 0, 0.5);
+      border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+    }
+  }
+  &.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+    &:hover {
+      border-left: 5px solid rgba(0, 0, 0, 0.5);
+      border-right: 5px solid rgba(0, 0, 0, 0.5);
+    }
+  }
+  &:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+  }
 }
 
 .vertical {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.horizontal {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: flex;
-        flex-direction: column;
-    }
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
-    footer {
-        padding: 1rem;
-        background: #eee;
-    }
-}
-
-.parent {
-    width: 100%;
-    height: 100%;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
+  section {
+    width: 100vh;
+    height: 100vh;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -202,19 +166,71 @@
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
+  }
+  header {
+    padding: 1rem;
+    background: #eee;
+  }
+  footer {
+    padding: 1rem;
+    background: #eee;
+  }
+}
+
+.horizontal {
+  section {
+    width: 100vh;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  header {
+    padding: 1rem;
+    background: #eee;
+  }
+  footer {
+    padding: 1rem;
+    background: #eee;
+  }
+}
+
+.parent {
+  width: 100%;
+  height: 100%;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
 
 .header {
-    background: #aaa;
-    height: 3rem;
-    line-height: 3rem;
+  background: #aaa;
+  height: 3rem;
+  line-height: 3rem;
 }
 
 .wrapper {
-    background: #ffa;
-    margin: 5rem;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-}
\ No newline at end of file
+  background: #ffa;
+  margin: 5rem;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.-even {
+  background: $light-color !important;
+}
+
+.-odd {
+  background: $light-color-secondary !important;
+}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 17eeaa5a2..957fd0fca 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,5 +1,5 @@
 import React = require("react")
-import { action, observable } from "mobx";
+import { action, observable, computed } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
@@ -24,14 +24,14 @@ import { setupDrag } from "../../util/DragManager";
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
     private _mainCont = React.createRef<HTMLDivElement>();
-    private DIVIDER_WIDTH = 5;
+    private DIVIDER_WIDTH = 4;
 
     @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView
     @observable _dividerX = 0;
     @observable _panelWidth = 0;
     @observable _panelHeight = 0;
     @observable _selectedIndex = 0;
-    @observable _splitPercentage: number = 50;
+    @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); }
 
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
@@ -49,7 +49,7 @@ export class CollectionSchemaView extends CollectionViewBase {
         let reference = React.createRef<HTMLDivElement>();
         let onItemDown = setupDrag(reference, () => props.doc);
         return (
-            <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}>
+            <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} style={{ height: "36px" }} key={props.doc.Id} ref={reference}>
                 <EditableView
                     display={"inline"}
                     contents={contents}
@@ -91,7 +91,8 @@ export class CollectionSchemaView extends CollectionViewBase {
         return {
             onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
                 that._selectedIndex = rowInfo.index;
-                this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize
+                // bcz - ugh - needed to force Measure to do its thing and call onResize
+                this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage - 0.05)
 
                 if (handleOriginal) {
                     handleOriginal()
@@ -108,18 +109,18 @@ export class CollectionSchemaView extends CollectionViewBase {
     @action
     onDividerMove = (e: PointerEvent): void => {
         let nativeWidth = this._mainCont.current!.getBoundingClientRect();
-        this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100);
+        this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100));
     }
     @action
     onDividerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointermove", this.onDividerMove);
         document.removeEventListener('pointerup', this.onDividerUp);
-        if (this._startSplitPercent == this._splitPercentage) {
-            this._splitPercentage = this._splitPercentage == 1 ? 66 : 100;
+        if (this._startSplitPercent == this.splitPercentage) {
+            this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0);
         }
     }
     onDividerDown = (e: React.PointerEvent) => {
-        this._startSplitPercent = this._splitPercentage;
+        this._startSplitPercent = this.splitPercentage;
         e.stopPropagation();
         e.preventDefault();
         document.addEventListener("pointermove", this.onDividerMove);
@@ -136,12 +137,12 @@ export class CollectionSchemaView extends CollectionViewBase {
         e.preventDefault();
         document.removeEventListener("pointermove", this.onExpanderMove);
         document.removeEventListener('pointerup', this.onExpanderUp);
-        if (this._startSplitPercent == this._splitPercentage) {
-            this._splitPercentage = this._splitPercentage == 100 ? 66 : 100;
+        if (this._startSplitPercent == this.splitPercentage) {
+            this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0);
         }
     }
     onExpanderDown = (e: React.PointerEvent) => {
-        this._startSplitPercent = this._splitPercentage;
+        this._startSplitPercent = this.splitPercentage;
         e.stopPropagation();
         e.preventDefault();
         document.addEventListener("pointermove", this.onExpanderMove);
@@ -205,7 +206,7 @@ export class CollectionSchemaView extends CollectionViewBase {
         )
         let previewHandle = !this.props.active() ? (null) : (
             <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
-        let dividerDragger = this._splitPercentage == 100 ? (null) :
+        let dividerDragger = this.splitPercentage == 0 ? (null) :
             <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
         return (
             <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
@@ -215,7 +216,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                         this._panelHeight = r.entry.height;
                     })}>
                         {({ measureRef }) =>
-                            <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ width: `${this._splitPercentage}%` }}>
+                            <div ref={measureRef} className="collectionSchemaView-tableContainer"
+                                style={{ width: `calc(100% - ${this.splitPercentage}%)` }}>
                                 <ReactTable
                                     data={children}
                                     pageSize={children.length}
@@ -237,7 +239,7 @@ export class CollectionSchemaView extends CollectionViewBase {
                         }
                     </Measure>
                     {dividerDragger}
-                    <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)` }}>
+                    <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0)}% - ${this.DIVIDER_WIDTH}px)` }}>
                         {content}
                     </div>
                     {previewHandle}
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index f8d580a7b..fa0f1c761 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,16 +1,25 @@
+@import "../global_variables";
 #body {
     padding: 20px;
-    background: #bbbbbb;
+    background: $light-color-secondary;
+    font-size: 13px;
+    overflow: scroll;
 }
 
 ul {
     list-style: none;
+    padding-left: 20px;
 }
 
 li {
     margin: 5px 0;
 }
 
+.collection-child {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
 .no-indent {
     padding-left: 0;
 }
@@ -18,10 +27,17 @@ li {
 .bullet {
     width: 1.5em;
     display: inline-block;
+    color: $intermediate-color;
+}
+
+.coll-title {
+    font-size: 24px;
+    margin-bottom: 20px;
 }
 
 .collectionTreeView-dropTarget {
-    border-style: solid;
+    border: 0px solid transparent;
+    border-radius: $border-radius;
     box-sizing: border-box;
     height: 100%;
 }
@@ -30,8 +46,16 @@ li {
     display: inline-table;
 }
 
+.docContainer:hover {
+    .delete-button {
+        display: inline;
+    }
+}
+
 .delete-button {
-    color: #999999;
+    color: $intermediate-color;
     float: right;
-    margin-left: 1em;
+    margin-left: 15px;
+    margin-top: 3px;
+    display: none;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 9c31bdae2..f9da759fd 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -12,6 +12,10 @@ import { setupDrag } from "../../util/DragManager";
 import { FieldWaiting } from "../../../fields/Field";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrashAlt, faCaretRight, faCaretDown } from '@fortawesome/free-solid-svg-icons';
+
 export interface TreeViewProps {
     document: Document;
     deleteDoc: (doc: Document) => void;
@@ -23,6 +27,10 @@ export enum BulletType {
     List
 }
 
+library.add(faTrashAlt);
+library.add(faCaretDown);
+library.add(faCaretRight);
+
 @observer
 /**
  * Component that takes in a document prop and a boolean whether it's collapsed or not.
@@ -50,11 +58,11 @@ class TreeView extends React.Component<TreeViewProps> {
 
         switch (type) {
             case BulletType.Collapsed:
-                return <div className="bullet" onClick={onClicked}>&#9654;</div>
+                return <div className="bullet" onClick={onClicked}><FontAwesomeIcon icon="caret-right" /></div>
             case BulletType.Collapsible:
-                return <div className="bullet" onClick={onClicked}>&#9660;</div>
+                return <div className="bullet" onClick={onClicked}><FontAwesomeIcon icon="caret-down" /></div>
             case BulletType.List:
-                return <div className="bullet">&mdash;</div>
+                return <div className="bullet"></div>
         }
     }
 
@@ -81,7 +89,7 @@ class TreeView extends React.Component<TreeViewProps> {
                 this.props.document.SetData(KeyStore.Title, value, TextField);
                 return true;
             }} />
-            <div className="delete-button" onClick={this.delete}>x</div>
+            <div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div>
         </div >
     }
 
@@ -103,7 +111,7 @@ class TreeView extends React.Component<TreeViewProps> {
                     <TreeView document={value} deleteDoc={this.remove} />)
                 )
                 subView =
-                    <li key={this.props.document.Id} >
+                    <li className="collection-child" key={this.props.document.Id} >
                         {this.renderBullet(BulletType.Collapsible)}
                         {titleElement}
                         <ul key={this.props.document.Id}>
@@ -111,7 +119,7 @@ class TreeView extends React.Component<TreeViewProps> {
                         </ul>
                     </li>
             } else {
-                subView = <li key={this.props.document.Id}>
+                subView = <li className="collection-child" key={this.props.document.Id}>
                     {this.renderBullet(BulletType.Collapsed)}
                     {titleElement}
                 </li>
@@ -159,7 +167,7 @@ export class CollectionTreeView extends CollectionViewBase {
 
         return (
             <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
-                <h3>
+                <div className="coll-title">
                     <EditableView contents={titleStr}
                         display={"inline"}
                         height={72} GetValue={() => {
@@ -168,7 +176,8 @@ export class CollectionTreeView extends CollectionViewBase {
                             this.props.Document.SetData(KeyStore.Title, value, TextField);
                             return true;
                         }} />
-                </h3>
+                </div>
+                <hr />
                 <ul className="no-indent">
                     {childrenElement}
                 </ul>
diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss
new file mode 100644
index 000000000..cbb981b13
--- /dev/null
+++ b/src/client/views/collections/CollectionVideoView.scss
@@ -0,0 +1,40 @@
+
+.collectionVideoView-cont{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+ 
+}
+.collectionVideoView-time{
+    color : white;
+    top :25px;
+    left : 25px;
+    position: absolute;
+    background-color: rgba(50, 50, 50, 0.2);
+    transform-origin: left top;
+}
+.collectionVideoView-play {
+    width: 25px;
+    height: 20px;
+    bottom: 25px;
+    left : 25px;
+    position: absolute;
+    color : white;
+    background-color: rgba(50, 50, 50, 0.2);
+    border-radius: 4px;
+    text-align: center;
+    transform-origin: left bottom;
+}
+.collectionVideoView-full {
+    width: 25px;
+    height: 20px;
+    bottom: 25px;
+    right : 25px;
+    position: absolute;
+    color : white;
+    background-color: rgba(50, 50, 50, 0.2);
+    border-radius: 4px;
+    text-align: center;
+    transform-origin: right bottom;
+
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
new file mode 100644
index 000000000..b64ef3c07
--- /dev/null
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -0,0 +1,118 @@
+import { action, computed, observable } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ContextMenu } from "../ContextMenu";
+import { CollectionView, CollectionViewType } from "./CollectionView";
+import { CollectionViewProps } from "./CollectionViewBase";
+import React = require("react");
+import { FieldId } from "../../../fields/Field";
+import "./CollectionVideoView.scss"
+
+
+@observer
+export class CollectionVideoView extends React.Component<CollectionViewProps> {
+
+    public static LayoutString(fieldKey: string = "DataKey") {
+        return `<${CollectionVideoView.name} Document={Document}
+                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
+                    isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
+    }
+
+    private _mainCont = React.createRef<HTMLDivElement>();
+
+    private get uIButtons() {
+        let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().transformDirection(1, 1)[0]);
+        return ([
+            <div className="collectionVideoView-time" key="time" onPointerDown={this.onResetDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+                <span>{"" + Math.round(this.ctime)}</span>
+                <span style={{ fontSize: 8 }}>{" " + Math.round((this.ctime - Math.trunc(this.ctime)) * 100)}</span>
+            </div>,
+            <div className="collectionVideoView-play" key="play" onPointerDown={this.onPlayDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+                {this.playing ? "\"" : ">"}
+            </div>,
+            <div className="collectionVideoView-full" key="full" onPointerDown={this.onFullDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
+                F
+                </div>
+        ]);
+    }
+
+
+    // "inherited" CollectionView API starts here...
+
+    @observable
+    public SelectedDocs: FieldId[] = []
+    public active: () => boolean = () => CollectionView.Active(this);
+
+    addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); }
+    removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+            ContextMenu.Instance.addItem({ description: "VideoOptions", event: () => { } });
+        }
+    }
+
+    get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; }
+    get subView(): any { return CollectionView.SubView(this); }
+
+    componentDidMount() {
+        this.updateTimecode();
+    }
+
+    get player(): HTMLVideoElement | undefined {
+        return this._mainCont.current ? this._mainCont.current.getElementsByTagName("video")[0] : undefined;
+    }
+
+    @action
+    updateTimecode = () => {
+        if (this.player) {
+            this.ctime = this.player.currentTime;
+            this.props.Document.SetNumber(KeyStore.CurPage, Math.round(this.ctime));
+        }
+        setTimeout(() => this.updateTimecode(), 100)
+    }
+
+
+    @observable
+    ctime: number = 0
+    @observable
+    playing: boolean = false;
+
+    @action
+    onPlayDown = () => {
+        if (this.player) {
+            if (this.player.paused) {
+                this.player.play();
+                this.playing = true;
+            } else {
+                this.player.pause();
+                this.playing = false;
+            }
+        }
+    }
+    @action
+    onFullDown = (e: React.PointerEvent) => {
+        if (this.player) {
+            this.player.requestFullscreen();
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    @action
+    onResetDown = () => {
+        if (this.player) {
+            this.player.pause();
+            this.player.currentTime = 0;
+        }
+
+    }
+
+    render() {
+        return (<div className="collectionVideoView-cont" ref={this._mainCont} onContextMenu={this.specificContextMenu}>
+            {this.subView}
+            {this.uIButtons}
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 17a0fbd23..d9b2722a6 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -22,20 +22,19 @@ export enum CollectionViewType {
     Tree
 }
 
-export const COLLECTION_BORDER_WIDTH = 2;
+export const COLLECTION_BORDER_WIDTH = 1;
 
 @observer
 export class CollectionView extends React.Component<CollectionViewProps> {
 
-    @observable
-    public SelectedDocs: FieldId[] = [];
-
     public static LayoutString(fieldKey: string = "DataKey") {
         return `<${CollectionView.name} Document={Document}
                     ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
                     isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
     }
 
+    @observable
+    public SelectedDocs: FieldId[] = [];
     public active: () => boolean = () => CollectionView.Active(this);
     addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); }
     removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); }
@@ -50,7 +49,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
 
     @action
     public static AddDocument(props: CollectionViewProps, doc: Document) {
-        doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, 0));
+        doc.SetNumber(KeyStore.Page, props.Document.GetNumber(KeyStore.CurPage, -1));
         if (props.Document.Get(props.fieldKey) instanceof Field) {
             //TODO This won't create the field if it doesn't already exist
             const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index ddde05011..4a2761139 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -48,6 +48,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
     protected drop(e: Event, de: DragManager.DropEvent) {
         const docView: DocumentView = de.data["documentView"];
         const doc: Document = de.data["document"];
+
         if (docView && (!docView.props.ContainingCollectionView || docView.props.ContainingCollectionView !== this.props.CollectionView)) {
             if (docView.props.RemoveDocument) {
                 docView.props.RemoveDocument(docView.props.Document);
@@ -62,12 +63,17 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
 
     @action
     protected onDrop(e: React.DragEvent, options: DocumentOptions): void {
-        e.stopPropagation()
-        e.preventDefault()
         let that = this;
 
         let html = e.dataTransfer.getData("text/html");
         let text = e.dataTransfer.getData("text/plain");
+
+        if (text && text.startsWith("<div")) {
+            return;
+        }
+        e.stopPropagation()
+        e.preventDefault()
+
         if (html && html.indexOf("<img") != 0) {
             console.log("not good");
             let htmlDoc = Documents.HtmlDocument(html, { ...options, width: 300, height: 300 });
@@ -82,21 +88,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
             const upload = window.location.origin + RouteStore.upload;
             let item = e.dataTransfer.items[i];
             if (item.kind === "string" && item.type.indexOf("uri") != -1) {
-                e.dataTransfer.items[i].getAsString(function (s) {
-                    action(() => {
-                        var img = Documents.ImageDocument(s, { ...options, nativeWidth: 300, width: 300, })
-
-                        let docs = that.props.Document.GetT(KeyStore.Data, ListField);
-                        if (docs != FieldWaiting) {
-                            if (!docs) {
-                                docs = new ListField<Document>();
-                                that.props.Document.Set(KeyStore.Data, docs)
-                            }
-                            docs.Data.push(img);
-                        }
-                    })()
-
-                })
+                e.dataTransfer.items[i].getAsString(action((s: string) => this.props.addDocument(Documents.WebDocument(s, options))))
             }
             let type = item.type
             console.log(type)
@@ -123,7 +115,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
                                 var doc: any;
 
                                 if (type.indexOf("image") !== -1) {
-                                    doc = Documents.ImageDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                    doc = Documents.ImageDocument(path, { ...options, nativeWidth: 200, width: 200, })
                                 }
                                 if (type.indexOf("video") !== -1) {
                                     doc = Documents.VideoDocument(path, { ...options, nativeWidth: 300, width: 300, })
diff --git a/src/client/views/collections/MarqueeView.scss b/src/client/views/collections/MarqueeView.scss
new file mode 100644
index 000000000..6d9a79344
--- /dev/null
+++ b/src/client/views/collections/MarqueeView.scss
@@ -0,0 +1,8 @@
+
+.marqueeView {
+    border-style: dashed;
+    box-sizing: border-box;
+    position: absolute;
+    border-width: 1px;
+    border-color: black;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx
new file mode 100644
index 000000000..65aaa837f
--- /dev/null
+++ b/src/client/views/collections/MarqueeView.tsx
@@ -0,0 +1,164 @@
+import { action, IReactionDisposer, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { FieldWaiting, Opt } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
+import { Documents } from "../../documents/Documents";
+import { SelectionManager } from "../../util/SelectionManager";
+import { Transform } from "../../util/Transform";
+import { CollectionFreeFormView } from "./CollectionFreeFormView";
+import "./MarqueeView.scss";
+import React = require("react");
+import { InkField, StrokeData } from "../../../fields/InkField";
+import { Utils } from "../../../Utils";
+import { InkingCanvas } from "../InkingCanvas";
+
+interface MarqueeViewProps {
+    getMarqueeTransform: () => Transform;
+    getTransform: () => Transform;
+    container: CollectionFreeFormView;
+    addDocument: (doc: Document) => void;
+    activeDocuments: () => Document[];
+    selectDocuments: (docs: Document[]) => void;
+    removeDocument: (doc: Document) => boolean;
+}
+
+@observer
+export class MarqueeView extends React.Component<MarqueeViewProps>
+{
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+    @observable _lastX: number = 0;
+    @observable _lastY: number = 0;
+    @observable _downX: number = 0;
+    @observable _downY: number = 0;
+
+    componentDidMount() {
+        this._reactionDisposer = reaction(
+            () => this.props.container.MarqueeVisible,
+            (visible: boolean) => this.onPointerDown(visible, this.props.container.DownX, this.props.container.DownY))
+    }
+    componentWillUnmount() {
+        if (this._reactionDisposer) {
+            this._reactionDisposer();
+        }
+        this.cleanupInteractions();
+    }
+
+    @action
+    cleanupInteractions = () => {
+        document.removeEventListener("pointermove", this.onPointerMove, true)
+        document.removeEventListener("pointerup", this.onPointerUp, true);
+        document.removeEventListener("keydown", this.marqueeCommand, true);
+    }
+
+    @action
+    onPointerDown = (visible: boolean, downX: number, downY: number): void => {
+        if (visible) {
+            this._downX = this._lastX = downX;
+            this._downY = this._lastY = downY;
+            document.addEventListener("pointermove", this.onPointerMove, true)
+            document.addEventListener("pointerup", this.onPointerUp, true);
+            document.addEventListener("keydown", this.marqueeCommand, true);
+        }
+    }
+
+    @action
+    onPointerMove = (e: PointerEvent): void => {
+        this._lastX = e.pageX;
+        this._lastY = e.pageY;
+    }
+
+    @action
+    onPointerUp = (e: PointerEvent): void => {
+        this.cleanupInteractions();
+        if (!e.shiftKey) {
+            SelectionManager.DeselectAll();
+        }
+        this.props.selectDocuments(this.marqueeSelect());
+    }
+
+    intersectRect(r1: { left: number, top: number, width: number, height: number },
+        r2: { left: number, top: number, width: number, height: number }) {
+        return !(r2.left > r1.left + r1.width || r2.left + r2.width < r1.left || r2.top > r1.top + r1.height || r2.top + r2.height < r1.top);
+    }
+
+    get Bounds() {
+        let left = this._downX < this._lastX ? this._downX : this._lastX;
+        let top = this._downY < this._lastY ? this._downY : this._lastY;
+        let topLeft = this.props.getTransform().transformPoint(left, top);
+        let size = this.props.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
+        return { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) }
+    }
+
+    @action
+    marqueeCommand = (e: KeyboardEvent) => {
+        if (e.key == "Backspace" || e.key == "Delete") {
+            this.marqueeSelect().map(d => this.props.removeDocument(d));
+            this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField);
+            this.cleanupInteractions();
+        }
+        if (e.key == "c") {
+            let bounds = this.Bounds;
+            let selected = this.marqueeSelect().map(d => {
+                this.props.removeDocument(d);
+                d.SetNumber(KeyStore.X, d.GetNumber(KeyStore.X, 0) - bounds.left - bounds.width / 2);
+                d.SetNumber(KeyStore.Y, d.GetNumber(KeyStore.Y, 0) - bounds.top - bounds.height / 2);
+                d.SetNumber(KeyStore.Page, 0);
+                d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0));
+                return d;
+            });
+            let liftedInk = this.marqueeInkSelect(true);
+            this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField);
+            //setTimeout(() => {
+            this.props.addDocument(Documents.FreeformDocument(selected, { x: bounds.left, y: bounds.top, panx: 0, pany: 0, width: bounds.width, backgroundColor: "Transparent", height: bounds.height, ink: liftedInk, title: "a nested collection" }));
+            // }, 100);
+            this.cleanupInteractions();
+        }
+    }
+    marqueeInkSelect(select: boolean) {
+        let selRect = this.Bounds;
+        let centerShiftX = 0 - (selRect.left + selRect.width / 2); // moves each point by the offset that shifts the selection's center to the origin.
+        let centerShiftY = 0 - (selRect.top + selRect.height / 2);
+        let ink = this.props.container.props.Document.GetT(KeyStore.Ink, InkField);
+        if (ink && ink != FieldWaiting) {
+            let idata = new Map();
+            ink.Data.forEach((value: StrokeData, key: string, map: any) => {
+                let inside = InkingCanvas.IntersectStrokeRect(value, selRect);
+                if (inside && select) {
+                    idata.set(key,
+                        {
+                            pathData: value.pathData.map(val => { return { x: val.x + centerShiftX, y: val.y + centerShiftY } }),
+                            color: value.color,
+                            width: value.width,
+                            tool: value.tool,
+                            page: -1
+                        });
+                } else if (!inside && !select) {
+                    idata.set(key, value);
+                }
+            })
+            return idata;
+        }
+    }
+
+    marqueeSelect() {
+        let selRect = this.Bounds;
+        let selection: Document[] = [];
+        this.props.activeDocuments().map(doc => {
+            var x = doc.GetNumber(KeyStore.X, 0);
+            var y = doc.GetNumber(KeyStore.Y, 0);
+            var w = doc.GetNumber(KeyStore.Width, 0);
+            var h = doc.GetNumber(KeyStore.Height, 0);
+            if (this.intersectRect({ left: x, top: y, width: w, height: h }, selRect))
+                selection.push(doc)
+        })
+        return selection;
+    }
+
+    render() {
+        let p = this.props.getMarqueeTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
+        let v = this.props.getMarqueeTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
+        return (!this.props.container.MarqueeVisible ? (null) : <div className="marqueeView" style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, width: `${Math.abs(v[0])}`, height: `${Math.abs(v[1])}` }} />);
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/PreviewCursor.scss b/src/client/views/collections/PreviewCursor.scss
new file mode 100644
index 000000000..a797411f6
--- /dev/null
+++ b/src/client/views/collections/PreviewCursor.scss
@@ -0,0 +1,18 @@
+
+.previewCursor {
+    color: black;
+    position: absolute;
+    transform-origin: left top;
+    pointer-events: none;
+}
+
+//this is an animation for the blinking cursor!
+@keyframes blink {
+	0% {opacity: 0}
+	49%{opacity: 0}
+	50% {opacity: 1}
+}
+
+#previewCursor {
+    animation: blink 1s infinite;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/PreviewCursor.tsx b/src/client/views/collections/PreviewCursor.tsx
new file mode 100644
index 000000000..a1411250a
--- /dev/null
+++ b/src/client/views/collections/PreviewCursor.tsx
@@ -0,0 +1,78 @@
+import { trace } from "mobx";
+import "./PreviewCursor.scss";
+import React = require("react");
+import { action, IReactionDisposer, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { FieldWaiting, Opt } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import { Documents } from "../../documents/Documents";
+import { SelectionManager } from "../../util/SelectionManager";
+import { Transform } from "../../util/Transform";
+import { CollectionFreeFormView } from "./CollectionFreeFormView";
+
+
+export interface PreviewCursorProps {
+    getTransform: () => Transform;
+    container: CollectionFreeFormView;
+    addLiveTextDocument: (doc: Document) => void;
+}
+
+@observer
+export class PreviewCursor extends React.Component<PreviewCursorProps>  {
+    private _reactionDisposer: Opt<IReactionDisposer>;
+
+    @observable _lastX: number = 0;
+    @observable _lastY: number = 0;
+
+    componentDidMount() {
+        this._reactionDisposer = reaction(
+            () => this.props.container.PreviewCursorVisible,
+            (visible: boolean) => this.onCursorPlaced(visible, this.props.container.DownX, this.props.container.DownY))
+    }
+    componentWillUnmount() {
+        if (this._reactionDisposer) {
+            this._reactionDisposer();
+        }
+        this.cleanupInteractions();
+    }
+
+
+    @action
+    cleanupInteractions = () => {
+        document.removeEventListener("keypress", this.onKeyPress, true);
+    }
+
+    @action
+    onCursorPlaced = (visible: boolean, downX: number, downY: number): void => {
+        if (visible) {
+            document.addEventListener("keypress", this.onKeyPress, true);
+            this._lastX = downX;
+            this._lastY = downY;
+        } else
+            this.cleanupInteractions();
+    }
+
+    @action
+    onKeyPress = (e: KeyboardEvent) => {
+        //if not these keys, make a textbox if preview cursor is active!
+        if (!e.ctrlKey && !e.altKey && !e.defaultPrevented) {
+            //make textbox and add it to this collection
+            let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
+            let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
+            this.props.addLiveTextDocument(newBox);
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    render() {
+        //get local position and place cursor there!
+        let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
+        return (
+            !this.props.container.PreviewCursorVisible ? (null) :
+                <div className="previewCursor" id="previewCursor" style={{ transform: `translate(${x}px, ${y}px)` }}>I</div>)
+
+    }
+}
\ No newline at end of file