From d7f515f32de780884774e7bbdcc1cfe78733af45 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 30 Sep 2019 14:01:59 -0400
Subject: a bunch of changes to presentation view ... more coming.

---
 .../views/presentationview/PresentationElement.tsx |  19 ++--
 .../views/presentationview/PresentationList.tsx    |   9 --
 .../presentationview/PresentationModeMenu.scss     |  30 ------
 .../presentationview/PresentationModeMenu.tsx      | 101 ---------------------
 4 files changed, 8 insertions(+), 151 deletions(-)
 delete mode 100644 src/client/views/presentationview/PresentationModeMenu.scss
 delete mode 100644 src/client/views/presentationview/PresentationModeMenu.tsx

(limited to 'src/client/views/presentationview')

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 126d62c52..6e8c28d34 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -1,6 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
-import { faArrowRight, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
@@ -22,7 +22,7 @@ library.add(fileSolid);
 library.add(faLocationArrow);
 library.add(fileRegular as any);
 library.add(faSearch);
-library.add(faArrowRight);
+library.add(faArrowDown);
 
 interface PresentationElementProps {
     mainDocument: Doc;
@@ -33,7 +33,6 @@ interface PresentationElementProps {
     allListElements: Doc[];
     presStatus: boolean;
     removeDocByRef(doc: Doc): boolean;
-    PresElementsMappings: Map<Doc, PresentationElement>;
 }
 
 /**
@@ -59,14 +58,14 @@ export default class PresentationElement extends React.Component<PresentationEle
     @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 openRightButton() { return BoolCast(this.props.document.openRightButton); }
+    @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 openRightButton(val: boolean) { this.props.document.openRightButton = val; }
+    set expandInlineButton(val: boolean) { this.props.document.expandInlineButton = val; }
 
     //Lifecycle function that makes sure that button BackUp is received when mounted.
     async componentDidMount() {
@@ -190,14 +189,12 @@ export default class PresentationElement extends React.Component<PresentationEle
     }
 
     /**
-     * Function that opens up the option to open a element on right when navigated,
-     * instead of openening it as tab as default.
+     * Function that expands the target inline
      */
     @action
-    onRightTabClick = (e: React.MouseEvent) => {
+    onExpandTabClick = (e: React.MouseEvent) => {
         e.stopPropagation();
-
-        this.openRightButton = !this.openRightButton;
+        this.embedInline = !this.embedInline
     }
 
     /**
@@ -416,7 +413,7 @@ export default class PresentationElement extends React.Component<PresentationEle
                 <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="Open Right" className={this.openRightButton ? "presentation-interaction-selected" : "presentation-interaction"} onPointerDown={(e) => e.stopPropagation()} onClick={this.onRightTabClick}><FontAwesomeIcon icon={"arrow-right"} /></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>
 
                 <br />
                 {this.renderEmbeddedInline()}
diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx
index da48a856a..483461e5a 100644
--- a/src/client/views/presentationview/PresentationList.tsx
+++ b/src/client/views/presentationview/PresentationList.tsx
@@ -12,11 +12,9 @@ interface PresListProps {
     mainDocument: Doc;
     deleteDocument(index: number): void;
     gotoDocument(index: number, fromDoc: number): Promise<void>;
-    PresElementsMappings: Map<Doc, PresentationElement>;
     setChildrenDocs: (docList: Doc[]) => void;
     presStatus: boolean;
     removeDocByRef(doc: Doc): boolean;
-    clearElemMap(): void;
 }
 
 
@@ -45,16 +43,10 @@ export default class PresentationViewList extends React.Component<PresListProps>
         const children = DocListCast(this.props.mainDocument.data);
         this.initializeScaleViews(children);
         this.props.setChildrenDocs(children);
-        this.props.clearElemMap();
         return (
             <div className="presentationView-listCont" >
                 {children.map((doc: Doc, index: number) =>
                     <PresentationElement
-                        ref={(e) => {
-                            if (e && e !== null) {
-                                this.props.PresElementsMappings.set(doc, e);
-                            }
-                        }}
                         key={doc[Id]}
                         mainDocument={this.props.mainDocument}
                         document={doc}
@@ -64,7 +56,6 @@ export default class PresentationViewList extends React.Component<PresListProps>
                         allListElements={children}
                         presStatus={this.props.presStatus}
                         removeDocByRef={this.props.removeDocByRef}
-                        PresElementsMappings={this.props.PresElementsMappings}
                     />
                 )}
             </div>
diff --git a/src/client/views/presentationview/PresentationModeMenu.scss b/src/client/views/presentationview/PresentationModeMenu.scss
deleted file mode 100644
index 336f43d20..000000000
--- a/src/client/views/presentationview/PresentationModeMenu.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.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
deleted file mode 100644
index e4123a1fe..000000000
--- a/src/client/views/presentationview/PresentationModeMenu.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-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;
-}
-
-/**
- * This class is responsible for modeling of the Presentation Mode Menu. The menu allows
- * user to navigate through presentation elements, and start/stop the presentation.
- */
-@observer
-export default class PresModeMenu extends React.Component<PresModeMenuProps> {
-
-    @observable private _top: number = 20;
-    @observable private _left: number = window.innerWidth - 160;
-    @observable private _opacity: number = 1;
-    @observable private _transition: string = "opacity 0.5s";
-    @observable private _transitionDelay: string = "";
-    private _offsetY: number = 0;
-    private _offsetX: number = 0;
-
-
-    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
-
-    /**
-     * The function that changes the coordinates of the menu, depending on the
-     * movement of the mouse when it's being dragged.
-     */
-    @action
-    dragging = (e: PointerEvent) => {
-        this._left = e.pageX - this._offsetX;
-        this._top = e.pageY - this._offsetY;
-
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    /**
-     * The function that removes the event listeners that are responsible for
-     * dragging of the menu.
-     */
-    dragEnd = (e: PointerEvent) => {
-        document.removeEventListener("pointermove", this.dragging);
-        document.removeEventListener("pointerup", this.dragEnd);
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    /**
-     * The function that starts the dragging of the presentation mode menu. When
-     * the lines on further right are clicked on.
-     */
-    dragStart = (e: React.PointerEvent) => {
-        document.removeEventListener("pointermove", this.dragging);
-        document.addEventListener("pointermove", this.dragging);
-        document.removeEventListener("pointerup", this.dragEnd);
-        document.addEventListener("pointerup", this.dragEnd);
-
-        this._offsetX = this._mainCont.current!.getBoundingClientRect().width - e.nativeEvent.offsetX;
-        this._offsetY = e.nativeEvent.offsetY;
-
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    /**
-     * The function that is responsible for rendering the play or pause button, depending on the
-     * status of the presentation.
-     */
-    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" ref={this._mainCont}
-                style={{ left: this._left, 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
-- 
cgit v1.2.3-70-g09d2