From 3dab85351e1fe862a54294cec70e7139abea0d7d Mon Sep 17 00:00:00 2001
From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com>
Date: Mon, 15 Jun 2020 00:10:16 -0700
Subject: added ? to a lot of things

---
 src/client/views/nodes/ImageBox.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index cabf30c13..73410e02f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -174,19 +174,19 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
             //     }), icon: "expand-arrows-alt"
             // });
 
-            const existingAnalyze = ContextMenu.Instance.findByDescription("Analyzers...");
+            const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers...");
             const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : [];
             modes.push({ description: "Generate Tags", event: this.generateMetadata, icon: "tag" });
             modes.push({ description: "Find Faces", event: this.extractFaces, icon: "camera" });
             //modes.push({ description: "Recommend", event: this.extractText, icon: "brain" });
-            !existingAnalyze && ContextMenu.Instance.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
+            !existingAnalyze && ContextMenu.Instance?.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
 
-            ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
+            ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
 
 
-            const existingMore = ContextMenu.Instance.findByDescription("More...");
+            const existingMore = ContextMenu.Instance?.findByDescription("More...");
             const mores: ContextMenuProps[] = existingMore && "subitems" in existingMore ? existingMore.subitems : [];
-            !existingMore && ContextMenu.Instance.addItem({ description: "More...", subitems: mores, icon: "hand-point-right" });
+            !existingMore && ContextMenu.Instance?.addItem({ description: "More...", subitems: mores, icon: "hand-point-right" });
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From db92851456f168affcdbd4053b38e7b9f6b7a97d Mon Sep 17 00:00:00 2001
From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com>
Date: Thu, 25 Jun 2020 12:00:43 -0700
Subject: fix image flikering (hopefully), changed sidebar UI, and changed
 handle click

---
 src/client/views/nodes/ImageBox.tsx |  1 +
 src/mobile/MobileInterface.tsx      | 20 ++++++++++++---
 src/mobile/MobileMenu.scss          | 50 +++++++++++++++++++++++++++++++------
 3 files changed, 60 insertions(+), 11 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

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 a1719c015..0bc950a71 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';
@@ -115,12 +116,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 = () => {
@@ -128,6 +131,7 @@ export class MobileInterface extends React.Component {
         this.switchCurrentView((userDoc: Doc) => this._library);
         this._activeDoc = this._library;
         this._homeMenu = false;
+        this.sidebarActive = true;
     }
 
     /**
@@ -242,7 +246,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);
@@ -407,6 +417,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" : ""}`}>
@@ -435,6 +446,8 @@ export class MobileInterface extends React.Component {
                         }
                     </div>
                 </div>
+                <div className={`blanket ${this.sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
+                </div>
             </div>
         );
     }
@@ -846,3 +859,4 @@ Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Insta
 Scripting.addGlobal(function openWorkspaces() { 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 53bc48034..ec8946578 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;
@@ -213,7 +247,7 @@ body {
 
 .sidebar.active {
     position: absolute;
-    right: 0%;
+    right:0%;
     opacity: 1;
     z-index: 101;
 }
-- 
cgit v1.2.3-70-g09d2

