4 files changed, 102 insertions, 83 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 7a43f3087..8f5470574 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,4 +1,5 @@
 @import "global_variables";
+
 #documentDecorations-container {
     position: absolute;
     display: grid;
@@ -6,26 +7,32 @@
     grid-template-rows: 8px 1fr 8px 30px;
     grid-template-columns: 8px 1fr 8px;
     pointer-events: none;
+
     #documentDecorations-centerCont {
         background: none;
     }
+
     .documentDecorations-resizer {
         pointer-events: auto;
         background: $alt-accent;
         opacity: 0.8;
     }
+
     #documentDecorations-topLeftResizer,
     #documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
     }
+
     #documentDecorations-topRightResizer,
     #documentDecorations-bottomLeftResizer {
         cursor: nesw-resize;
     }
+
     #documentDecorations-topResizer,
     #documentDecorations-bottomResizer {
         cursor: ns-resize;
     }
+
     #documentDecorations-leftResizer,
     #documentDecorations-rightResizer {
         cursor: ew-resize;
@@ -33,7 +40,7 @@
 }
 
 .documentDecorations-background {
-    background:lightblue;
+    background: lightblue;
     position: absolute;
     opacity: 0.1;
 }
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 4eda50204..23e072344 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -30,10 +30,12 @@
     height: 10px;
     width: 10px;
     border-radius: 2px;
-    background: #232323
+    background: $dark-color
   }
 
   .minimized-box:hover {
-    background: #232323
+    background: $main-accent;
+    transform: scale(1.15);
+    cursor: pointer;
   }
 }
 \ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 085307461..713c12975 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -7,7 +7,6 @@ import {
   observable
 } from "mobx";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSquare } from "@fortawesome/free-solid-svg-icons";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { Field, Opt, FieldWaiting } from "../../../fields/Field";
@@ -33,8 +32,6 @@ import React = require("react");
 import { ServerUtils } from "../../../server/ServerUtil";
 import { DocumentDecorations } from "../DocumentDecorations";
 
-library.add(faSquare);
-
 export interface DocumentViewProps {
   ContainingCollectionView: Opt<CollectionView>;
   Document: Document;
@@ -438,6 +435,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     return this.minimized;
   };
 
+  @action
+  expand = () => {
+    this.minimized = false;
+  };
+
   isSelected = () => {
     return SelectionManager.IsSelected(this);
   };
@@ -450,18 +452,26 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     if (!this.props.Document) {
       return null;
     }
