finished up image upload and fixed bugs with pathbar and clicking workspaces twice

5 files changed, 48 insertions, 16 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index a11c97b09..8cf2cdf55 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -115,12 +115,12 @@ export default class GestureOverlay extends Touchable {
     onReactTouchStart = (te: React.TouchEvent) => {
         document.removeEventListener("touchmove", this.onReactHoldTouchMove);
         document.removeEventListener("touchend", this.onReactHoldTouchEnd);
-        // if (RadialMenu.Instance._display === true) {
-        //     te.preventDefault();
-        //     te.stopPropagation();
-        //     RadialMenu.Instance.closeMenu();
-        //     return;
-        // }
+        if (RadialMenu.Instance?._display === true) {
+            te.preventDefault();
+            te.stopPropagation();
+            RadialMenu.Instance.closeMenu();
+            return;
+        }
 
         // this chunk adds new touch targets to a map of pointer events; this helps us keep track of individual fingers
         // so that we can know, for example, if two fingers are pinching out or in.
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 6c782d4d8..d5ab31469 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -5,6 +5,7 @@
     justify-content: center;
     flex-direction: column;
     align-items: center;
+    max-width: 400px;
 
     .upload_label {
         font-size: 3em;
@@ -17,6 +18,13 @@
         border-radius: 10px;
     }
 
+    .file {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        direction: ltr;
+    }
+
     .upload_label:hover {
         background-color: darkred;
     }
@@ -55,6 +63,10 @@
         background-color: darkred;
     }
 
+    .status {
+        font-size: 2em;
+    }
+
 }
 
 .backgroundUpload {
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 504e4ceae..8f050aedd 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -32,6 +32,7 @@ export class Uploader extends React.Component {
     @observable error: string = "";
     @observable status: string = "";
     @observable nm: string = "Choose an image";
+    @observable process: string = "";
 
     onClick = async () => {
         console.log("uploader click");
@@ -48,6 +49,7 @@ export class Uploader extends React.Component {
                 console.log("hi");
                 const files: FileList | null = inputRef.current!.files;
                 if (files && files.length !== 0) {
+                    this.process = "Uploading Image"
                     console.log(files[0]);
                     const name = files[0].name;
                     const res = await Networking.UploadFilesToServer(files[0]);
@@ -100,15 +102,18 @@ export class Uploader extends React.Component {
                                 pending.data = new List([doc]);
                             }
                             this.status = "finished";
+
                             console.log("hi");
                             const slab7 = document.getElementById("slab7");
                             if (slab7) {
                                 slab7.style.opacity = "1";
                             }
-
+                            this.process = "Image Uploaded";
                         }
 
                     });
+                } else {
+                    this.process = "No file selected";
                 }
                 setTimeout(this.clearUpload, 3000);
             }
@@ -163,6 +168,7 @@ export class Uploader extends React.Component {
         if (inputRef.current) {
             inputRef.current.value = "";
         }
+        this.process = "";
         console.log(inputRef.current!.files);
     }
 
@@ -172,7 +178,7 @@ export class Uploader extends React.Component {
         return (
             <div className="imgupload_cont">
                 <input type="file" accept="image/*" className="inputFile" id="input_image_file" ref={inputRef} onChange={this.inputLabel}></input>
-                <label id="label" htmlFor="input_image_file">{this.nm}</label>
+                <label className="file" id="label" htmlFor="input_image_file">{this.nm}</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>
@@ -187,6 +193,7 @@ export class Uploader extends React.Component {
                     <div className="loadingSlab" id="slab6" />
                     <div className="loadingSlab" id="slab7" />
                 </div>
+                <p className="status">{this.process}</p>
             </div>
         );
     }
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 820a6885d..0b5855e1f 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -1115,7 +1115,7 @@ export class MobileInterface extends React.Component {
      */
     returnMain = () => {
         console.log("home");
-        this._parents = [];
+        this._parents = [this._homeDoc];
         // this.toggleSidebar();
         this._activeDoc = this._library;
         this.switchCurrentView((userDoc: Doc) => this._library);
@@ -1201,7 +1201,7 @@ export class MobileInterface extends React.Component {
      * Handles the click functionality in the library panel
      * @param doc: doc for which the method is called
      */
-    handleClick(doc: Doc) {
+    handleClick = async (doc: Doc) => {
         let children = DocListCast(doc.data);
         if (doc.type !== "collection") {
             this._parents.push(this._activeDoc);
@@ -1244,12 +1244,24 @@ export class MobileInterface extends React.Component {
         let items = docArray.map((doc: Doc, index: any) => {
             if (index === 0) {
                 return (
-                    <div className="pathbarItem">
-                        <div className="pathbarText"
-                            key={index}
-                            onClick={() => this.handlePathClick(doc, index)}>{doc.title}
-                        </div>
-                    </div>);
+                    <>
+                        {this._homeMenu ?
+                            <div className="pathbarItem">
+                                <div className="pathbarText"
+                                    style={{ backgroundColor: "rgb(119, 37, 37)" }}
+                                    key={index}
+                                    onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+                                </div>
+                            </div>
+                            :
+                            <div className="pathbarItem">
+                                <div className="pathbarText"
+                                    key={index}
+                                    onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+                                </div>
+                            </div>}
+                    </>);
+
             } else if (doc === this._activeDoc) {
                 return (
                     <div className="pathbarItem">
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 669b55601..b98b51f31 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -309,6 +309,7 @@ body {
     text-align: center;
     user-select: none;
     z-index: 99;
+    pointer-events: none;
 }
 
 .toolbar {