Merge master, quick opacity changes

2 files changed, 31 insertions, 14 deletions

diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx
index 05a70f79a..ccc3a72a9 100644
--- a/src/client/views/presentationview/PresentationElement.tsx
+++ b/src/client/views/presentationview/PresentationElement.tsx
@@ -1,18 +1,16 @@
-import { observer } from "mobx-react";
-import React = require("react");
-import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
-import { NumCast, BoolCast, StrCast, Cast, FieldValue } from "../../../new_fields/Types";
-import { Id } from "../../../new_fields/FieldSymbols";
-import { observable, action, computed, runInAction } from "mobx";
-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, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons';
+import { faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { Doc } from "../../../new_fields/Doc";
+import { Id } from "../../../new_fields/FieldSymbols";
 import { List } from "../../../new_fields/List";
 import { listSpec } from "../../../new_fields/Schema";
-import { DragManager, SetupDrag, dropActionType } from "../../util/DragManager";
+import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types";
+import { Utils, returnFalse, emptyFunction, returnOne } from "../../../Utils";
+import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { indexOf } from "typescript-collections/dist/lib/arrays";
 import { map } from "bluebird";
@@ -22,6 +20,8 @@ import { Transform } from "../../util/Transform";
 import { FieldView } from "../nodes/FieldView";
 import { DocumentView } from "../nodes/DocumentView";
 import { DocumentType } from "../../documents/Documents";
+import React = require("react");
+
 
 library.add(faArrowUp);
 library.add(fileSolid);
diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx
index 70d86624c..cd38fc2ec 100644
--- a/src/client/views/presentationview/PresentationView.tsx
+++ b/src/client/views/presentationview/PresentationView.tsx
@@ -69,6 +69,10 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @observable presMode: boolean = false;
 
 
+    @observable opacity = 1;
+    @observable persistOpacity = true;
+    @observable labelOpacity = 0;
+
     //initilize class variables
     constructor(props: PresViewProps) {
         super(props);
@@ -174,7 +178,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
 
         //storing the presentation status,ie. whether it was stopped or playing
-        let presStatusBackUp = BoolCast(this.curPresentation.presStatus, null);
+        let presStatusBackUp = BoolCast(this.curPresentation.presStatus);
         runInAction(() => this.presStatus = presStatusBackUp);
     }
 
@@ -921,7 +925,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
         return (
             <div>
-                <div className="presentationView-cont" style={{ width: width, overflowY: "scroll", overflowX: "hidden" }}>
+                <div className="presentationView-cont" onPointerEnter={action(() => !this.persistOpacity && (this.opacity = 1))} onPointerLeave={action(() => !this.persistOpacity && (this.opacity = 0.4))} style={{ width: width, overflowY: "scroll", overflowX: "hidden", opacity: this.opacity, transition: "0.7s opacity ease" }}>
                     <div className="presentationView-heading">
                         {this.renderSelectOrPresSelection()}
                         <button title="Close Presentation" className='presentation-icon' onClick={this.closePresentation}><FontAwesomeIcon icon={"times"} /></button>
@@ -955,13 +959,26 @@ export class PresentationView extends React.Component<PresViewProps>  {
                         removeDocByRef={this.removeDocByRef}
                         clearElemMap={() => this.presElementsMappings.clear()}
                     />
+                    <input
+                        type="checkbox"
+                        onChange={action((e: React.ChangeEvent<HTMLInputElement>) => {
+                            this.persistOpacity = e.target.checked;
+                            this.opacity = this.persistOpacity ? 1 : 0.4;
+                        })}
+                        checked={this.persistOpacity}
+                        style={{ position: "absolute", bottom: 5, left: 5 }}
+                        onPointerEnter={action(() => this.labelOpacity = 1)}
+                        onPointerLeave={action(() => this.labelOpacity = 0)}
+                    />
+                    <p style={{ position: "absolute", bottom: 1, left: 22, opacity: this.labelOpacity, transition: "0.7s opacity ease" }}>opacity {this.persistOpacity ? "persistent" : "on focus"}</p>
                 </div>
                 <div className="mainView-libraryHandle"
-                    style={{ cursor: "ew-resize", right: `${width - 10}px`, backgroundColor: "white" }}
+                    style={{ cursor: "ew-resize", right: `${width - 10}px`, backgroundColor: "white", opacity: this.opacity, transition: "0.7s opacity ease" }}
                     onPointerDown={this.onPointerDown} onClick={this.togglePresView}>
                     <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
                 </div>
                 {this.renderPresMode()}
+
             </div>
         );
     }