+
+    var scaling = this.props.ContentScaling();
+    var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+    var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+
     if (this.minimized) {
       return (
-        //<i class="fas fa-square" />
-        <div className="minimized-box" />
+        <div
+          className="minimized-box"
+          ref={this._mainCont}
+          style={{
+            transformOrigin: "left top",
+            transform: `scale(${scaling} , ${scaling})`
+          }}
+          onClick={this.expand}
+          onDrop={this.onDrop}
+          onPointerDown={this.onPointerDown}
+        />
       );
     } else {
-      var scaling = this.props.ContentScaling();
-      var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
-      var nativeHeight = this.props.Document.GetNumber(
-        KeyStore.NativeHeight,
-        0
-      );
       var backgroundcolor = this.props.Document.GetText(
         KeyStore.BackgroundColor,
         ""
diff --git a/src/client/views/nodes/Sticky.tsx b/src/client/views/nodes/Sticky.tsx
index d57dd5c0b..4a4d69e90 100644
--- a/src/client/views/nodes/Sticky.tsx
+++ b/src/client/views/nodes/Sticky.tsx
@@ -1,83 +1,83 @@
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import React = require("react")
-import { observer } from "mobx-react"
-import 'react-pdf/dist/Page/AnnotationLayer.css'
+import "react-image-lightbox/style.css"; // This only needs to be imported once in your app
+import React = require("react");
+import { observer } from "mobx-react";
+import "react-pdf/dist/Page/AnnotationLayer.css";
 
 interface IProps {
-    Height: number;
-    Width: number;
-    X: number;
-    Y: number;
+  Height: number;
+  Width: number;
+  X: number;
+  Y: number;
 }
 
 /**
- * Sticky, also known as area highlighting, is used to highlight large selection of the PDF file. 
- * Improvements that could be made: maybe store line array and store that somewhere for future rerendering. 
- * 
- * Written By: Andrew Kim 
+ * Sticky, also known as area highlighting, is used to highlight large selection of the PDF file.
+ * Improvements that could be made: maybe store line array and store that somewhere for future rerendering.
+ *
+ * Written By: Andrew Kim
  */
 @observer
 export class Sticky extends React.Component<IProps> {
+  private initX: number = 0;
+  private initY: number = 0;
 
-    private initX: number = 0;
-    private initY: number = 0;
+  private _ref = React.createRef<HTMLCanvasElement>();
+  private ctx: any; //context that keeps track of sticky canvas
 
-    private _ref = React.createRef<HTMLCanvasElement>();
-    private ctx: any; //context that keeps track of sticky canvas
-
-    /**
-     * drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
-     */
-    drawDown = (e: React.PointerEvent) => {
-        if (this._ref.current) {
-            this.ctx = this._ref.current.getContext("2d");
-            let mouse = e.nativeEvent;
-            this.initX = mouse.offsetX;
-            this.initY = mouse.offsetY;
-            this.ctx.beginPath();
-            this.ctx.lineTo(this.initX, this.initY);
-            this.ctx.strokeStyle = "black";
-            document.addEventListener("pointermove", this.drawMove);
-            document.addEventListener("pointerup", this.drawUp);
-        }
+  /**
+   * drawing. Registers the first point that user clicks when mouse button is pressed down on canvas
+   */
+  drawDown = (e: React.PointerEvent) => {
+    if (this._ref.current) {
+      this.ctx = this._ref.current.getContext("2d");
+      let mouse = e.nativeEvent;
+      this.initX = mouse.offsetX;
+      this.initY = mouse.offsetY;
+      this.ctx.beginPath();
+      this.ctx.lineTo(this.initX, this.initY);
+      this.ctx.strokeStyle = "black";
+      document.addEventListener("pointermove", this.drawMove);
+      document.addEventListener("pointerup", this.drawUp);
     }
+  };
 
-    //when user drags 
-    drawMove = (e: PointerEvent): void => {
-        //x and y mouse movement
-        let x = this.initX += e.movementX,
-            y = this.initY += e.movementY;
-        //connects the point 
-        this.ctx.lineTo(x, y);
-        this.ctx.stroke();
-
-    }
+  //when user drags
+  drawMove = (e: PointerEvent): void => {
+    //x and y mouse movement
+    let x = (this.initX += e.movementX),
+      y = (this.initY += e.movementY);
+    //connects the point
+    this.ctx.lineTo(x, y);
+    this.ctx.stroke();
+  };
 
-    /**
-     * when user lifts the mouse, the drawing ends
-     */
-    drawUp = (e: PointerEvent) => {
-        this.ctx.closePath();
-        console.log(this.ctx);
-        document.removeEventListener("pointermove", this.drawMove);
-    }
+  /**
+   * when user lifts the mouse, the drawing ends
+   */
+  drawUp = (e: PointerEvent) => {
+    this.ctx.closePath();
+    console.log(this.ctx);
+    document.removeEventListener("pointermove", this.drawMove);
+  };
 
-    render() {
-        return (
-            <div onPointerDown={this.drawDown}>
-                <canvas ref={this._ref} height={this.props.Height} width={this.props.Width}
-                    style={{
-                        position: "absolute",
-                        top: "20px",
-                        left: "0px",
-                        zIndex: 1,
-                        background: "yellow",
-                        transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
-                        opacity: 0.4
-                    }}
-                />
-
-            </div>
-        );
-    }
-}
-\ No newline at end of file
+  render() {
+    return (
+      <div onPointerDown={this.drawDown}>
+        <canvas
+          ref={this._ref}
+          height={this.props.Height}
+          width={this.props.Width}
+          style={{
+            position: "absolute",
+            top: "20px",
+            left: "0px",
+            zIndex: 1,
+            background: "yellow",
+            transform: `translate(${this.props.X}px, ${this.props.Y}px)`,
+            opacity: 0.4
+          }}
+        />
+      </div>
+    );
+  }
+}