simpliified presentations to be a PresBox with PresElementBoxes.

4 files changed, 147 insertions, 343 deletions

diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
new file mode 100644
index 000000000..c7d846718
--- /dev/null
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -0,0 +1,75 @@
+.presElementBox-item {
+    padding: 10px;
+    display: inline-block;
+    width: 100%;
+    outline-color: maroon;
+    outline-style: dashed;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    transition: all .1s;
+
+    .documentView-node {
+        position: absolute;
+        z-index: 1;
+    }
+}
+
+.presElementBox-item-above {
+    border-top: black 2px solid;
+}
+
+.presElementBox-item-below {
+    border-bottom: black 2px solid;
+}
+
+.presElementBox-item:hover {
+    transition: all .1s;
+    background: #AAAAAA;
+    border-radius: 12px;
+}
+
+.presElementBox-selected {
+    background: gray;
+    color: black;
+    border-radius: 12px;
+    box-shadow: black 2px 2px 5px;
+}
+
+
+.presElementBox-icon {
+    float: right;
+}
+
+.presElementBox-interaction {
+    color: gray;
+    float: left;
+}
+
+.presElementBox-interaction-selected {
+    color: white;
+    float: left;
+}
+
+.presElementBox-name {
+    font-size: 15px;
+    display: inline-block;
+}
+
+.presElementBox-embedded {
+    position: relative;
+    margin-top: 15;
+}
+
+.presElementBox-embeddedMask {
+    width:100%;
+    height:100%;
+    position: absolute;
+    left:0;
+    top:0;
+    background: transparent;
+    z-index:2;
+}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6e8c28d34..fe2aea27b 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -12,9 +12,10 @@ import { DocumentType } from "../../documents/DocumentTypes";
 import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
-import { ContextMenu } from "../ContextMenu";
 import { DocumentView } from "../nodes/DocumentView";
 import React = require("react");
+import "./PresElementBox.scss";
+import { FieldViewProps, FieldView } from '../nodes/FieldView';
 
 
 library.add(faArrowUp);
@@ -24,15 +25,10 @@ library.add(fileRegular as any);
 library.add(faSearch);
 library.add(faArrowDown);
 
