From 7844debd9862b15d2b36bf9ce1efb3274616a313 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 24 Jul 2019 18:53:21 -0400
Subject: Context Menu and Some Preview

---
 src/client/views/presentationview/PresentationView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/views/presentationview/PresentationView.tsx')

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index b318f0321..95458b4ca 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -16,6 +16,7 @@ import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, fa
 import { Docs } from "../../documents/Documents";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
 import PresentationViewList from "./PresentationList";
+import { ContextMenu } from "../ContextMenu";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -805,7 +806,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.presElementsMappings.set(keyDoc, elem);
     }
 
-
     render() {
 
         let width = NumCast(this.curPresentation.width);
-- 
cgit v1.2.3-70-g09d2


From 4e73b2b844846ee39e743f69df6225fb4cbf4f2c Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 26 Jul 2019 17:24:27 -0400
Subject: Preview shown with right css

---
 src/client/views/presentationview/PresentationElement.tsx | 14 ++++++++++----
 src/client/views/presentationview/PresentationView.tsx    |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

(limited to 'src/client/views/presentationview/PresentationView.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index ff68f47ba..3297acee9 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -800,7 +800,12 @@ export default class PresentationElement extends React.Component<PresentationEle
         // </ul >;
         let propDocWidth = NumCast(this.props.document.nativeWidth);
         let propDocHeight = NumCast(this.props.document.nativeHeight);
-        let scale = () => 175 / NumCast(this.props.document.nativeWidth, 175);
+        let previewWidth = NumCast(this.props.document.schemaPreviewWidth);
+        let scale = () => {
+            let newScale = 175 / NumCast(this.props.document.nativeWidth, 175);
+            console.log("New Scale: ", newScale);
+            return newScale;
+        };
         return (
             // <DocumentView
             //     Document={this.props.document}
@@ -819,12 +824,13 @@ export default class PresentationElement extends React.Component<PresentationEle
             //     zoomToScale={(scale: number) => { }}
             //     getScale={() => 3.1415}
             // />
+
             <div style={{
                 // overflowY: "scroll",
                 position: "relative",
                 // right: "45%",
                 // maxHeight: 250
-                height: propDocHeight === 0 ? "auto" : propDocHeight * scale(),
+                height: propDocHeight === 0 ? 100 : propDocHeight * scale(),
                 width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
                 marginTop: 15
 
@@ -837,8 +843,8 @@ export default class PresentationElement extends React.Component<PresentationEle
                     ScreenToLocalTransform={Transform.Identity}
                     addDocTab={returnFalse}
                     renderDepth={1}
-                    PanelWidth={() => 20}
-                    PanelHeight={() => 20}
+                    PanelWidth={() => 350}
+                    PanelHeight={() => 100}
                     focus={emptyFunction}
                     selectOnLoad={false}
                     parentActive={returnFalse}
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 95458b4ca..718af1bf2 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -811,7 +811,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         let width = NumCast(this.curPresentation.width);
 
         return (
-            <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
+            <div className="presentationView-cont" style={{ width: width, overflowY: "scroll", overflowX: "hidden" }}>
                 <div className="presentationView-heading">
                     {this.renderSelectOrPresSelection()}
                     <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
-- 
cgit v1.2.3-70-g09d2


From c6da9a2800037a951ea5070b4a77663401c4d00e Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 26 Jul 2019 18:52:30 -0400
Subject: resizable pres view

---
 .../views/presentationview/PresentationElement.tsx |  22 -----
 .../views/presentationview/PresentationView.scss   |   2 +-
 .../views/presentationview/PresentationView.tsx    | 109 +++++++++++++++------
 3 files changed, 80 insertions(+), 53 deletions(-)

(limited to 'src/client/views/presentationview/PresentationView.tsx')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 3297acee9..fdddf0e41 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -800,36 +800,14 @@ export default class PresentationElement extends React.Component<PresentationEle
         // </ul >;
         let propDocWidth = NumCast(this.props.document.nativeWidth);
         let propDocHeight = NumCast(this.props.document.nativeHeight);
-        let previewWidth = NumCast(this.props.document.schemaPreviewWidth);
         let scale = () => {
             let newScale = 175 / NumCast(this.props.document.nativeWidth, 175);
             console.log("New Scale: ", newScale);
             return newScale;
         };
         return (
-            // <DocumentView
-            //     Document={this.props.document}
-            //     ContainingCollectionView={undefined}
-            //     ScreenToLocalTransform={Transform.Identity}
-            //     renderDepth={7}
-            //     ContentScaling={() => 1}
-            //     PanelWidth={() => 400}
-            //     PanelHeight={() => 400}
-            //     focus={(doc: Doc, willZoom: boolean) => { }}
-            //     selectOnLoad={false}
-            //     parentActive={returnFalse}
-            //     whenActiveChanged={(isActive: boolean) => { }}
-            //     bringToFront={(doc: Doc) => { }}
-            //     addDocTab={(doc: Doc, dataDoc: Doc | undefined, where: string) => { }}
-            //     zoomToScale={(scale: number) => { }}
-            //     getScale={() => 3.1415}
-            // />
-
             <div style={{
-                // overflowY: "scroll",
                 position: "relative",
-                // right: "45%",
-                // maxHeight: 250
                 height: propDocHeight === 0 ? 100 : propDocHeight * scale(),
                 width: propDocWidth === 0 ? "auto" : propDocWidth * scale(),
                 marginTop: 15
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index 93cf0b365..5769a1a0a 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -1,7 +1,7 @@
 .presentationView-cont {
     position: absolute;
     background: white;
-    z-index: 1;
+    z-index: 2;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
     right: 0;
     top: 0;
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 718af1bf2..273fa5e5f 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -63,6 +63,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
     //Variable that holds reference to title input, so that new presentations get titles assigned.
     @observable titleInputElement: HTMLInputElement | undefined;
     @observable PresTitleChangeOpen: boolean = false;
+    @observable PresViewWidth: number | undefined;
 
     //initilize class variables
     constructor(props: PresViewProps) {
@@ -81,6 +82,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     //The first lifecycle function that gets called to set up the current presentation.
     async componentWillMount() {
+
         this.props.Documents.forEach(async (doc, index: number) => {
 
             //For each presentation received from mainContainer, a mapping is created.
@@ -806,43 +808,90 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.presElementsMappings.set(keyDoc, elem);
     }
 
+    //_downsize = 0;
+    onPointerDown = (e: React.PointerEvent) => {
+        //this._downsize = e.clientX;
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointerup", this.onPointerUp);
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    @action
+    onPointerMove = (e: PointerEvent) => {
+
+        this.curPresentation.width = Math.max(window.innerWidth - e.clientX, 255);
+    }
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        //this.isPointerDown = false;
+        // if (Math.abs(e.clientX - this._downsize) < 4) {
+        //     if (this.flyoutWidth < 5) this.flyoutWidth = 250;
+        //     else this.flyoutWidth = 0;
+        // }
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+    }
+
+    togglePresView = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        let width = NumCast(this.curPresentation.width);
+        if (width === 0) {
+            this.curPresentation.width = 255;
+        } else {
+            this.curPresentation.width = 0;
+        }
+    }
+
     render() {
 
         let width = NumCast(this.curPresentation.width);
+        this.PresViewWidth = width;
+
 
         return (
-            <div className="presentationView-cont" style={{ width: width, overflowY: "scroll", overflowX: "hidden" }}>
-                <div className="presentationView-heading">
-                    {this.renderSelectOrPresSelection()}
-                    <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
-                    <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
-                        runInAction(() => { if (this.PresTitleChangeOpen) { this.PresTitleChangeOpen = false; } });
-                        runInAction(() => this.PresTitleInputOpen ? this.PresTitleInputOpen = false : this.PresTitleInputOpen = true);
-                    }}><FontAwesomeIcon icon={"plus"} /></button>
-                    <button title="Remove Presentation" className='presentation-icon' style={{ marginRight: 10 }} onClick={this.removePresentation}><FontAwesomeIcon icon={"minus"} /></button>
-                    <button title="Change Presentation Title" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
-                        runInAction(() => { if (this.PresTitleInputOpen) { this.PresTitleInputOpen = false; } });
-                        runInAction(() => this.PresTitleChangeOpen ? this.PresTitleChangeOpen = false : this.PresTitleChangeOpen = true);
-                    }}><FontAwesomeIcon icon={"edit"} /></button>
+            <div>
+                <div className="presentationView-cont" style={{ width: width, overflowY: "scroll", overflowX: "hidden" }}>
+                    <div className="presentationView-heading">
+                        {this.renderSelectOrPresSelection()}
+                        <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
+                        <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
+                            runInAction(() => { if (this.PresTitleChangeOpen) { this.PresTitleChangeOpen = false; } });
+                            runInAction(() => this.PresTitleInputOpen ? this.PresTitleInputOpen = false : this.PresTitleInputOpen = true);
+                        }}><FontAwesomeIcon icon={"plus"} /></button>
+                        <button title="Remove Presentation" className='presentation-icon' style={{ marginRight: 10 }} onClick={this.removePresentation}><FontAwesomeIcon icon={"minus"} /></button>
+                        <button title="Change Presentation Title" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
+                            runInAction(() => { if (this.PresTitleInputOpen) { this.PresTitleInputOpen = false; } });
+                            runInAction(() => this.PresTitleChangeOpen ? this.PresTitleChangeOpen = false : this.PresTitleChangeOpen = true);
+                        }}><FontAwesomeIcon icon={"edit"} /></button>
+                    </div>
+                    <div className="presentation-buttons">
+                        <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                        {this.renderPlayPauseButton()}
+                        <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
+                    </div>
+
+                    <PresentationViewList
+                        mainDocument={this.curPresentation}
+                        deleteDocument={this.RemoveDoc}
+                        gotoDocument={this.gotoDocument}
+                        groupMappings={this.groupMappings}
+                        PresElementsMappings={this.presElementsMappings}
+                        setChildrenDocs={this.setChildrenDocs}
+                        presStatus={this.presStatus}
+                        presButtonBackUp={this.presButtonBackUp}
+                        presGroupBackUp={this.presGroupBackUp}
+                        removeDocByRef={this.removeDocByRef}
+                        clearElemMap={() => this.presElementsMappings.clear()}
+                    />
                 </div>
-                <div className="presentation-buttons">
-                    <button title="Back" className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
-                    {this.renderPlayPauseButton()}
-                    <button title="Next" className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
+                <div className="mainView-libraryHandle"
+                    style={{ cursor: "ew-resize", right: `${width - 10}px`, backgroundColor: "white" }}
+                    onPointerDown={this.onPointerDown} onClick={this.togglePresView}>
+                    <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
                 </div>
-                <PresentationViewList
-                    mainDocument={this.curPresentation}
-                    deleteDocument={this.RemoveDoc}
-                    gotoDocument={this.gotoDocument}
-                    groupMappings={this.groupMappings}
-                    PresElementsMappings={this.presElementsMappings}
-                    setChildrenDocs={this.setChildrenDocs}
-                    presStatus={this.presStatus}
-                    presButtonBackUp={this.presButtonBackUp}
-                    presGroupBackUp={this.presGroupBackUp}
-                    removeDocByRef={this.removeDocByRef}
-                    clearElemMap={() => this.presElementsMappings.clear()}
-                />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 811cb72cdb04b316f19d02c609ad515d6ec0a1b1 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Fri, 26 Jul 2019 18:54:37 -0400
Subject: CleanUp

---
 src/client/views/presentationview/PresentationView.scss | 7 +------
 src/client/views/presentationview/PresentationView.tsx  | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

(limited to 'src/client/views/presentationview/PresentationView.tsx')

diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index 5769a1a0a..ee413f379 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -21,12 +21,7 @@
     transition: all .1s;
     //max-height: 250px;
 
-    .jsx-parser {
-        // height: 300px;
-        //width: 400px;
-        // margin-top: 20px;
-        // overflow-y: scroll;
-    }
+    
 
     .documentView-node {
         // height: auto !important;
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 273fa5e5f..de6c8ff82 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -834,7 +834,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         document.removeEventListener("pointerup", this.onPointerUp);
     }
 
-    togglePresView = (e) => {
+    togglePresView = (e: React.MouseEvent) => {
         e.stopPropagation();
         e.preventDefault();
         let width = NumCast(this.curPresentation.width);
-- 
cgit v1.2.3-70-g09d2


From 215b73fbcfe0d6f205668e1bb7c755228e858ac9 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Mon, 29 Jul 2019 19:19:49 -0400
Subject: PresMode, CLoseable Pres, and some bug fixes

---
 src/client/views/MainView.tsx                      |   2 +-
 .../views/presentationview/PresentationElement.tsx |  24 ++++-
 .../views/presentationview/PresentationList.tsx    |   2 +-
 .../presentationview/PresentationModeMenu.scss     |  30 ++++++
 .../presentationview/PresentationModeMenu.tsx      |  92 ++++++++++++++++
 .../views/presentationview/PresentationView.scss   |   2 +-
 .../views/presentationview/PresentationView.tsx    | 116 +++++++++++++++++----
 7 files changed, 238 insertions(+), 30 deletions(-)
 create mode 100644 src/client/views/presentationview/PresentationModeMenu.scss
 create mode 100644 src/client/views/presentationview/PresentationModeMenu.tsx

(limited to 'src/client/views/presentationview/PresentationView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 53be0278e..0dbb241e4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -267,7 +267,7 @@ export class MainView extends React.Component {
                             zoomToScale={emptyFunction}
                             getScale={returnOne}
                         />}
-                    {castRes ? <PresentationView Documents={castRes} key="presentation" /> : null}
+                    {castRes ? <PresentationView addDocTab={this.addDocTabFunc} Documents={castRes} key="presentation" /> : null}
                 </div>
             }
         </Measure>;
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index fdddf0e41..05a70f79a 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -8,7 +8,7 @@ import "./PresentationView.scss";
 import { Utils, emptyFunction, returnFalse, returnOne } from "../../../Utils";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFile as fileSolid, faFileDownload, faLocationArrow, faArrowUp, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faFile as fileSolid, faFileDownload, faLocationArrow, faArrowUp, faSearch, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
 import { List } from "../../../new_fields/List";
 import { listSpec } from "../../../new_fields/Schema";
@@ -28,6 +28,7 @@ library.add(fileSolid);
 library.add(faLocationArrow);
 library.add(fileRegular as any);
 library.add(faSearch);
+library.add(faArrowRight);
 
 interface PresentationElementProps {
     mainDocument: Doc;
@@ -54,6 +55,7 @@ export enum buttonIndex {
     FadeAfter = 3,
     HideAfter = 4,
     Group = 5,
+    OpenRight = 6
 
 }
 
@@ -76,7 +78,7 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     constructor(props: PresentationElementProps) {
         super(props);
-        this.selectedButtons = new Array(6);
+        this.selectedButtons = new Array(7);
 
         this.presElRef = React.createRef();
     }
@@ -140,7 +142,7 @@ export default class PresentationElement extends React.Component<PresentationEle
 
         if (!foundDoc) {
             let newDoc = new Doc();
-            let defaultBooleanArray: boolean[] = new Array(6);
+            let defaultBooleanArray: boolean[] = new Array(7);
             newDoc.selectedButtons = new List(defaultBooleanArray);
             newDoc.docId = this.props.document[Id];
             castedList.push(newDoc);
@@ -402,6 +404,18 @@ export default class PresentationElement extends React.Component<PresentationEle
 
     }
 
+    @action
+    onRightTabClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (this.selectedButtons[buttonIndex.OpenRight]) {
+            this.selectedButtons[buttonIndex.OpenRight] = false;
+            // action maybe
+        } else {
+            this.selectedButtons[buttonIndex.OpenRight] = true;
+        }
+        this.autoSaveButtonChange(buttonIndex.OpenRight);
+    }
+
     /**
      * Creating a drop target for drag and drop when called.
      */
@@ -637,7 +651,7 @@ export default class PresentationElement extends React.Component<PresentationEle
      */
     getSelectedButtonsOfDoc = async (paramDoc: Doc) => {
         let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc));
-        let foundSelectedButtons: boolean[] = new Array(6);
+        let foundSelectedButtons: boolean[] = new Array(7);
 
         //if this is the first time this doc mounts, push a doc for it to store
         for (let doc of castedList!) {
@@ -887,6 +901,8 @@ export default class PresentationElement extends React.Component<PresentationEle
                     this.changeGroupStatus();
                     this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
                 }}> <FontAwesomeIcon icon={"arrow-up"} /> </button>
+                <button title="Open Right" className={this.selectedButtons[buttonIndex.OpenRight] ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onRightTabClick}><FontAwesomeIcon icon={"arrow-right"} /></button>
+
                 <br />
                 {this.renderEmbeddedInline()}
             </div>
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index 2d63d41b5..2a31137af 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -95,7 +95,7 @@ export default class PresentationViewList extends React.Component<PresListProps>
                                 this.props.PresElementsMappings.set(doc, e);
                             }
                         }}
-                        key={doc[Id]}
+                        key={doc[Id] + index}
                         mainDocument={this.props.mainDocument}
                         document={doc}
                         index={index}
diff --git a/src/client/views/presentationview/PresentationModeMenu.scss b/src/client/views/presentationview/PresentationModeMenu.scss
new file mode 100644
index 000000000..336f43d20
--- /dev/null
+++ b/src/client/views/presentationview/PresentationModeMenu.scss
@@ -0,0 +1,30 @@
+.presMenu-cont {
+    position: fixed;
+    z-index: 10000;
+    height: 35px;
+    background: #323232;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
+    border-radius: 0px 6px 6px 6px;
+    overflow: hidden;
+    display: flex;
+
+    .presMenu-button {
+        background-color: transparent;
+        width: 35px;
+        height: 35px;
+    }
+
+    .presMenu-button:hover {
+        background-color: #121212;
+    }
+
+    .presMenu-dragger {
+        height: 100%;
+        transition: width .2s;
+        background-image: url("https://logodix.com/logo/1020374.png");
+        background-size: 90% 100%;
+        background-repeat: no-repeat;
+        background-position: left center;
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresentationModeMenu.tsx b/src/client/views/presentationview/PresentationModeMenu.tsx
new file mode 100644
index 000000000..b3edeb1e2
--- /dev/null
+++ b/src/client/views/presentationview/PresentationModeMenu.tsx
@@ -0,0 +1,92 @@
+import React = require("react");
+import { observable, action, runInAction } from "mobx";
+import "./PresentationModeMenu.scss";
+import { observer } from "mobx-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+
+export interface PresModeMenuProps {
+    next: () => void;
+    back: () => void;
+    presStatus: boolean;
+    startOrResetPres: () => void;
+    closePresMode: () => void;
+}
+
+@observer
+export default class PresModeMenu extends React.Component<PresModeMenuProps> {
+
+    @observable private _top: number = 20;
+    @observable private _right: number = 0;
+    @observable private _opacity: number = 1;
+    @observable private _transition: string = "opacity 0.5s";
+    @observable private _transitionDelay: string = "";
+    //@observable private Pinned: boolean = false;
+
+
+    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+
+    @action
+    pointerEntered = (e: React.PointerEvent) => {
+        this._transition = "opacity 0.1s";
+        this._transitionDelay = "";
+        this._opacity = 1;
+    }
+
+    @action
+    dragging = (e: PointerEvent) => {
+        this._right -= e.movementX;
+        this._top += e.movementY;
+
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    dragEnd = (e: PointerEvent) => {
+        document.removeEventListener("pointermove", this.dragging);
+        document.removeEventListener("pointerup", this.dragEnd);
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    dragStart = (e: React.PointerEvent) => {
+        document.removeEventListener("pointermove", this.dragging);
+        document.addEventListener("pointermove", this.dragging);
+        document.removeEventListener("pointerup", this.dragEnd);
+        document.addEventListener("pointerup", this.dragEnd);
+        let clientRect = this._mainCont.current!.getBoundingClientRect();
+
+        // runInAction(() => this._left = (clientRect.width - e.nativeEvent.offsetX) + clientRect.left);
+        // runInAction(() => this._top = e.nativeEvent.offsetY);
+
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    renderPlayPauseButton = () => {
+        if (this.props.presStatus) {
+            return <button title="Reset Presentation" className="presMenu-button" onClick={this.props.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
+        } else {
+            return <button title="Start Presentation From Start" className="presMenu-button" onClick={this.props.startOrResetPres}><FontAwesomeIcon icon="play" /></button>;
+        }
+    }
+
+    render() {
+        return (
+            <div className="presMenu-cont" onPointerEnter={this.pointerEntered} ref={this._mainCont}
+                style={{ right: this._right, top: this._top, opacity: this._opacity, transition: this._transition, transitionDelay: this._transitionDelay }}>
+                <button title="Back" className="presMenu-button" onClick={this.props.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                {this.renderPlayPauseButton()}
+                <button title="Next" className="presMenu-button" onClick={this.props.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
+                <button className="presMenu-button" title="Close Presentation Menu" onClick={this.props.closePresMode}>
+                    <FontAwesomeIcon icon="times" size="lg" />
+                </button>
+                <div className="presMenu-dragger" onPointerDown={this.dragStart} style={{ width: "20px" }} />
+            </div >
+        );
+    }
+
+
+
+
+}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index ee413f379..97cbd4a24 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -66,7 +66,7 @@
     padding-bottom: 3px;
     font-size: 25px;
     display: inline-block;
-    width: calc(100% - 160px);
+    width: calc(100% - 200px);
 }
 
 .presentation-icon {
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index de6c8ff82..70d86624c 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -4,7 +4,7 @@ import { observable, action, runInAction, reaction, autorun } from "mobx";
 import "./PresentationView.scss";
 import { DocumentManager } from "../../util/DocumentManager";
 import { Utils } from "../../../Utils";
-import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
+import { Doc, DocListCast, DocListCastAsync, WidthSym } from "../../../new_fields/Doc";
 import { listSpec } from "../../../new_fields/Schema";
 import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
@@ -12,11 +12,12 @@ import { List } from "../../../new_fields/List";
 import PresentationElement, { buttonIndex } from "./PresentationElement";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faArrowLeft, faPlay, faStop, faPlus, faTimes, faMinus, faEdit, faEye } from '@fortawesome/free-solid-svg-icons';
 import { Docs } from "../../documents/Documents";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
 import PresentationViewList from "./PresentationList";
 import { ContextMenu } from "../ContextMenu";
+import PresModeMenu from "./PresentationModeMenu";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -26,10 +27,12 @@ library.add(faPlus);
 library.add(faTimes);
 library.add(faMinus);
 library.add(faEdit);
+library.add(faEye);
 
 
 export interface PresViewProps {
     Documents: List<Doc>;
+    addDocTab: (doc: Doc) => void;
 }
 
 const expandedWidth = 400;
@@ -63,7 +66,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
     //Variable that holds reference to title input, so that new presentations get titles assigned.
     @observable titleInputElement: HTMLInputElement | undefined;
     @observable PresTitleChangeOpen: boolean = false;
-    @observable PresViewWidth: number | undefined;
+    @observable presMode: boolean = false;
+
 
     //initilize class variables
     constructor(props: PresViewProps) {
@@ -360,11 +364,21 @@ export class PresentationView extends React.Component<PresViewProps>  {
             //checking if curDoc has navigation open
             let curDocButtons = this.presElementsMappings.get(curDoc)!.selected;
             if (curDocButtons[buttonIndex.Navigate]) {
-                DocumentManager.Instance.jumpToDocument(curDoc, false);
+                // if (curDocButtons[buttonIndex.OpenRight]) {
+                //     DocumentManager.Instance.jumpToDocument(curDoc, false);
+                // } else {
+                //     DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, this.props.addDocTab);
+                // }
+                this.jumpToTabOrRight(curDocButtons, curDoc);
             } else if (curDocButtons[buttonIndex.Show]) {
                 let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]);
-                //awaiting jump so that new scale can be found, since jumping is async
-                await DocumentManager.Instance.jumpToDocument(curDoc, true);
+                if (curDocButtons[buttonIndex.OpenRight]) {
+                    //awaiting jump so that new scale can be found, since jumping is async
+                    await DocumentManager.Instance.jumpToDocument(curDoc, true);
+                } else {
+                    await DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, this.props.addDocTab);
+                }
+
                 let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
                 curDoc.viewScale = newScale;
 
@@ -377,9 +391,15 @@ export class PresentationView extends React.Component<PresViewProps>  {
             return;
         }
         let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]);
+        let curDocButtons = this.presElementsMappings.get(docToJump)!.selected;
 
-        //awaiting jump so that new scale can be found, since jumping is async
-        await DocumentManager.Instance.jumpToDocument(docToJump, willZoom);
+
+        if (curDocButtons[buttonIndex.OpenRight]) {
+            //awaiting jump so that new scale can be found, since jumping is async
+            await DocumentManager.Instance.jumpToDocument(docToJump, willZoom);
+        } else {
+            await DocumentManager.Instance.jumpToDocument(docToJump, willZoom, undefined, this.props.addDocTab);
+        }
         let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
         curDoc.viewScale = newScale;
         //saving the scale that user was on
@@ -389,6 +409,15 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
 
+    jumpToTabOrRight = (curDocButtons: boolean[], curDoc: Doc) => {
+        if (curDocButtons[buttonIndex.OpenRight]) {
+            DocumentManager.Instance.jumpToDocument(curDoc, false);
+        } else {
+            console.log("Open in tab!!");
+            DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, this.props.addDocTab);
+        }
+    }
+
     /**
      * Async function that supposedly return the doc that is located at given index.
      */
@@ -578,18 +607,35 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     //The function that starts or resets presentaton functionally, depending on status flag.
     @action
-    startOrResetPres = () => {
+    startOrResetPres = async () => {
         if (this.presStatus) {
             this.resetPresentation();
         } else {
             this.presStatus = true;
-            this.startPresentation(0);
+            let startIndex = await this.findStartDocument();
+            this.startPresentation(startIndex);
             const current = NumCast(this.curPresentation.selectedDoc);
-            this.gotoDocument(0, current);
+            this.gotoDocument(startIndex, current);
         }
         this.curPresentation.presStatus = this.presStatus;
     }
 
+    findStartDocument = async () => {
+        let docAtZero = await this.getDocAtIndex(0);
+        if (docAtZero === undefined) {
+            return 0;
+        }
+        let docAtZeroPresId = StrCast(docAtZero.presentId);
+
+        if (this.groupMappings.has(docAtZeroPresId)) {
+            let group = this.groupMappings.get(docAtZeroPresId)!;
+            let lastDoc = group[group.length - 1];
+            return this.childrenDocs.indexOf(lastDoc);
+        } else {
+            return 0;
+        }
+    }
+
     //The function that resets the presentation by removing every action done by it. It also
     //stops the presentaton.
     @action
@@ -808,9 +854,9 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.presElementsMappings.set(keyDoc, elem);
     }
 
-    //_downsize = 0;
+    _downsize = 0;
     onPointerDown = (e: React.PointerEvent) => {
-        //this._downsize = e.clientX;
+        this._downsize = e.clientX;
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
         document.addEventListener("pointermove", this.onPointerMove);
@@ -821,15 +867,16 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @action
     onPointerMove = (e: PointerEvent) => {
 
-        this.curPresentation.width = Math.max(window.innerWidth - e.clientX, 255);
+        this.curPresentation.width = Math.max(window.innerWidth - e.clientX, 300);
     }
     @action
     onPointerUp = (e: PointerEvent) => {
-        //this.isPointerDown = false;
-        // if (Math.abs(e.clientX - this._downsize) < 4) {
-        //     if (this.flyoutWidth < 5) this.flyoutWidth = 250;
-        //     else this.flyoutWidth = 0;
-        // }
+        if (Math.abs(e.clientX - this._downsize) < 4) {
+            let presWidth = NumCast(this.curPresentation.width);
+            if (presWidth - 300 !== 0) {
+                this.curPresentation.width = 0;
+            }
+        }
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
     }
@@ -839,17 +886,38 @@ export class PresentationView extends React.Component<PresViewProps>  {
         e.preventDefault();
         let width = NumCast(this.curPresentation.width);
         if (width === 0) {
-            this.curPresentation.width = 255;
-        } else {
+            this.curPresentation.width = 300;
+        }
+    }
+    @action
+    openPresMode = () => {
+        if (!this.presMode) {
             this.curPresentation.width = 0;
+            this.presMode = true;
+        }
+    }
+
+    @action
+    closePresMode = () => {
+        if (this.presMode) {
+            this.presMode = false;
+            this.curPresentation.width = 300;
+        }
+
+    }
+
+    renderPresMode = () => {
+        if (this.presMode) {
+            return <PresModeMenu next={this.next} back={this.back} startOrResetPres={this.startOrResetPres} presStatus={this.presStatus} closePresMode={this.closePresMode} />;
+        } else {
+            return (null);
         }
+
     }
 
     render() {
 
         let width = NumCast(this.curPresentation.width);
-        this.PresViewWidth = width;
-
 
         return (
             <div>
@@ -857,6 +925,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     <div className="presentationView-heading">
                         {this.renderSelectOrPresSelection()}
                         <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
+                        <button title="Open Presentation Mode" className="presentation-icon" style={{ marginRight: 10 }} onClick={this.openPresMode}><FontAwesomeIcon icon={"eye"} /></button>
                         <button title="Add Presentation" className="presentation-icon" style={{ marginRight: 10 }} onClick={() => {
                             runInAction(() => { if (this.PresTitleChangeOpen) { this.PresTitleChangeOpen = false; } });
                             runInAction(() => this.PresTitleInputOpen ? this.PresTitleInputOpen = false : this.PresTitleInputOpen = true);
@@ -892,6 +961,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     onPointerDown={this.onPointerDown} onClick={this.togglePresView}>
                     <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
                 </div>
+                {this.renderPresMode()}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 7b2bbf518779db3d5ef389f6a9f0d41aa2862999 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Mon, 29 Jul 2019 19:54:00 -0400
Subject: trying to get tab

---
 src/client/views/presentationview/PresentationView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/client/views/presentationview/PresentationView.tsx')

diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index cd38fc2ec..c583ae4ce 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -18,6 +18,7 @@ import { undoBatch, UndoManager } from "../../util/UndoManager";
 import PresentationViewList from "./PresentationList";
 import { ContextMenu } from "../ContextMenu";
 import PresModeMenu from "./PresentationModeMenu";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -418,7 +419,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
             DocumentManager.Instance.jumpToDocument(curDoc, false);
         } else {
             console.log("Open in tab!!");
-            DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, this.props.addDocTab);
+            // DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, this.props.addDocTab);
+            CollectionDockingView.Instance.AddTab(undefined, curDoc, undefined);
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From c4a8b656eff910fb6c2cd1693308f0b948547cb0 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Mon, 29 Jul 2019 20:43:18 -0400
Subject: Opening as a tab if not present as default instead of open right

---
 src/client/views/MainView.tsx                          |  2 +-
 src/client/views/presentationview/PresentationView.tsx | 14 +++-----------
 2 files changed, 4 insertions(+), 12 deletions(-)

(limited to 'src/client/views/presentationview/PresentationView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 0f9f2687b..91c8fe57c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -277,7 +277,7 @@ export class MainView extends React.Component {
                             zoomToScale={emptyFunction}
                             getScale={returnOne}
                         />}
-                    {castRes ? <PresentationView addDocTab={this.addDocTabFunc} Documents={castRes} key="presentation" /> : null}
+                    {castRes ? <PresentationView Documents={castRes} key="presentation" /> : null}
                 </div>
             }
         </Measure>;
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index c583ae4ce..ea85a8c6a 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -33,7 +33,6 @@ library.add(faEye);
 
 export interface PresViewProps {
     Documents: List<Doc>;
-    addDocTab: (doc: Doc) => void;
 }
 
 const expandedWidth = 400;
@@ -369,11 +368,6 @@ export class PresentationView extends React.Component<PresViewProps>  {
             //checking if curDoc has navigation open
             let curDocButtons = this.presElementsMappings.get(curDoc)!.selected;
             if (curDocButtons[buttonIndex.Navigate]) {
-                // if (curDocButtons[buttonIndex.OpenRight]) {
-                //     DocumentManager.Instance.jumpToDocument(curDoc, false);
-                // } else {
-                //     DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, this.props.addDocTab);
-                // }
                 this.jumpToTabOrRight(curDocButtons, curDoc);
             } else if (curDocButtons[buttonIndex.Show]) {
                 let curScale = DocumentManager.Instance.getScaleOfDocView(this.childrenDocs[fromDoc]);
@@ -381,7 +375,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
                     //awaiting jump so that new scale can be found, since jumping is async
                     await DocumentManager.Instance.jumpToDocument(curDoc, true);
                 } else {
-                    await DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, this.props.addDocTab);
+                    await DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, doc => CollectionDockingView.Instance.AddTab(undefined, doc, undefined));
                 }
 
                 let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
@@ -403,7 +397,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
             //awaiting jump so that new scale can be found, since jumping is async
             await DocumentManager.Instance.jumpToDocument(docToJump, willZoom);
         } else {
-            await DocumentManager.Instance.jumpToDocument(docToJump, willZoom, undefined, this.props.addDocTab);
+            await DocumentManager.Instance.jumpToDocument(docToJump, willZoom, undefined, doc => CollectionDockingView.Instance.AddTab(undefined, doc, undefined));
         }
         let newScale = DocumentManager.Instance.getScaleOfDocView(curDoc);
         curDoc.viewScale = newScale;
@@ -418,9 +412,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
         if (curDocButtons[buttonIndex.OpenRight]) {
             DocumentManager.Instance.jumpToDocument(curDoc, false);
         } else {
-            console.log("Open in tab!!");
-            // DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, this.props.addDocTab);
-            CollectionDockingView.Instance.AddTab(undefined, curDoc, undefined);
+            DocumentManager.Instance.jumpToDocument(curDoc, false, undefined, doc => CollectionDockingView.Instance.AddTab(undefined, doc, undefined));
         }
     }
 
-- 
cgit v1.2.3-70-g09d2

