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

6 files changed, 126 insertions, 27 deletions

diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index d4a76ee17..9c5bf0a1f 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -39,4 +39,49 @@
         background-repeat: no-repeat;
         background-position: left center;
     }
+}
+
+@media only screen and (max-width: 1000px) {
+    .antimodeMenu-cont {
+        position: absolute;
+        z-index: 10000;
+        height: 100px;
+        background: #323232;
+        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
+        border-radius: 0px 6px 6px 6px;
+        // overflow: hidden;    
+        display: flex;
+    
+        &.with-rows {
+            flex-direction: column
+        }
+    
+        .antimodeMenu-row {
+            display: flex;
+            height: 35px;
+        }
+    
+        .antimodeMenu-button {
+            background-color: transparent;
+            width: 35px;
+            height: 35px;
+    
+            &.active {
+                background-color: #121212;
+            }
+        }
+    
+        .antimodeMenu-button:hover {
+            background-color: #121212;
+        }
+    
+        .antimodeMenu-dragger {
+            height: 100%;
+            transition: width .2s;
+            background-image: url("https://logodix.com/logo/1020374.png");
+            background-size: 90% 100%;
+            background-repeat: no-repeat;
+            background-position: left center;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index a7f4d4e53..3671a84b9 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -33,4 +33,5 @@
 
 
     }
-}
\ No newline at end of file
+}
+
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 687422cf2..f2914eaae 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -38,6 +38,7 @@ import GestureOverlay from "../client/views/GestureOverlay";
 import { SelectionManager } from "../client/util/SelectionManager";
 import { SketchPicker } from "react-color";
 import { ScriptField } from "../fields/ScriptField";
+import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu";
 
 library.add(faTasks, faMobile, faThLarge, 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,
@@ -76,7 +77,7 @@ export class MobileInterface extends React.Component {
     private _open: boolean = false;
 
     // private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
-    private _ink: boolean = false;
+    @observable private _ink: boolean = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -93,10 +94,7 @@ export class MobileInterface extends React.Component {
             this.userDoc.activeMobile = this._homeDoc;
         }
         this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false;
-        // InkingStroke.switchTool(InkTool.None);
-        MobileInterface.Instance.drawingInk = false;
-        // InkingControl.Instance.updateSelectedColor("#FF0000");
-        // InkingControl.Instance.switchWidth("2");
+        Doc.SetSelectedTool(InkTool.None);
         this.switchCurrentView((userDoc: Doc) => this._homeDoc);
     }
 
@@ -199,7 +197,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);
@@ -254,7 +252,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);
@@ -297,12 +295,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">
@@ -504,7 +514,9 @@ export class MobileInterface extends React.Component {
                             {/* <SketchPicker onChange={InkingControl.Instance.switchColor} presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
                                 color={StrCast(CurrentUserUtils.ActivePen ? CurrentUserUtils.ActivePen.backgroundColor : undefined,
                                 StrCast(selDoc?._backgroundColor, StrCast(selDoc?.backgroundColor, "black")))} /> */}
+                            <InkOptionsMenu />
                         </div>
+
                         <div className="widthSelector">
                             {/* <input type="range" min="1" max="100" defaultValue="2" id="myRange" onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.Instance.switchWidth(e.target.value)} /> */}
                         </div>
@@ -514,6 +526,7 @@ export class MobileInterface extends React.Component {
         }
     }
 
+    @action
     onSwitchInking = () => {
         const button = document.getElementById("inkButton") as HTMLElement;
         // const color = InkingControl.Instance.selectedColor;
@@ -524,26 +537,44 @@ export class MobileInterface extends React.Component {
         if (!this._ink) {
             console.log("INK IS ACTIVE");
             // InkingControl.Instance.switchTool(InkTool.Pen);
-            MobileInterface.Instance.drawingInk = true;
+            Doc.SetSelectedTool(InkTool.Pen);
+            InkOptionsMenu.Instance.jumpTo(300, 300);
             this._ink = true;
         } else {
             console.log("INK IS INACTIVE");
             // InkingControl.Instance.switchTool(InkTool.None);
-            MobileInterface.Instance.drawingInk = false;
+            Doc.SetSelectedTool(InkTool.None);
+            InkOptionsMenu.Instance.fadeOut(true);
             this._ink = false;
         }
     }
 
+    inkMenu = () => {
+        if (this._activeDoc._viewType === "docking") {
+            if (this._ink) {
+                return <InkOptionsMenu />
+            }
+        }
+    }
+
     drawInk = () => {
         if (this._activeDoc._viewType === "docking") {
             const inkIsOn = this._ink;
-            return <div className="docButton"
-                id="inkButton"
-                title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
-                onClick={this.onSwitchInking}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib"
-                />
-            </div>;
+            return (
+                <>
+                    <div className="docButton"
+                        id="inkButton"
+                        title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
+                        onClick={this.onSwitchInking}>
+                        <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib"
+                        />
+                    </div>
+                    {/* <div className={`colorMenu ${this._ink ? "active" : ""}`}>
+                        <InkOptionsMenu />
+                    </div> */}
+                    :
+
+                </>);
         }
     }
 
@@ -812,7 +843,9 @@ export class MobileInterface extends React.Component {
                     {this.downloadDocument()}
                     {this.drawInk()}
                     {this.uploadAudioButton()}
-                    {this.colorTool()}
+                    {/* {this.colorTool()} */}
+                    {this.inkMenu()}
+                    <InkOptionsMenu />
                 </div>
                 <GestureOverlay>
                     {this.displayWorkspaces()}
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index f602b85a0..da1e9d951 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -310,6 +310,7 @@ body {
     text-align: center;
     user-select: none;
     z-index: 99;
+    pointer-events: none;
 }
 
 .toolbar {
@@ -400,4 +401,4 @@ body {
 .list.active {
     color: darkred;
     border-color: darkred;
-}
\ No newline at end of file
+}