-interface PresentationElementProps {
-    mainDocument: Doc;
-    document: Doc;
+interface PresElementProps {
+    presentationDoc: Doc;
     index: number;
-    deleteDocument(index: number): void;
     gotoDocument(index: number, fromDoc: number): Promise<void>;
-    allListElements: Doc[];
-    presStatus: boolean;
-    removeDocByRef(doc: Doc): boolean;
 }
 
 /**
@@ -40,54 +36,41 @@ interface PresentationElementProps {
  * It involves some functionality for its buttons and options.
  */
 @observer
-export default class PresentationElement extends React.Component<PresentationElementProps> {
+export class PresElementBox extends React.Component<PresElementProps & FieldViewProps> {
 
+    public static LayoutString() { return FieldView.LayoutString(PresElementBox); }
     private header?: HTMLDivElement | undefined;
     private listdropDisposer?: DragManager.DragDropDisposer;
     private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-    componentWillUnmount() {
-        this.listdropDisposer && this.listdropDisposer();
-    }
-
-    @computed get currentIndex() { return NumCast(this.props.mainDocument.selectedDoc); }
-
-    @computed get showButton() { return BoolCast(this.props.document.showButton); }
-    @computed get navButton() { return BoolCast(this.props.document.navButton); }
-    @computed get hideTillShownButton() { return BoolCast(this.props.document.hideTillShownButton); }
-    @computed get fadeButton() { return BoolCast(this.props.document.fadeButton); }
-    @computed get hideAfterButton() { return BoolCast(this.props.document.hideAfterButton); }
-    @computed get groupButton() { return BoolCast(this.props.document.groupButton); }
-    @computed get expandInlineButton() { return BoolCast(this.props.document.expandInlineButton); }
-    set showButton(val: boolean) { this.props.document.showButton = val; }
-    set navButton(val: boolean) { this.props.document.navButton = val; }
-    set hideTillShownButton(val: boolean) { this.props.document.hideTillShownButton = val; }
-    set fadeButton(val: boolean) { this.props.document.fadeButton = val; }
-    set hideAfterButton(val: boolean) { this.props.document.hideAfterButton = val; }
-    set groupButton(val: boolean) { this.props.document.groupButton = val; }
-    set expandInlineButton(val: boolean) { this.props.document.expandInlineButton = val; }
+    @computed get currentIndex() { return NumCast(this.props.presentationDoc.selectedDoc); }
+    @computed get showButton() { return BoolCast(this.props.Document.showButton); }
+    @computed get navButton() { return BoolCast(this.props.Document.navButton); }
+    @computed get hideTillShownButton() { return BoolCast(this.props.Document.hideTillShownButton); }
+    @computed get fadeButton() { return BoolCast(this.props.Document.fadeButton); }
+    @computed get hideAfterButton() { return BoolCast(this.props.Document.hideAfterButton); }
+    @computed get groupButton() { return BoolCast(this.props.Document.groupButton); }
+    @computed get embedInline() { return BoolCast(this.props.Document.embedOpen); }
+
+    set embedInline(value: boolean) { this.props.Document.embedOpen = value; }
+    set showButton(val: boolean) { this.props.Document.showButton = val; }
+    set navButton(val: boolean) { this.props.Document.navButton = val; }
+    set hideTillShownButton(val: boolean) { this.props.Document.hideTillShownButton = val; }
+    set fadeButton(val: boolean) { this.props.Document.fadeButton = val; }
+    set hideAfterButton(val: boolean) { this.props.Document.hideAfterButton = val; }
+    set groupButton(val: boolean) { this.props.Document.groupButton = val; }
 
     //Lifecycle function that makes sure that button BackUp is received when mounted.
-    async componentDidMount() {
-        if (this.presElRef.current) {
-            this.header = this.presElRef.current;
-            this.createListDropTarget(this.presElRef.current);
-        }
-    }
-
-    //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
-    async componentDidUpdate() {
+    componentDidMount() {
         if (this.presElRef.current) {
             this.header = this.presElRef.current;
             this.createListDropTarget(this.presElRef.current);
         }
     }
 
-    @action
-    onGroupClick = (e: React.MouseEvent) => {
-        this.groupButton = !this.groupButton;
+    componentWillUnmount() {
+        this.listdropDisposer && this.listdropDisposer();
     }
-
     /**
      * The function that is called on click to turn Hiding document till press option on/off.
      * It also sets the beginning and end opacitys.
@@ -98,12 +81,12 @@ export default class PresentationElement extends React.Component<PresentationEle
         this.hideTillShownButton = !this.hideTillShownButton;
         if (!this.hideTillShownButton) {
             if (this.props.index >= this.currentIndex) {
-                this.props.document.opacity = 1;
+                (this.props.Document.target as Doc).opacity = 1;
             }
         } else {
-            if (this.props.presStatus) {
+            if (this.props.presentationDoc.presStatus) {
                 if (this.props.index > this.currentIndex) {
-                    this.props.document.opacity = 0;
+                    (this.props.Document.target as Doc).opacity = 0;
                 }
             }
         }
@@ -120,13 +103,13 @@ export default class PresentationElement extends React.Component<PresentationEle
         this.hideAfterButton = !this.hideAfterButton;
         if (!this.hideAfterButton) {
             if (this.props.index <= this.currentIndex) {
-                this.props.document.opacity = 1;
+                (this.props.Document.target as Doc).opacity = 1;
             }
         } else {
             if (this.fadeButton) this.fadeButton = false;
-            if (this.props.presStatus) {
+            if (this.props.presentationDoc.presStatus) {
                 if (this.props.index < this.currentIndex) {
-                    this.props.document.opacity = 0;
+                    (this.props.Document.target as Doc).opacity = 0;
                 }
             }
         }
@@ -143,13 +126,13 @@ export default class PresentationElement extends React.Component<PresentationEle
         this.fadeButton = !this.fadeButton;
         if (!this.fadeButton) {
             if (this.props.index <= this.currentIndex) {
-                this.props.document.opacity = 1;
+                (this.props.Document.target as Doc).opacity = 1;
             }
         } else {
             this.hideAfterButton = false;
-            if (this.props.presStatus) {
+            if (this.props.presentationDoc.presStatus) {
                 if (this.props.index < this.currentIndex) {
-                    this.props.document.opacity = 0.5;
+                    (this.props.Document.target as Doc).opacity = 0.5;
                 }
             }
         }
@@ -179,7 +162,7 @@ export default class PresentationElement extends React.Component<PresentationEle
 
         this.showButton = !this.showButton;
         if (!this.showButton) {
-            this.props.document.viewScale = 1;
+            this.props.Document.viewScale = 1;
         } else {
             this.navButton = false;
             if (this.currentIndex === this.props.index) {
@@ -189,30 +172,17 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     /**
-     * Function that expands the target inline
-     */
-    @action
-    onExpandTabClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        this.embedInline = !this.embedInline
-    }
-
-    /**
      * Creating a drop target for drag and drop when called.
      */
     protected createListDropTarget = (ele: HTMLDivElement) => {
         this.listdropDisposer && this.listdropDisposer();
-        if (ele) {
-            this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } });
-        }
+        ele && (this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } }));
     }
 
     /**
      * Returns a local transformed coordinate array for given coordinates.
      */
