From 520200a2a63a4189d5c6cac2b2ff48f009bb6f72 Mon Sep 17 00:00:00 2001
From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com>
Date: Tue, 9 Jun 2020 00:21:50 -0700
Subject: cleaned code

---
 src/client/util/CurrentUserUtils.ts |   4 +-
 src/mobile/ImageUpload.tsx          |   1 +
 src/mobile/MobileInterface.tsx      | 190 ++++++++++++------------------------
 src/mobile/MobileMenu.scss          |  22 ++++-
 4 files changed, 82 insertions(+), 135 deletions(-)

(limited to 'src')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8ed275efc..f2278bf3d 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: 'console.log("hi")', 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" }
@@ -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: 'uploadMobileImage()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed 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: "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" }
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..e9d35096d 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -952,6 +952,7 @@ export class MobileInterface extends React.Component {
     @observable private renderView?: () => JSX.Element;
     @observable private audioState: any;
     @observable private activeToolbar: boolean = false;
+    @observable private sidebarActive: boolean = false;
 
     public _activeDoc: Doc = this.mainDoc;
     public _homeDoc: Doc = this.mainDoc;
@@ -986,8 +987,6 @@ export class MobileInterface extends React.Component {
         InkingControl.Instance.switchTool(InkTool.None);
         MobileInterface.Instance.drawingInk = false;
         InkingControl.Instance.updateSelectedColor("#FF0000");
-        console.log(this.userDoc.inkColor);
-        console.log(InkingControl.Instance.selectedColor);
         InkingControl.Instance.switchWidth("2");
         this.switchCurrentView((userDoc: Doc) => this._homeDoc);
     }
@@ -1027,34 +1026,37 @@ export class MobileInterface extends React.Component {
         });
     }
 
