Merge branch 'mobile_revision_direct' of https://github.com/browngraphicslab/Dash-Web into mobile_revision_direct

4 files changed, 62 insertions, 13 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 53e81dbd2..98777a92c 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -157,8 +157,8 @@ export default class GestureOverlay extends Touchable {
                 // -- radial menu code --
                 this._holdTimer = setTimeout(() => {
                     console.log("hold");
-                    const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY);
-                    const pt: any = te.touches[te.touches.length - 1];
+                    const target = document.elementFromPoint(te.changedTouches?.item(0).clientX, te.changedTouches?.item(0).clientY);
+                    const pt: any = te.touches[te.touches?.length - 1];
                     if (nts.nt.length === 1 && pt.radiusX > 1 && pt.radiusY > 1) {
                         target?.dispatchEvent(
                             new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>("dashOnTouchHoldStart",
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 225d03104..d16aa528c 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -236,6 +236,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
         if (this._curSuffix === "_m") this._mediumRetryCount++;
         if (this._curSuffix === "_l") this._largeRetryCount++;
     }
+
     @action onError = (error: any) => {
         const timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
         if (timeout < 5) {
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 5894326ab..ed5076402 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -11,6 +11,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
+import { trace } from 'mobx';
 import * as rp from 'request-promise';
 import { Doc, DocListCast } from '../fields/Doc';
 import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
@@ -116,12 +117,14 @@ export class MobileInterface extends React.Component {
     /**
      * Method called when 'Library' button is pressed on the home screen
      */
-    switchToLibrary = () => {
+    switchToLibrary = async () => {
         this._parents.push(this._activeDoc);
         this.switchCurrentView((userDoc: Doc) => this._library);
         this._activeDoc = this._library;
         this._homeMenu = false;
-        this.sidebarActive = true;
+        this.toggleSidebar();
+        //setTimeout(this.toggleSidebar, 300);
+
     }
 
     openWorkspaces = () => {
@@ -129,6 +132,7 @@ export class MobileInterface extends React.Component {
         this.switchCurrentView((userDoc: Doc) => this._library);
         this._activeDoc = this._library;
         this._homeMenu = false;
+        this.sidebarActive = true;
     }
 
     /**
@@ -243,7 +247,13 @@ export class MobileInterface extends React.Component {
     @undoBatch
     handleClick = async (doc: Doc) => {
         const children = DocListCast(doc.data);
-        if (doc.type !== "collection" && this.sidebarActive) this.openFromSidebar(doc);
+        if (doc.type !== "collection" && this.sidebarActive) {
+            this._parents.push(this._activeDoc);
+            this._activeDoc = doc;
+            this.switchCurrentView((userDoc: Doc) => doc);
+            this._homeMenu = false;
+            this.toggleSidebar();
+        }
         else if (doc.type === "collection" && children.length === 0) this.openFromSidebar(doc);
         else {
             this._parents.push(this._activeDoc);
@@ -408,6 +418,7 @@ export class MobileInterface extends React.Component {
                         <span></span>
                         <span></span>
                     </div>
+                    <div className={`background ${this.sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}></div>
                 </div>
                 {this.renderPathbar()}
                 <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}>
@@ -436,6 +447,8 @@ export class MobileInterface extends React.Component {
                         }
                     </div>
                 </div>
+                <div className={`blanket ${this.sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
+                </div>
             </div>
         );
     }
@@ -843,3 +856,4 @@ Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Insta
 Scripting.addGlobal(function openMobileWorkspaces() { return MobileInterface.Instance.openWorkspaces(); });
 Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); });
 Scripting.addGlobal(function switchToMobileUploads() { return MobileInterface.Instance.switchToMobileUploads(); });
+Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); });
\ No newline at end of file
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index c499e6d1e..b60aa308f 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -24,10 +24,10 @@ body {
 
 .navbar .cover {
     position: absolute;
-    right: 20px;
-    top: 30px;
-    height: 70px;
-    width: 70px;
+    right: 0px;
+    top: 0px;
+    height: 120px;
+    width: 120px;
     background-color: whitesmoke;
     z-index: 200;
 }
@@ -38,7 +38,21 @@ body {
     top: 30px;
     height: 70px;
     width: 70px;
-    transition: all 300ms ease-in-out 200ms;
+    transition: all 400ms ease-in-out 200ms;
+    z-index: 180;
+}
+
+.navbar .background {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 120px;
+    width: 120px;
+    //border: 1px solid black;
+}
+
+.navbar .background.active {
+    background-color: lightgrey;
 }
 
 .navbar .toggle-btn-home {
@@ -73,6 +87,7 @@ body {
     height: 4px;
     background: black;
     transition: all 200ms ease;
+    z-index: 180;
 }
 
 .navbar .toggle-btn span:nth-child(1) {
@@ -107,8 +122,8 @@ body {
     top: 120px;
     opacity: 0;
     right: -100%;
-    width: 100%;
-    height: calc(100% - (120px));
+    width: 80%;
+    height: calc(80% - (120px));
     z-index: 101;
     background-color: whitesmoke;
     transition: all 400ms ease 50ms;
@@ -116,6 +131,7 @@ body {
     // overflow-y: auto;
     // -webkit-overflow-scrolling: touch;
     // border-right: 5px solid black;
+    box-shadow: 0 0 5px 5px grey;
 }
 
 .sidebar .item {
@@ -142,6 +158,24 @@ body {
     position: relative;
 }
 
+.blanket {
+    position: fixed;
+    top: 120px;
+    opacity: 0.5;
+    right: -100%;
+    width: 100%;
+    height: calc(100% - (120px));
+    z-index: 101;
+    background-color: grey;
+    padding: 20px;
+}
+
+.blanket.active {
+    position: absolute;
+    right: 0%;
+    z-index: 100;
+}
+
 .home {
     position: absolute;
     top: 30px;
@@ -214,7 +248,7 @@ body {
 
 .sidebar.active {
     position: absolute;
-    right: 0%;
+    right:0%;
     opacity: 1;
     z-index: 101;
 }