-    ScreenToLocalListTransform = (xCord: number, yCord: number) => {
-        return [xCord, yCord];
-    }
+    ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
 
     /**
      * This method is called when a element is dropped on a already esstablished target.
@@ -225,17 +195,17 @@ export default class PresentationElement extends React.Component<PresentationEle
         let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
         let before = x[1] < bounds[1];
         if (de.data instanceof DragManager.DocumentDragData) {
-            let addDoc = (doc: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", doc, this.props.document, before);
+            let addDoc = (doc: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", doc, this.props.Document, before);
             e.stopPropagation();
             //where does treeViewId come from
-            let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
+            let movedDocs = (de.data.options === this.props.presentationDoc[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
             //console.log("How is this causing an issue");
             document.removeEventListener("pointermove", this.onDragMove, true);
             return (de.data.dropAction || de.data.userDropAction) ?
-                de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before) || added, false)
+                de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", d, this.props.Document, before) || added, false)
                 : (de.data.moveDocument) ?
-                    movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.document, addDoc) || added, false)
-                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before), false);
+                    movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.Document, addDoc) || added, false)
+                    : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.presentationDoc, "data", d, this.props.Document, before), false);
         }
         document.removeEventListener("pointermove", this.onDragMove, true);
 
@@ -245,26 +215,16 @@ export default class PresentationElement extends React.Component<PresentationEle
     //This is used to add dragging as an event.
     onPointerEnter = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
+            this.header!.className = "presElementBox-item" + (this.currentIndex === this.props.index ? "presElementBox-selected" : "");
 
-            this.header!.className = "presentationView-item";
-
-            if (this.currentIndex === this.props.index) {
-                //this doc is selected
-                this.header!.className = "presentationView-item presentationView-selected";
-            }
             document.addEventListener("pointermove", this.onDragMove, true);
         }
     }
 
     //This is used to remove the dragging when dropped.
     onPointerLeave = (e: React.PointerEvent): void => {
-        this.header!.className = "presentationView-item";
-
-        if (this.currentIndex === this.props.index) {
-            //this doc is selected
-            this.header!.className = "presentationView-item presentationView-selected";
+        this.header!.className = "presElementBox-item" + (this.currentIndex === this.props.index ? " presElementBox-selected" : "");
 
-        }
         document.removeEventListener("pointermove", this.onDragMove, true);
     }
 
@@ -273,18 +233,11 @@ export default class PresentationElement extends React.Component<PresentationEle
      * It makes it possible to show dropping lines on drop targets.
      */
     onDragMove = (e: PointerEvent): void => {
-        Doc.UnBrushDoc(this.props.document);
+        Doc.UnBrushDoc(this.props.Document);
         let x = this.ScreenToLocalListTransform(e.clientX, e.clientY);
         let rect = this.header!.getBoundingClientRect();
         let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
-        let before = x[1] < bounds[1];
-        this.header!.className = "presentationView-item";
-        if (before) {
-            this.header!.className += " presentationView-item-above";
-        }
-        else if (!before) {
-            this.header!.className += " presentationView-item-below";
-        }
+        this.header!.className = "presElementBox-item presElementBox-item-" + (x[1] < bounds[1] ? "above" : "below");
         e.stopPropagation();
     }
 
