From 464096297d34bb824ed665aa50dfb58f268c1d12 Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Tue, 4 Jun 2019 20:01:59 -0400
Subject: BUttons in Presentation CSSed and grouping up insertion done, removal
 almost done

---
 .../views/presentationview/PresentationView.scss   | 88 ++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 src/client/views/presentationview/PresentationView.scss

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

diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
new file mode 100644
index 000000000..07c3e69fd
--- /dev/null
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -0,0 +1,88 @@
+.presentationView-cont {
+    position: absolute;
+    background: white;
+    z-index: 1;
+    box-shadow: #AAAAAA .2vw .2vw .4vw;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.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;
+}
+
+.presentationView-listCont {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.presentationView-item:hover {
+    transition: all .1s;
+    background: #AAAAAA
+}
+
+.presentationView-selected {
+    background: gray;
+}
+
+.presentationView-heading {
+    background: lightseagreen;
+    padding: 10px;
+    display: inline-block;
+    width: 100%;
+}
+
+.presentationView-title {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    font-size: 25px;
+    display: inline-block;
+}
+
+.presentation-icon {
+    float: right;
+}
+
+.presentation-interaction {
+    float: left;
+}
+
+.presentation-interaction-selected {
+    background: #505050;
+    float: left;
+}
+
+.presentationView-name {
+    font-size: 15px;
+    display: inline-block;
+}
+
+.presentation-button {
+    margin-right: 12.5%;
+    margin-left: 12.5%;
+    width: 25%;
+}
+
+.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
-- 
cgit v1.2.3-70-g09d2


From cd483361f9b372dc79a001e3182fdac459e229ec Mon Sep 17 00:00:00 2001
From: madelinegr <mgriswold99@gmail.com>
Date: Mon, 10 Jun 2019 13:34:42 -0400
Subject: Start/Reset and interaction while playin added

---
 .../views/presentationview/PresentationElement.tsx | 42 ++++++++++---
 .../views/presentationview/PresentationView.scss   |  4 +-
 .../views/presentationview/PresentationView.tsx    | 69 +++++++++++++++++++---
 3 files changed, 97 insertions(+), 18 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index dfe078a8e..f346940a2 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -28,6 +28,8 @@ interface PresentationElementProps {
     gotoDocument(index: number): void;
     allListElements: Doc[];
     groupMappings: Map<String, Doc[]>;
+    presStatus: boolean;
+
 
 }
 
@@ -158,11 +160,15 @@ export default class PresentationElement extends React.Component<PresentationEle
         const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.HideTillPressed]) {
             this.selectedButtons[buttonIndex.HideTillPressed] = false;
-            this.props.document.opacity = 1;
+            if (this.props.index >= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             this.selectedButtons[buttonIndex.HideTillPressed] = true;
-            if (this.props.index > current) {
-                this.props.document.opacity = 0;
+            if (this.props.presStatus) {
+                if (this.props.index > current) {
+                    this.props.document.opacity = 0;
+                }
             }
         }
     }
@@ -175,13 +181,22 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.HideAfter]) {
             this.selectedButtons[buttonIndex.HideAfter] = false;
+            if (this.props.index <= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             if (this.selectedButtons[buttonIndex.FadeAfter]) {
                 this.selectedButtons[buttonIndex.FadeAfter] = false;
             }
             this.selectedButtons[buttonIndex.HideAfter] = true;
+            if (this.props.presStatus) {
+                if (this.props.index < current) {
+                    this.props.document.opacity = 0;
+                }
+            }
         }
     }
 
@@ -193,13 +208,22 @@ export default class PresentationElement extends React.Component<PresentationEle
     @action
     onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        const current = NumCast(this.props.mainDocument.selectedDoc);
         if (this.selectedButtons[buttonIndex.FadeAfter]) {
             this.selectedButtons[buttonIndex.FadeAfter] = false;
+            if (this.props.index <= current) {
+                this.props.document.opacity = 1;
+            }
         } else {
             if (this.selectedButtons[buttonIndex.HideAfter]) {
                 this.selectedButtons[buttonIndex.HideAfter] = false;
             }
             this.selectedButtons[buttonIndex.FadeAfter] = true;
+            if (this.props.presStatus) {
+                if (this.props.index < current) {
+                    this.props.document.opacity = 0.5;
+                }
+            }
         }
     }
 
@@ -246,12 +270,12 @@ export default class PresentationElement extends React.Component<PresentationEle
                 </strong>
                 <button className="presentation-icon" onClick={e => { this.props.deleteDocument(p.index); e.stopPropagation(); }}>X</button>
                 <br></br>
