image upload functions w/ bugs

- choose an image does not immediately update
- close button does not move with rest of upload image

7 files changed, 273 insertions, 88 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d99d11c1f..563f8cfe4 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -430,7 +430,7 @@ export class CurrentUserUtils {
     }
 
     static setupMobileMenu() {
-        const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), {
+        const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons2(), {
             _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _autoHeight: true, _yMargin: 80
         }), Doc) as Doc;
         return menu;
@@ -647,7 +647,7 @@ export class CurrentUserUtils {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [
             { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" },
             { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." },
-            { title: "UPLOAD", icon: "upload", click: 'console.log("hi")', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" },
+            { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" },
             { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." },
             // { title: "INK", icon: "pen-nib", backgroundColor: "lightgrey", info: "Doodle and draw with ink on your mobile and have it directly available on Dash Web" },
             { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" }
@@ -658,7 +658,7 @@ export class CurrentUserUtils {
     static mobileButton = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MulticolumnDocument(docs, {
         ...opts,
         dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15,
-        borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled",
+        borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled",
     })) as any as Doc
 
     static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MultirowDocument(docs, {
@@ -720,6 +720,7 @@ export class CurrentUserUtils {
         }
     }
 
+
     static setupClickEditorTemplates(doc: Doc) {
         if (doc["clickFuncs-child"] === undefined) {
             const openInTarget = Docs.Create.ScriptingDocument(ScriptField.MakeScript(
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 4d0fe5b8a..1eac9303b 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -140,7 +140,7 @@
         background-color: whitesmoke !important;
         color: grey;
         width: 80vw;
-        height: 25vh;
+        height: 400px;
     }
 
     .settings-interface .settings-body .settings-content input {
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 56c6b4357..2bb249ee4 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -84,7 +84,7 @@
 @media only screen and (max-width: 1000px) {
     .presBox-cont .presBox-buttons {
         position: absolute;
-        top: 85%;
+        top: 70%;
         left: 50%;
         transform: translate(-50%, 0);
         width: max-content;
@@ -107,10 +107,10 @@
     .presBox-cont .presBox-buttons .presBox-button {
         margin-right: 10px;
         margin-left: 10px;
-        height: 130px;
-        width: 130px;
-        font-size: 50;
-        border-radius: 5px;
+        height: 250;
+        width: 250;
+        font-size: 70;
+        border-radius: 25px;
         display: flex;
         align-items: center;
         background: #323232;
@@ -118,37 +118,12 @@
     }
 
     .presBox-cont .presBox-buttons .presBox-viewPicker {
+        top: -70;
+        left: 2.5%;
         height: 50;
-        width: 100;
-        font-size: 30px;
-        position: relative;
-        min-width: 50px;
-    }
-
-    .presElementBox-closeIcon {
-        border-radius: 20px;
-        transform: scale(2);
-        position: absolute;
-        right: 20;
-        top: 20;
-        padding: 8px;
-    }
-
-    .presElementBox-buttons {
-        display: inline-flex;
-        position: absolute;
-        right: 0;
-        width: 50%;
-    }
-
-    .presElementBox-name {
+        width: 95%;
         font-size: 30px;
         position: absolute;
-        display: inline-block;
-        top: 10px;
-        width: 50%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: pre;
+        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 1ddf3d8bc..ec82b0c51 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -122,7 +122,7 @@
         float: left;
         padding: 0px;
         width: 50;
-        height: 40;
+        height: 50;
     }
 
     .presElementBox-buttons .presElementBox-interaction-selected {
@@ -133,4 +133,53 @@
         height: 50;
         border: solid 1px darkgray;
     }
+
+    .presElementBox-closeIcon {
+        border-radius: 20px;
+        transform: scale(1.5);
+        position: absolute;
+        right: 10;
+        top: 10;
+        padding: 8px;
+    }
+
+    .presElementBox-buttons {
+        display: inline-flex;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 50%;
+    }
+
+    .presElementBox-name {
+        font-size: 30px;
+        position: absolute;
+        display: inline-block;
+        top: 10px;
+        width: 50%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: pre;
+    }
+
+    .presElementBox-item {
+        display: inline-block;
+        background-color: #eeeeee;
+        pointer-events: all;
+        width: 100%;
+        min-height: 100%;
+        height: max-content;
+        outline-color: maroon;
+        outline-style: dashed;
+        border-radius: 6px;
+        -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;
+        padding: 0px;
+        padding-bottom: 3px;
+    }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index afc4cc21e..6c782d4d8 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -5,21 +5,20 @@
     justify-content: center;
     flex-direction: column;
     align-items: center;
-    width: 90vw;
-    height: 90vh;
 
     .upload_label {
-        font-weight: normal !important;
+        font-size: 3em;
+        font-weight: 700;
+        color: white;
+        background-color: black;
+        display: inline-block;
+        margin: 10;
         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;
+        border-radius: 10px;
+    }
+
+    .upload_label:hover {
+        background-color: darkred;
     }
 
     .button_file {
@@ -31,31 +30,92 @@
         font-size: 3em;
     }
 
-    // .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_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;
-    // }
+    .inputfile {
+        width: 0.1px;
+        height: 0.1px;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        z-index: -1;
+    }
+
+    .inputfile+label {
+        font-size: 3em;
+        font-weight: 700;
+        color: white;
+        background-color: black;
+        display: inline-block;
+        margin: 10px;
+        width: 100%;
+        border-radius: 10px;
+    }
+
+    .inputfile:focus+label,
+    .inputfile+label:hover {
+        background-color: darkred;
+    }
+
+}
+
+.backgroundUpload {
+    height: 100vh;
+    top: 0;
+    z-index: 999;
+    width: 100vw;
+    position: absolute;
+    background-color: lightgrey;
+    opacity: 0.4;
+}
+
+.image-upload {
+    top: 100%;
+    opacity: 0;
+}
+
+.image-upload.active {
+    top: 0;
+    position: absolute;
+    z-index: 999;
+    height: 100vh;
+    width: 100vw;
+    opacity: 1;
+}
+
+.uploadContainer {
+    top: 40;
+    position: absolute;
+    z-index: 1000;
+    height: 20vh;
+    width: 80vw;
+    opacity: 1;
+}
+
+.closeUpload {
+    position: absolute;
+    border-radius: 10px;
+    top: 39.7%;
+    color: grey;
+    font-size: 40;
+    left: 65.8%;
+    z-index: 1002;
+    padding: 0px 3px;
+    background: aliceblue;
+    transition: 0.5s ease all;
+    border: 3px solid;
+    border-color: black;
+}
+
+.loadingImage {
+    display: inline-flex;
+    width: max-content;
+}
+
+.loadingSlab {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    margin: 10;
+    border-radius: 20px;
+    opacity: 0.3;
+    background-color: black;
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 8d7ccf450..df2beb85a 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -13,6 +13,7 @@ import { Cast } from '../fields/Types';
 import { listSpec } from '../fields/Schema';
 import { List } from '../fields/List';
 import { Scripting } from '../client/util/Scripting';
+import MainViewModal from '../client/views/MainViewModal';
 
 export interface ImageUploadProps {
     Document: Doc;
@@ -35,6 +36,10 @@ export class Uploader extends React.Component<ImageUploadProps> {
         console.log("uploader click");
         try {
             this.status = "initializing protos";
+            const slab1 = document.getElementById("slab1");
+            if (slab1) {
+                slab1.style.opacity = "1";
+            }
             await Docs.Prototypes.initialize();
             const imgPrev = document.getElementById("img_preview");
             if (imgPrev) {
@@ -44,8 +49,15 @@ export class Uploader extends React.Component<ImageUploadProps> {
                     const name = files[0].name;
                     const res = await Networking.UploadFilesToServer(files[0]);
                     this.status = "uploading image";
+                    const slab2 = document.getElementById("slab2");
+                    if (slab2) {
+                        slab2.style.opacity = "1";
+                    }
                     this.status = "upload image, getting json";
-
+                    const slab3 = document.getElementById("slab3");
+                    if (slab3) {
+                        slab3.style.opacity = "1";
+                    }
                     res.map(async ({ result }) => {
                         if (result instanceof Error) {
                             return;
@@ -54,7 +66,15 @@ export class Uploader extends React.Component<ImageUploadProps> {
                         const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
 
                         this.status = "getting user document";
-
+                        const slab4 = document.getElementById("slab4");
+                        if (slab4) {
+                            slab4.style.opacity = "1";
+                        }
+                        this.status = "upload image, getting json";
+                        const slab5 = document.getElementById("slab5");
+                        if (slab5) {
+                            slab5.style.opacity = "1";
+                        }
                         const res = await rp.get(Utils.prepend("/getUserDocumentId"));
                         if (!res) {
                             throw new Error("No user id returned");
@@ -66,6 +86,10 @@ export class Uploader extends React.Component<ImageUploadProps> {
                         }
                         if (pending) {
                             this.status = "has pending docs";
+                            const slab6 = document.getElementById("slab6");
+                            if (slab6) {
+                                slab6.style.opacity = "1";
+                            }
                             const data = await Cast(pending.data, listSpec(Doc));
                             if (data) {
                                 data.push(doc);
@@ -74,6 +98,10 @@ export class Uploader extends React.Component<ImageUploadProps> {
                             }
                             this.status = "finished";
                             console.log("hi");
+                            const slab7 = document.getElementById("slab7");
+                            if (slab7) {
+                                slab7.style.opacity = "1";
+                            }
                         }
 
                     });
@@ -84,19 +112,55 @@ export class Uploader extends React.Component<ImageUploadProps> {
         }
     }
 
-    render() {
+    // Updates label after a files is selected (so user knows a file is uploaded)
+    inputLabel = async () => {
+        const files: FileList | null = inputRef.current!.files;
+        await files;
+        var inputs = document.querySelectorAll('.inputFile');
+        const label = document.getElementById("label");
+        if (files && label) {
+            label.innerText = files[0].name;
+        }
+    }
+
+    private get uploadInterface() {
         return (
             <div className="imgupload_cont">
-                <label htmlFor="input_image_file" className="upload_label" onClick={this.onClick}>Upload Image</label>
-                <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
+                <input type="file" accept="image/*" className="inputFile" id="input_image_file" onClick={this.inputLabel} ref={inputRef}></input>
+                <label id="label" htmlFor="input_image_file">Choose an image</label>
+                <div className="upload_label" onClick={this.onClick}>Upload Image</div>
                 {/* <div onClick={this.onClick} className="upload_button">Upload</div> */}
                 <img id="img_preview" src=""></img>
                 {/* <p>{this.status}</p>
                 <p>{this.error}</p> */}
+                <div className="loadingImage">
+                    <div className="loadingSlab" id="slab1" />
+                    <div className="loadingSlab" id="slab2" />
+                    <div className="loadingSlab" id="slab3" />
+                    <div className="loadingSlab" id="slab4" />
+                    <div className="loadingSlab" id="slab5" />
+                    <div className="loadingSlab" id="slab6" />
+                    <div className="loadingSlab" id="slab7" />
+                </div>
             </div>
         );
     }
 
+    @observable private dialogueBoxOpacity = 1;
+    @observable private overlayOpacity = 0.4;
+
+    render() {
+        return (
+            <MainViewModal
+                contents={this.uploadInterface}
+                isDisplayed={true}
+                interactive={true}
+                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+                overlayDisplayedOpacity={this.overlayOpacity}
+            />
+        );
+    }
+
 }
 
 
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index d8ac7d1f1..c4b2ffbc1 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
-    faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+    faTasks, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
     faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
     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,
@@ -26,6 +26,7 @@ import { InkingControl } from '../client/views/InkingControl';
 import "./MobileInterface.scss";
 import "./MobileMenu.scss";
 import "./MobileHome.scss";
+import "./ImageUpload.scss";
 import { DocumentManager } from '../client/util/DocumentManager';
 import SettingsManager from '../client/util/SettingsManager';
 import { Uploader } from "./ImageUpload";
@@ -38,7 +39,7 @@ import { SelectionManager } from "../client/util/SelectionManager";
 import { SketchPicker } from "react-color";
 import { ScriptField } from "../fields/ScriptField";
 
-library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+library.add(faTasks, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
     faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
     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,
@@ -1240,7 +1241,7 @@ export class MobileInterface extends React.Component {
         // if (this._homeMenu == false) {
         let docArray = this.createPathname();
         let items = docArray.map((doc: Doc, index: any) => {
-            if (index == 0) {
+            if (index === 0) {
                 return (
                     <div className="pathbarItem">
                         <div className="pathbarText"
@@ -1689,6 +1690,9 @@ export class MobileInterface extends React.Component {
                 <SettingsManager />
                 {/* {this.menuOptions()} */}
                 {/* {this.displayHome()} */}
+                <div className={`image-upload ${this.imageUploadActive ? "active" : ""}`}>
+                    {this.uploadImage()}
+                </div>
                 <div className="docButtonContainer">
                     {this.pinToPresentation()}
                     {this.downloadDocument()}
@@ -1719,8 +1723,40 @@ export class MobileInterface extends React.Component {
         );
     }
 
+    @observable private imageUploadActive: boolean = false;
+
+    @action
+    toggleUpload = () => this.imageUploadActive = !this.imageUploadActive
+
+    @action
+    closeUpload = () => {
+        this.imageUploadActive = false;
+    }
+
+    // toggleUpload = () => {
+    //     if (this.imageUploadActive === true) {
+    //         this.imageUploadActive = false;
+    //     } else {
+    //         this.imageUploadActive = true;
+    //     }
+    // }
+
     uploadImage = () => {
-        console.log("hello world of images");
+        if (this.imageUploadActive) {
+            console.log("active");
+        } else if (!this.imageUploadActive) {
+
+        }
+        console.log("upload");
+        const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+        return (
+            <div>
+                <div className="closeUpload" onClick={this.toggleUpload}>
+                    <FontAwesomeIcon icon="window-close" size={"lg"} />
+                </div>
+                <Uploader Document={workspaces} />
+            </div>
+        );
     }
 }
 
@@ -1735,7 +1771,7 @@ Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Inst
 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(); });
+Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); });