@@ -294,30 +247,7 @@ export default class PresentationElement extends React.Component<PresentationEle
      */
     @action
     move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
-        return this.props.document !== target && this.props.removeDocByRef(doc) && addDoc(doc);
-    }
-    /**
-     * This function is a getter to get if a document is in previewMode.
-     */
-    private get embedInline() {
-        return BoolCast(this.props.document.embedOpen);
-    }
-
-    /**
-     * This function sets document in presentation preview mode as the given value.
-     */
-    private set embedInline(value: boolean) {
-        this.props.document.embedOpen = value;
-    }
-
-    /**
-     * The function that recreates that context menu of presentation elements.
-     */
-    onContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        ContextMenu.Instance.addItem({ description: this.embedInline ? "Collapse Inline" : "Expand Inline", event: () => this.embedInline = !this.embedInline, icon: "expand" });
-        ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
+        return this.props.Document !== target && (this.props.removeDocument ? this.props.removeDocument(doc) : false) && addDoc(doc);
     }
 
     /**
@@ -325,27 +255,21 @@ export default class PresentationElement extends React.Component<PresentationEle
      * presentation element.
      */
     renderEmbeddedInline = () => {
-        if (!this.embedInline) {
+        if (!this.embedInline || !(this.props.Document.target instanceof Doc)) {
             return (null);
         }
 
-        let propDocWidth = NumCast(this.props.document.nativeWidth);
-        let propDocHeight = NumCast(this.props.document.nativeHeight);
-        let scale = () => {
-            let newScale = 175 / NumCast(this.props.document.nativeWidth, 175);
-            return newScale;
-        };
+        let propDocWidth = NumCast(this.props.Document.nativeWidth);
+        let propDocHeight = NumCast(this.props.Document.nativeHeight);
+        let scale = () => 175 / NumCast(this.props.Document.nativeWidth, 175);
         return (
-            <div style={{
-                position: "relative",
+            <div className="presElementBox-embedded" style={{
                 height: propDocHeight === 0 ? 100 : propDocHeight * scale(),
                 width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
-                marginTop: 15
-
             }}>
                 <DocumentView
-                    fitToBox={StrCast(this.props.document.type).indexOf(DocumentType.COL) !== -1}
-                    Document={this.props.document}
+                    fitToBox={StrCast(this.props.Document.type).indexOf(DocumentType.COL) !== -1}
+                    Document={this.props.Document.target as Doc}
                     addDocument={returnFalse}
                     removeDocument={returnFalse}
                     ruleProvider={undefined}
@@ -366,54 +290,36 @@ export default class PresentationElement extends React.Component<PresentationEle
                     ContainingCollectionDoc={undefined}
                     ContentScaling={scale}
                 />
-                <div style={{
-                    width: " 100%",
-                    height: " 100%",
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    background: "transparent",
-                    zIndex: 2,
-
-                }}></div>
+                <div className="presElementBox-embeddedMask" />
             </div>
         );
     }
 
     render() {
         let p = this.props;
-        let title = p.document.title;
 
-        let className = " presentationView-item";
-        if (this.currentIndex === p.index) {
-            //this doc is selected
-            className += " presentationView-selected";
-        }
-        let dropAction = StrCast(this.props.document.dropAction) as dropActionType;
-        let onItemDown = SetupDrag(this.presElRef, () => p.document, this.move, dropAction, this.props.mainDocument[Id], true);
+        let className = "presElementBox-item" + (this.currentIndex === p.index ? " presElementBox-selected" : "");
+        let dropAction = StrCast(this.props.Document.dropAction) as dropActionType;
+        let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.props.presentationDoc[Id], true);
         return (
-            <div className={className} onContextMenu={this.onContextMenu} key={p.document[Id] + p.index}
+            <div className={className} key={p.Document[Id] + p.index}
                 ref={this.presElRef}
                 onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
                 onPointerDown={onItemDown}
-                style={{
-                    outlineColor: "maroon",
-                    outlineStyle: "dashed",
-                    outlineWidth: Doc.IsBrushed(p.document) ? `1px` : "0px",
-                }}
-                onClick={e => { p.gotoDocument(p.index, this.currentIndex); e.stopPropagation(); }}>
-                <strong className="presentationView-name">
-                    {`${p.index + 1}. ${title}`}
+                style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }}
+                onClick={e => p.gotoDocument(p.index, this.currentIndex)}>
+                <strong className="presElementBox-name">
+                    {`${p.index + 1}. ${p.Document.title}`}
                 </strong>
-                <button className="presentation-icon" onPointerDown={(e) => e.stopPropagation()} onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
-                <br></br>
-                <button title="Zoom" className={this.showButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
-                <button title="Navigate" className={this.navButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button title="Hide Document Till Presented" className={this.hideTillShownButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button title="Fade Document After Presented" className={this.fadeButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Hide Document After Presented" className={this.hideAfterButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
-                <button title="Group With Up" className={this.groupButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onGroupClick}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
-                <button title="Expand Inline" className={this.expandInlineButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onExpandTabClick}><FontAwesomeIcon icon={"arrow-down"} /></button>
+                <button className="presElementBox-icon" onPointerDown={e => e.stopPropagation()} onClick={e => this.props.removeDocument && this.props.removeDocument(p.Document)}>X</button>
+                <br />
+                <button title="Zoom" className={"presElementBox-interaction" + (this.showButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={"presElementBox-interaction" + (this.navButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Til Presented" className={"presElementBox-interaction" + (this.hideTillShownButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade After Presented" className={"presElementBox-interaction" + (this.fadeButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Hide After Presented" className={"presElementBox-interaction" + (this.hideAfterButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={faFileDownload} /></button>
+                <button title="Group With Up" className={"presElementBox-interaction" + (this.groupButton ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.groupButton = !this.groupButton)}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
+                <button title="Expand Inline" className={"presElementBox-interaction" + (this.embedInline ? "-selected" : "")} onPointerDown={(e) => e.stopPropagation()} onClick={action(() => this.embedInline = !this.embedInline)}><FontAwesomeIcon icon={"arrow-down"} /></button>
 
                 <br />
                 {this.renderEmbeddedInline()}
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
deleted file mode 100644
index 483461e5a..000000000
--- a/src/client/views/presentationview/PresentationList.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { action } from "mobx";
-import { observer } from "mobx-react";
-import { Doc, DocListCast } from "../../../new_fields/Doc";
-import { Id } from "../../../new_fields/FieldSymbols";
-import { NumCast } from "../../../new_fields/Types";
-import PresentationElement from "./PresentationElement";
-import "./PresentationView.scss";
-import React = require("react");
-
-
-interface PresListProps {
-    mainDocument: Doc;
-    deleteDocument(index: number): void;
-    gotoDocument(index: number, fromDoc: number): Promise<void>;
-    setChildrenDocs: (docList: Doc[]) => void;
-    presStatus: boolean;
-    removeDocByRef(doc: Doc): boolean;
-}
-
-
-@observer
-/**
- * Component that takes in a document prop and a boolean whether it's collapsed or not.
- */
-export default class PresentationViewList extends React.Component<PresListProps> {
-
-
-    /**
-     * Initially every document starts with a viewScale 1, which means
-     * that they will be displayed in a canvas with scale 1.
-     */
-    @action
-    initializeScaleViews = (docList: Doc[]) => {
-        docList.forEach((doc: Doc) => {
-            let curScale = NumCast(doc.viewScale, null);
-            if (curScale === undefined) {
-                doc.viewScale = 1;
-            }
-        });
-    }
-
-    render() {
-        const children = DocListCast(this.props.mainDocument.data);
-        this.initializeScaleViews(children);
-        this.props.setChildrenDocs(children);
-        return (
-            <div className="presentationView-listCont" >
-                {children.map((doc: Doc, index: number) =>
-                    <PresentationElement
-                        key={doc[Id]}
-                        mainDocument={this.props.mainDocument}
-                        document={doc}
-                        index={index}
-                        deleteDocument={this.props.deleteDocument}
-                        gotoDocument={this.props.gotoDocument}
-                        allListElements={children}
-                        presStatus={this.props.presStatus}
-                        removeDocByRef={this.props.removeDocByRef}
-                    />
-                )}
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
deleted file mode 100644
index 5c40a8808..000000000
--- a/src/client/views/presentationview/PresentationView.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-.presentationView-cont {
-    position: absolute;
-    z-index: 2;
-    box-shadow: #AAAAAA .2vw .2vw .4vw;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    letter-spacing: 2px;
-    overflow: hidden;
-    transition: 0.7s opacity ease;
-    pointer-events: all;
-}
-
-.presentationView-item {
-    padding: 10px;
-    display: inline-block;
-    width: 100%;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    transition: all .1s;
-
-    .documentView-node {
-        
-        position: absolute;
-        z-index: 1;
-    }
-}
-
-.presentationView-item-above {
-    border-top: black 2px solid;
-}
-
-.presentationView-item-below {
-    border-bottom: black 2px solid;
-}
-
-.presentationView-listCont {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.presentationView-item:hover {
-    transition: all .1s;
-    background: #AAAAAA;
-    border-radius: 12px;
-}
-
-.presentationView-selected {
-    background: gray;
-    color: black;
-    border-radius: 12px;
-    box-shadow: black 2px 2px 5px;
-}
-
-.presentationView-heading {
-    background: gray;
-    padding: 10px;
-    display: inline-block;
-    width: 100%;
-}
-
-.presentationView-title {
-    padding-top: 3px;
-    padding-bottom: 3px;
-    font-size: 25px;
-    display: inline-block;
-    width: calc(100% - 200px);
-    letter-spacing: 2px;
-}
-
-.presentation-icon {
-    float: right;
-}
-
-.presentation-interaction {
-    color: gray;
-    float: left;
-}
-
-.presentation-interaction-selected {
-    color: white;
-    float: left;
-}
-
-.presentationView-name {
-    font-size: 15px;
-    display: inline-block;
-}
-
-.presentation-button {
-    margin-right: 2.5%;
-    margin-left: 2.5%;
-    width: 20%;
-    border-radius: 5px;
-}
-
-.presentation-buttons {
-    padding: 10px;
-}
-
-.presentation-next:hover {
-    transition: all .1s;
-    background: #AAAAAA
-}
-
-.presentation-back:hover {
-    transition: all .1s;
-    background: #AAAAAA
-}
\ No newline at end of file