-    toggleSidebar = () => {
-        if (this._open === false) {
-            this._open = true;
-        } else {
-            this._open = false;
-        }
-        console.log("clicked");
-        let menuButton = document.getElementById("menuButton") as HTMLElement;
-        menuButton.classList.toggle('active');
+    @action
+    toggleSidebar = () => this.sidebarActive = !this.sidebarActive
 
-        let sidebar = document.getElementById("sidebar") as HTMLElement;
-        sidebar.classList.toggle('active');
+    // toggleSidebar = () => {
+    //     if (this._open === false) {
+    //         this._open = true;
+    //     } else {
+    //         this._open = false;
+    //     }
+    //     console.log("clicked");
+    //     let menuButton = document.getElementById("menuButton") as HTMLElement;
+    //     //menuButton.classList.toggle('active');
 
-        let header = document.getElementById("header") as HTMLElement;
+    //     let sidebar = document.getElementById("sidebar") as HTMLElement;
+    //     //sidebar.classList.toggle('active');
 
-        if (!sidebar.classList.contains('active')) {
-            header.textContent = String(this._activeDoc.title);
-        } else {
-            header.textContent = "library";
-        }
-    }
+    //     let header = document.getElementById("header") as HTMLElement;
+
+    //     if (!sidebar.classList.contains('active')) {
+    //         header.textContent = String(this._activeDoc.title);
+    //     } else {
+    //         header.textContent = "library";
+    //     }
+    // }
 
     switchToLibrary = () => {
         this._parents.push(this._activeDoc);
         this.switchCurrentView((userDoc: Doc) => this._library);
         this._activeDoc = this._library;
         this._homeMenu = false;
-        this.toggleSidebar();
+        this.sidebarActive = true;
     }
 
     back = () => {
@@ -1084,14 +1086,14 @@ export class MobileInterface extends React.Component {
     }
 
     returnHome = () => {
-        if (this._homeMenu === false || this._open === true) {
+        if (this._homeMenu === false || this.sidebarActive === true) {
             this._homeMenu = true;
             this._parents = [];
             this._activeDoc = this._homeDoc;
             this._child = null;
             this.switchCurrentView((userDoc: Doc) => this._homeDoc);
         }
-        if (this._open) {
+        if (this.sidebarActive) {
             this.toggleSidebar();
         }
     }
@@ -1207,32 +1209,9 @@ export class MobileInterface extends React.Component {
         // let titleArray = [];
         let docArray = [];
         this._parents.map((doc: Doc, index: any) => {
-            // if (doc === this.mainDoc) {
-            //     pathname = pathname;
-            // } else if (doc.type === "audio" || doc.type === "presentation") {
-            //     pathname = pathname;
-            // } else if (doc.type !== "collection") {
-            //     pathname = pathname;
-            // } else {
-            //     pathname = pathname + " > " + doc.title;
-            //     titleArray.push(doc.title);
-            //     docArray.push(doc);
-            // }
             docArray.push(doc);
         });
         docArray.push(this._activeDoc);
-        // if (this._activeDoc.title === "mobile audio") {
-        //     pathname = this._activeDoc.title;
-        // } else if (this._activeDoc.title === "Presentation") {
-        //     pathname = this._activeDoc.title;
-        // } else if (this._activeDoc === this.mainDoc) {
-        //     pathname = pathname;
-        // } else {
-        //     pathname = pathname + " > " + this._activeDoc.title;
-        //     docArray.push(this._activeDoc);
-        //     titleArray.push(this._activeDoc.title);
-        // }
-
         return docArray;
     }
 
@@ -1320,7 +1299,6 @@ export class MobileInterface extends React.Component {
         } else if (doc === this._homeDoc) {
             this.returnHome();
         } else {
-            console.log(index);
             this._activeDoc = doc;
             this._child = doc;
             this.switchCurrentView((userDoc: Doc) => doc);
@@ -1335,7 +1313,7 @@ export class MobileInterface extends React.Component {
                     <div
                         className="item"
                         key={index}
-                        onClick={() => doc.proto?.onClick}>{doc.title}
+                        onClick={() => doc.onClick}>{doc.title}
                     </div>);
             }
         });
@@ -1346,6 +1324,7 @@ export class MobileInterface extends React.Component {
                     <div className="navbar">
                         <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
                         <div className="header" id="header">{this._homeDoc.title}</div>
+                        <div className="cover" id="cover" onClick={(e) => this.stop(e)}></div>
                         <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
                             <span></span>
                             <span></span>
@@ -1361,7 +1340,12 @@ export class MobileInterface extends React.Component {
                 </div>
             );
         }
-        const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+
+        let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+        if (this._child) {
+            workspaces = this._child
+        }
+
         let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
             if (doc.type !== "ink") {
                 return (
@@ -1375,88 +1359,39 @@ export class MobileInterface extends React.Component {
             }
         });
 
-        if (this._child) {
-            buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => {
-                if (doc.type !== "ink") {
-                    return (
-                        <div
-                            className="item"
-                            key={index}
-                            onClick={() => this.handleClick(doc)}>{doc.title}
-                            <div className="type">{doc.type}</div>
-                            <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
-                        </div>);
-                }
-            });
-        }
-
-        if (!this._child) {
-            return (
-                <div>
-                    <div className="navbar">
-                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
-                        <div className="header" id="header">{this._homeDoc.title}</div>
-                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </div>
-                    </div>
-                    {this.renderPathbar()}
-                    <div className="sidebar" id="sidebar">
-                        <div className="sidebarButtons">
-                            {buttons}
-                            {/* <div className="item" key="library" onClick={this.openLibrary}>
-                                Library
-                            </div> */}
-                            {/* <Uploader Document={workspaces} />
-                            <div className="item" key="audio" onClick={this.recordAudio}>
-                                Record Audio
-                            </div>
-                            <div className="item" key="presentation" onClick={this.openDefaultPresentation}>
-                                Presentation
-                            </div> */}
-                            {/* <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>
-                                Settings
-                            </div> */}
-                            <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
-                                Ink On
-                            </div>
-                        </div>
+        return (
+            <div>
+                <div className="navbar">
+                    <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+                    <div className="header" id="header">{this.sidebarActive ? "library" : this._activeDoc.title}</div>
+                    <div className={`toggle-btn ${this.sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
+                        <span></span>
+                        <span></span>
+                        <span></span>
                     </div>
-                    {/* <div>
-                        {this.renderView}
-                    </div> */}
                 </div>
-            );
-        }
-        else {
-            return (
-                <div>
-                    <div className="navbar">
-                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
-                        <div className="header" id="header">library</div>
-                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </div>
-                    </div>
-                    {this.renderPathbar()}
-                    <div className="sidebar" id="sidebar">
-                        <div className="sidebarButtons">
-                            {buttons}
-                            <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
-                                Ink On
-                            </div>
-                            <div className="item" key="home" onClick={this.returnMain}>
-                                Home
+                {this.renderPathbar()}
+                <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}>
+                    <div className="sidebarButtons">
+                        {this._child ?
+                            <>
+                                {buttons}
+                                <div className="item" key="home" onClick={this.returnMain}>
+                                    Return to library
                             </div>
-                        </div>
+                            </> :
+                            <>
+                                {buttons}
+                            </>
+                        }
                     </div>
                 </div>
-            );
-        }
+            </div>
+        );
+    }
+
+    stop = (e: React.MouseEvent) => {
+        e.stopPropagation();
     }
 
     uploadAudioButton = () => {
@@ -1556,9 +1491,7 @@ export class MobileInterface extends React.Component {
             this._parents.push(this._activeDoc);
         }
         const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc;
-        console.log(audioDoc);
         if (audioDoc) {
-            console.log("audioClicked: " + audioDoc.title);
             this._activeDoc = audioDoc;
             this.switchCurrentView((userDoc: Doc) => audioDoc);
             this._homeMenu = false;
@@ -1579,7 +1512,6 @@ export class MobileInterface extends React.Component {
         const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
         const audioDoc = this._activeDoc;
         const data = Cast(audioRightSidebar.data, listSpec(Doc));
-        console.log(audioDoc.proto);
         if (data) {
             data.push(audioDoc);
         }
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 2641cdfd2..669b55601 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -22,6 +22,16 @@ body {
     border-bottom: 5px solid black;
 }
 
+.navbar .cover {
+    position: absolute;
+    right: 20px;
+    top: 30px;
+    height: 70px;
+    width: 70px;
+    background-color: whitesmoke;
+    z-index: 200;
+}
+
 .navbar .toggle-btn {
     position: absolute;
     right: 20px;
@@ -31,6 +41,10 @@ body {
     transition: all 300ms ease-in-out 200ms;
 }
 
+.navbar .toggle-btn-home {
+    right: -200px;
+}
+
 .navbar .header {
     position: absolute;
     top: 50%;
@@ -311,7 +325,7 @@ body {
 
 .toolbar.active {
     display: inline-block;
-    width: fit-content;
+    width: 300px;
     padding: 5px;
     opacity: 1;
     height: max-content;
@@ -320,7 +334,7 @@ body {
 
 .toolbar .colorSelector {
     display: inline-flex;
-    width: fit-content;
+    width: max-content;
     padding: 5px;
     height: max-content;
     pointer-events: all;
@@ -328,9 +342,9 @@ body {
 
 .widthSelector {
     display: inline-flex;
-    width: 90%;
+    width: max-content;
     height: 100px;
-    padding: 5px;
+    padding: 10px;
 }
 
 .slider {
-- 
cgit v1.2.3-70-g09d2