-                <button className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}><FontAwesomeIcon icon={"search"} /></button>
-                <button className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
-                <button className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
-                <button className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} color={"gray"} /></button>
-                <button className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} /></button>
-                <button className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
+                <button title="Zoom" className={this.selectedButtons[buttonIndex.Show] ? "presentation-interaction-selected" : "presentation-interaction"}><FontAwesomeIcon icon={"search"} /></button>
+                <button title="Navigate" className={this.selectedButtons[buttonIndex.Navigate] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} /></button>
+                <button title="Hide Document Till Presented" className={this.selectedButtons[buttonIndex.HideTillPressed] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={fileSolid} /></button>
+                <button title="Fade Document After Presented" className={this.selectedButtons[buttonIndex.FadeAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} color={"gray"} /></button>
+                <button title="Hide Document After Presented" className={this.selectedButtons[buttonIndex.HideAfter] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={fileRegular} /></button>
+                <button title="Group With Up" className={this.selectedButtons[buttonIndex.Group] ? "presentation-interaction-selected" : "presentation-interaction"} onClick={(e) => {
                     e.stopPropagation();
                     this.changeGroupStatus();
                     this.onGroupClick(p.document, p.index, this.selectedButtons[buttonIndex.Group]);
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index 07c3e69fd..5f2b80474 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -68,8 +68,8 @@
 }
 
 .presentation-button {
-    margin-right: 12.5%;
-    margin-left: 12.5%;
+    margin-right: 2.5%;
+    margin-left: 2.5%;
     width: 25%;
 }
 
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index e987d12f6..93c084dfd 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -13,10 +13,12 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_
 import PresentationElement, { buttonIndex } from "./PresentationElement";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faArrowLeft, faPlay, faStop } from '@fortawesome/free-solid-svg-icons';
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
+library.add(faPlay);
+library.add(faStop);
 
 export interface PresViewProps {
     Document: Doc;
@@ -28,6 +30,7 @@ interface PresListProps extends PresViewProps {
     groupMappings: Map<String, Doc[]>;
     presElementsMappings: Map<Doc, PresentationElement>;
     setChildrenDocs: (docList: Doc[]) => void;
+    presStatus: boolean;
 }
 
 
@@ -61,7 +64,7 @@ class PresentationViewList extends React.Component<PresListProps> {
         return (
 
             <div className="presentationView-listCont">
-                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} />)}
+                {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} key={index} mainDocument={this.props.Document} document={doc} index={index} deleteDocument={this.props.deleteDocument} gotoDocument={this.props.gotoDocument} groupMappings={this.props.groupMappings} allListElements={children} presStatus={this.props.presStatus} />)}
             </div>
         );
     }
@@ -78,6 +81,8 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable presElementsMappings: Map<Doc, PresentationElement> = new Map();
     //variable that holds all the docs in the presentation
     @observable childrenDocs: Doc[] = [];
+    //variable to hold if presentation is started
+    @observable presStatus: boolean = false;
 
     //observable means render is re-called every time variable is changed
     @observable
@@ -259,10 +264,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         this.props.Document.selectedDoc = index;
         const doc = await list[index];
-        this.navigateToElement(doc);
-        this.hideIfNotPresented(index);
-        this.showAfterPresented(index);
-
+        if (this.presStatus) {
+            this.navigateToElement(doc);
+            this.hideIfNotPresented(index);
+            this.showAfterPresented(index);
+        }
 
     }
 
@@ -293,6 +299,54 @@ export class PresentationView extends React.Component<PresViewProps>  {
         this.childrenDocs = docList;
     }
 
+    renderPlayPauseButton = () => {
+        if (this.presStatus) {
+            return <button className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
+        } else {
+            return <button className="presentation-button" onClick={this.startOrResetPres}><FontAwesomeIcon icon="play" /></button>;
+        }
+    }
+
+    @action
+    startOrResetPres = () => {
+        if (this.presStatus) {
+            this.presStatus = false;
+            this.resetPresentation();
+        } else {
+            this.presStatus = true;
+            this.startPresentation();
+        }
+    }
+
+    @action
+    resetPresentation = () => {
+        this.groupMappings = new Map();
+        let selectedButtons: boolean[];
+        this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
+            selectedButtons = component.selected;
+            selectedButtons.forEach((val: boolean, index: number) => selectedButtons[index] = false);
+            doc.presentId = Utils.GenerateGuid();
+            doc.opacity = 1;
+        });
+        this.props.Document.selectedDoc = 0;
+
+    }
+
+    startPresentation = () => {
+        this.props.Document.selectedDoc = 0;
+        let selectedButtons: boolean[];
+        this.presElementsMappings.forEach((component: PresentationElement, doc: Doc) => {
+            selectedButtons = component.selected;
+            if (selectedButtons[buttonIndex.HideTillPressed]) {
+                if (this.childrenDocs.indexOf(doc) > 0) {
+                    doc.opacity = 0;
+                }
+
+            }
+        });
+
+    }
+
     render() {
         let titleStr = StrCast(this.props.Document.title);
         let width = NumCast(this.props.Document.width);
@@ -306,9 +360,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
                 </div>
                 <div className="presentation-buttons">
                     <button className="presentation-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
+                    {this.renderPlayPauseButton()}
                     <button className="presentation-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></button>
                 </div>
-                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} />
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} groupMappings={this.groupMappings} presElementsMappings={this.presElementsMappings} setChildrenDocs={this.setChildrenDocs} presStatus={this.presStatus} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 64ffa0accfc872c81035079527952aabaf56c6f6 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 25 Jun 2019 13:16:45 -0400
Subject: Small Css Fix On weight

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

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

diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index 5f2b80474..a35a5849b 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -47,6 +47,7 @@
     padding-bottom: 3px;
     font-size: 25px;
     display: inline-block;
+    width: calc(100% - 160px);
 }
 
 .presentation-icon {
-- 
cgit v1.2.3-70-g09d2


From 118ca303bb18648451fe9c349c79594833d95001 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 3 Jul 2019 18:30:09 -0400
Subject: Reordering Done, Back-up protecting should be added

---
 .../views/presentationview/PresentationElement.tsx | 51 +++++++++++++++++-----
 .../views/presentationview/PresentationView.scss   |  8 ++++
 2 files changed, 48 insertions(+), 11 deletions(-)

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

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 79a27b4e9..23031f02c 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -98,6 +98,10 @@ export default class PresentationElement extends React.Component<PresentationEle
     //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered.
     async componentDidUpdate() {
         this.receiveButtonBackUp();
+        if (this.presElRef.current) {
+            this.header = this.presElRef.current;
+            this.createListDropTarget(this.presElRef.current);
+        }
     }
 
     receiveButtonBackUp = async () => {
@@ -385,9 +389,9 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     ScreenToLocalListTransform = (xCord: number, yCord: number) => {
-        let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        return [yCord + scrollTop, xCord + scrollLeft];
+        // let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        return [xCord, yCord];
     }
 
 
@@ -401,25 +405,46 @@ export default class PresentationElement extends React.Component<PresentationEle
             e.stopPropagation();
             //where does treeViewId come from
             let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
+            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.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);
         }
+        document.removeEventListener("pointermove", this.onDragMove, true);
+
         return false;
     }
 
     onPointerEnter = (e: React.PointerEvent): void => {
-        //this.props.document.libraryBrush = true;
+        this.props.document.libraryBrush = true;
         if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
-            //this.header!.className = "treeViewItem-header";
+            let selected = NumCast(this.props.mainDocument.selectedDoc, 0);
+
+            this.header!.className = "presentationView-item";
+
+
+            if (selected === this.props.index) {
+                //this doc is selected
+                this.header!.className = "presentationView-item presentationView-selected";
+            }
             document.addEventListener("pointermove", this.onDragMove, true);
         }
     }
     onPointerLeave = (e: React.PointerEvent): void => {
         this.props.document.libraryBrush = false;
-        //this.header!.className = "treeViewItem-header";
+        //to get currently selected presentation doc
+        let selected = NumCast(this.props.mainDocument.selectedDoc, 0);
+
+        this.header!.className = "presentationView-item";
+
+
+        if (selected === this.props.index) {
+            //this doc is selected
+            this.header!.className = "presentationView-item presentationView-selected";
+
+        }
         document.removeEventListener("pointermove", this.onDragMove, true);
     }
 
@@ -429,9 +454,13 @@ export default class PresentationElement extends React.Component<PresentationEle
         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 = "treeViewItem-header";
-        // if (before) this.header!.className += " treeViewItem-header-above";
-        // else if (!before) this.header!.className += " treeViewItem-header-below";
+        this.header!.className = "presentationView-item";
+        if (before) {
+            this.header!.className += " presentationView-item-above";
+        }
+        else if (!before) {
+            this.header!.className += " presentationView-item-below";
+        }
         e.stopPropagation();
     }
 
@@ -449,7 +478,7 @@ export default class PresentationElement extends React.Component<PresentationEle
         //to get currently selected presentation doc
         let selected = NumCast(p.mainDocument.selectedDoc, 0);
 
-        let className = "presentationView-item";
+        let className = " presentationView-item";
         if (selected === p.index) {
             //this doc is selected
             className += " presentationView-selected";
@@ -461,7 +490,7 @@ export default class PresentationElement extends React.Component<PresentationEle
         return (
             <div className={className} key={p.document[Id] + p.index}
                 ref={this.presElRef}
-                onPointerEnter={onEnter} onPointerLeave={onLeave}
+                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
                 onPointerDown={onItemDown}
                 style={{
                     outlineColor: "maroon",
diff --git a/src/client/views/presentationview/PresentationView.scss b/src/client/views/presentationview/PresentationView.scss
index a35a5849b..2bb0ec8c8 100644
--- a/src/client/views/presentationview/PresentationView.scss
+++ b/src/client/views/presentationview/PresentationView.scss
@@ -21,6 +21,14 @@
     transition: all .1s;
 }
 
+.presentationView-item-above {
+    border-top: black 2px solid;
+}
+
+.presentationView-item-below {
+    border-bottom: black 2px solid;
+}
+
 .presentationView-listCont {
     padding-left: 10px;
     padding-right: 10px;
-- 
cgit v1.2.3-70-g09d2