adjust presentation view

7 files changed, 174 insertions, 52 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8ed275efc..3d38e7370 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -409,7 +409,7 @@ export class CurrentUserUtils {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
             { title: "library", icon: "bars", click: 'switchToLibrary()', backgroundColor: "lightgrey" },
             { title: "record", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey" },
-            { title: "upload", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "lightgrey" },
+            { title: "upload", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "lightgrey" },
             { title: "presentation", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey" },
             { title: "ink", icon: "pen-nib", backgroundColor: "lightgrey" },
             { title: "settings", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey" }
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 6513cb223..eb1045f70 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -133,4 +133,6 @@
 
 
     }
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 1000px) {}
\ No newline at end of file
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index d48000e16..61641c989 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -16,6 +16,7 @@
         height: calc(100% - 25px);
         width: 100%;
     }
+
     .presBox-buttons {
         width: 100%;
         background: gray;
@@ -24,6 +25,7 @@
         display: grid;
         grid-column-end: 4;
         grid-column-start: 1;
+
         .presBox-viewPicker {
             height: 25;
             position: relative;
@@ -31,10 +33,12 @@
             grid-column: 1/2;
             min-width: 15px;
         }
+
         select {
             background: #323232;
             color: white;
         }
+
         .presBox-button {
             margin-right: 2.5%;
             margin-left: 2.5%;
@@ -44,10 +48,12 @@
             align-items: center;
             background: #323232;
             color: white;
+
             svg {
                 margin: auto;
             }
         }
+
         .collectionViewBaseChrome-viewPicker {
             min-width: 50;
             width: 5%;
@@ -56,17 +62,65 @@
             display: inline-block;
         }
     }
-    .presBox-backward, .presBox-forward {
+
+    .presBox-backward,
+    .presBox-forward {
         width: 25px;
         border-radius: 5px;
-        top:50%;
+        top: 50%;
         position: absolute;
         display: inline-block;
     }
+
     .presBox-backward {
-        left:5;
+        left: 5;
     }
+
     .presBox-forward {
-        right:5;
+        right: 5;
+    }
+}
+
+@media only screen and (max-width: 1000px) {    .presBox-cont .presBox-buttons {
+        position: absolute;
+        top: 85%;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: max-content;
+        height: 15%;
+        z-index: 2;
+        align-items: center;
+        background: rgba(0, 0, 0, 0);
+        padding-top: 5px;
+        padding-bottom: 5px;
+        display: inline-flex;
+    }
+
+    .presBox-cont .presBox-listCont {
+        position: absolute;
+        top: 50;
+        height: calc(100% - 80px);
+        width: 100%;
+    }
+
+    .presBox-cont .presBox-buttons .presBox-button {
+        margin-right: 10px;
+        margin-left: 10px;
+        height: 130px;
+        width: 130px;
+        font-size: 50;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        background: #323232;
+        color: white;
+    }
+
+    .presBox-cont .presBox-buttons .presBox-viewPicker {
+        height: 50;
+        width: 100;
+        font-size: 30px;
+        position: relative;
+        min-width: 50px;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index ccd2e8947..1ddf3d8bc 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -13,9 +13,10 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: all .1s; 
+    transition: all .1s;
     padding: 0px;
     padding-bottom: 3px;
+
     .documentView-node {
         position: absolute;
         z-index: 1;
@@ -45,7 +46,7 @@
 
 .presElementBox-closeIcon {
     border-radius: 20px;
-    transform:scale(0.7);
+    transform: scale(0.7);
     position: absolute;
     right: 0;
     top: 0;
@@ -58,6 +59,7 @@
     position: relative;
     width: 100%;
     height: auto;
+
     .presElementBox-interaction {
         color: gray;
         float: left;
@@ -65,6 +67,7 @@
         width: 20px;
         height: 20px;
     }
+
     .presElementBox-interaction-selected {
         color: white;
         float: left;
@@ -90,15 +93,44 @@
     display: flex;
     width: auto;
     justify-content: center;
-    margin:auto;
+    margin: auto;
 }
 
 .presElementBox-embeddedMask {
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     position: absolute;
-    left:0;
-    top:0;
+    left: 0;
+    top: 0;
     background: transparent;
-    z-index:2;
+    z-index: 2;
+}
+
+@media only screen and (max-width: 1000px) {
+    .presElementBox-buttons {
+        display: inline-flex;
+        position: relative;
+        width: 100%;
+    }
+
+    .presElementBox-item {
+        display: inline-flex;
+    }
+
+    .presElementBox-buttons .presElementBox-interaction {
+        color: gray;
+        float: left;
+        padding: 0px;
+        width: 50;
+        height: 40;
+    }
+
+    .presElementBox-buttons .presElementBox-interaction-selected {
+        color: white;
+        float: left;
+        padding: 0px;
+        width: 50;
+        height: 50;
+        border: solid 1px darkgray;
+    }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 6ebf33438..afc4cc21e 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -1,12 +1,12 @@
 @import "../client/views/globalCssVariables.scss";
 
 .imgupload_cont {
-    // display: flex;
-    // justify-content: center;
-    // flex-direction: column;
-    // align-items: center;
-    // width: 100vw;
-    // height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 90vw;
+    height: 90vh;
 
     .upload_label {
         font-weight: normal !important;
@@ -31,31 +31,31 @@
         font-size: 3em;
     }
 
-    .input_file {
-        display: none;
-    }
+    // .input_file {
+    //     display: none;
+    // }
+
+    // // .upload_label,
+    // // .upload_button {
+    // //     background: $dark-color;
+    // //     font-size: 500%;
+    // //     font-family: $sans-serif;
+    // //     text-align: center;
+    // //     padding: 5vh;
+    // //     margin-bottom: 20px;
+    // //     color: white;
+    // // }
 
-    // .upload_label,
     // .upload_button {
-    //     background: $dark-color;
-    //     font-size: 500%;
-    //     font-family: $sans-serif;
-    //     text-align: center;
-    //     padding: 5vh;
-    //     margin-bottom: 20px;
-    //     color: white;
+    //     width: 100%;
+    //     padding: 13px 12px;
+    //     border-bottom: 1px solid rgba(200, 200, 200, 0.7);
+    //     font-family: Arial, Helvetica, sans-serif;
+    //     font-style: normal;
+    //     font-weight: normal;
+    //     user-select: none;
+    //     font-size: 35px;
+    //     text-transform: uppercase;
+    //     color: black;
     // }
-
-    .upload_button {
-        width: 100%;
-        padding: 13px 12px;
-        border-bottom: 1px solid rgba(200, 200, 200, 0.7);
-        font-family: Arial, Helvetica, sans-serif;
-        font-style: normal;
-        font-weight: normal;
-        user-select: none;
-        font-size: 35px;
-        text-transform: uppercase;
-        color: black;
-    }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index c35c4a917..8d7ccf450 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -12,6 +12,7 @@ import { Doc, Opt } from '../fields/Doc';
 import { Cast } from '../fields/Types';
 import { listSpec } from '../fields/Schema';
 import { List } from '../fields/List';
+import { Scripting } from '../client/util/Scripting';
 
 export interface ImageUploadProps {
     Document: Doc;
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index c51b5b654..e2de7fed2 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -6,7 +6,7 @@ import {
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
-    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft
+    faThumbtack, faTree, faTv, faBook, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable } from 'mobx';
@@ -43,7 +43,7 @@ library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTras
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
-    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft);
+    faThumbtack, faTree, faTv, faUndoAlt, faBook, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft);
 
 // @observer
 // export class MobileInterface extends React.Component {
@@ -948,7 +948,8 @@ export class MobileInterface extends React.Component {
     @computed private get userDoc() { return Doc.UserDoc(); }
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
     // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
-    @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu();
+    // Sets up new mobile menu only if activeMobile already exists
+    @observable private mainDoc: any = Doc.UserDoc().activeMobile !== undefined ? console.log("true") : CurrentUserUtils.setupMobileMenu();
     @observable private renderView?: () => JSX.Element;
     @observable private audioState: any;
     @observable private activeToolbar: boolean = false;
@@ -978,7 +979,7 @@ export class MobileInterface extends React.Component {
     componentDidMount = () => {
         library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]);
         if (this.userDoc.activeMobile) {
-            console.log(Doc.UserDoc().activeMobile)
+            console.log(Doc.UserDoc().activeMobile);
         }
         if (this.userDoc && !this.mainContainer) {
             this.userDoc.activeMobile = this._homeDoc;
@@ -1027,6 +1028,9 @@ export class MobileInterface extends React.Component {
         });
     }
 
+    /**
+     * Handles the functionality to toggle the sidebar
+     */
     toggleSidebar = () => {
         if (this._open === false) {
             this._open = true;
@@ -1049,6 +1053,9 @@ export class MobileInterface extends React.Component {
         }
     }
 
+    /**
+     * Method called when 'Library' button is pressed
+     */
     switchToLibrary = () => {
         this._parents.push(this._activeDoc);
         this.switchCurrentView((userDoc: Doc) => this._library);
@@ -1057,6 +1064,9 @@ export class MobileInterface extends React.Component {
         this.toggleSidebar();
     }
 
+    /**
+     * Back method for navigating within library
+     */
     back = () => {
         let header = document.getElementById("header") as HTMLElement;
         let doc = Cast(this._parents.pop(), Doc) as Doc;
@@ -1083,6 +1093,9 @@ export class MobileInterface extends React.Component {
         this._ink = false;
     }
 
+    /**
+     * Return 'Home", which implies returning to 'Home' buttons
+     */
     returnHome = () => {
         if (this._homeMenu === false || this._open === true) {
             this._homeMenu = true;
@@ -1096,6 +1109,9 @@ export class MobileInterface extends React.Component {
         }
     }
 
+    /**
+     * Return to primary Workspace in library (Workspaces Doc)
+     */
     returnMain = () => {
         console.log("home");
         this._parents = [];
@@ -1108,6 +1124,9 @@ export class MobileInterface extends React.Component {
 
     // @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); }
 
+    /**
+     * DocumentView for graphic display of all documents
+     */
     displayWorkspaces = () => {
         if (this.mainContainer) {
             const backgroundColor = () => "white";
@@ -1174,9 +1193,13 @@ export class MobileInterface extends React.Component {
         }
     }
 
-    returnWidth = () => window.innerWidth;
-    returnHeight = () => (window.innerHeight - 300);
+    returnWidth = () => window.innerWidth; //The windows width
+    returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar)
 
+    /**
+     * Handles the click functionality in the library panel
+     * @param doc: doc for which the method is called
+     */
     handleClick(doc: Doc) {
         let children = DocListCast(doc.data);
         if (doc.type !== "collection") {
@@ -1311,6 +1334,7 @@ export class MobileInterface extends React.Component {
         // }
     }
 
+    // Handles when user clicks on document in the pathbar
     handlePathClick = (doc: Doc, index: number) => {
         if (doc === this._library) {
             this._activeDoc = doc;
@@ -1709,7 +1733,6 @@ export class MobileInterface extends React.Component {
         const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
 
         if (presentation) {
-            console.log(this._activeDoc.mobile);
             console.log("presentation clicked: " + presentation.title);
             this._activeDoc = presentation;
             this.switchCurrentView((userDoc: Doc) => presentation);
@@ -1748,7 +1771,6 @@ export class MobileInterface extends React.Component {
                     {this.displayWorkspaces()}
                     {this.renderDefaultContent()}
                 </GestureOverlay>
-
                 {/* </GestureOverlay> */}
                 {/* <DictationOverlay />
                 <SharingManager />
@@ -1767,14 +1789,25 @@ export class MobileInterface extends React.Component {
             </div>
         );
     }
+
+    uploadImage = () => {
+        console.log("hello world of images");
+    }
 }
 
+
+
+const inputRef = React.createRef<HTMLInputElement>();
+
+
 Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
 Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); });
 Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); });
 Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); });
 Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); });
 Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); });
+Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.uploadImage(); });
+
 
 
 // WAS 2