From 2f1714f0175f8fc766ba030848f5469e429307f4 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Fri, 12 Jun 2020 11:17:40 +0800
Subject: menu bug fix

---
 src/client/views/GestureOverlay.tsx  |    2 +-
 src/client/views/nodes/AudioBox.scss |  206 +++++--
 src/client/views/nodes/ColorBox.tsx  |    4 +-
 src/mobile/MobileInterface.tsx       | 1012 ++--------------------------------
 src/mobile/MobileMenu.scss           |    5 +-
 5 files changed, 192 insertions(+), 1037 deletions(-)

(limited to 'src')

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 1879f3096..3bb80abd0 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -107,7 +107,7 @@ 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) {
+        if (RadialMenu.Instance?._display === true) {
             te.preventDefault();
             te.stopPropagation();
             RadialMenu.Instance.closeMenu();
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 53b54d7e4..61ce4bd13 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,141 +1,169 @@
-.audiobox-container, .audiobox-container-interactive {
+.audiobox-container,
+.audiobox-container-interactive {
     width: 100%;
     height: 100%;
     position: inherit;
-    display:flex;
+    display: flex;
     pointer-events: all;
-    cursor:default;
+    cursor: default;
+
     .audiobox-buttons {
         display: flex;
         width: 100%;
         align-items: center;
     }
+
     .audiobox-handle {
-        width:20px;
-        height:100%;
-        display:inline-block;
+        width: 20px;
+        height: 100%;
+        display: inline-block;
     }
-    .audiobox-control, .audiobox-control-interactive {
-        top:0;
+
+    .audiobox-control,
+    .audiobox-control-interactive {
+        top: 0;
         max-height: 32px;
         width: 100%;
-        display:inline-block;
+        display: inline-block;
         pointer-events: none;
     }
+
     .audiobox-control-interactive {
         pointer-events: all;
     }
+
     .audiobox-record {
         pointer-events: all;
-        width:100%;
-        height:100%;
+        width: 100%;
+        height: 100%;
         position: relative;
         pointer-events: none;
     }
+
     .audiobox-record-interactive {
         pointer-events: all;
-        width:100%;
-        height:100%;
+        width: 100%;
+        height: 100%;
         position: relative;
     }
+
     .audiobox-controls {
-        width:100%;
-        height:100%;
+        width: 100%;
+        height: 100%;
         position: relative;
         display: flex;
         padding-left: 2px;
+
         .audiobox-player {
-            margin-top:auto;
-            margin-bottom:auto;
-            width:100%;
+            margin-top: auto;
+            margin-bottom: auto;
+            width: 100%;
             height: 80%;
             position: relative;
             padding-right: 5px;
             display: flex;
-            .audiobox-playhead, .audiobox-dictation {
+
+            .audiobox-playhead,
+            .audiobox-dictation {
                 position: relative;
                 margin-top: auto;
                 margin-bottom: auto;
                 width: 25px;
                 padding: 2px;
             }
+
             .audiobox-dictation {
                 align-items: center;
                 display: inherit;
                 background: dimgray;
             }
+
             .audiobox-timeline {
-                position:relative;
-                height:100%;
-                width:100%;
+                position: relative;
+                height: 100%;
+                width: 100%;
                 background: white;
                 border: gray solid 1px;
                 border-radius: 3px;
+
                 .audiobox-current {
                     width: 1px;
-                    height:100%;
+                    height: 100%;
                     background-color: red;
                     position: absolute;
                 }
-                .audiobox-linker, .audiobox-linker-mini {
-                    position:absolute;
-                    width:15px;
-                    min-height:10px;
-                    height:15px;
-                    margin-left:-2.55px;
-                    background:gray;
+
+                .audiobox-linker,
+                .audiobox-linker-mini {
+                    position: absolute;
+                    width: 15px;
+                    min-height: 10px;
+                    height: 15px;
+                    margin-left: -2.55px;
+                    background: gray;
                     border-radius: 100%;
-                    opacity:0.9;
+                    opacity: 0.9;
                     background-color: transparent;
                     box-shadow: black 2px 2px 1px;
+
                     .linkAnchorBox-cont {
                         position: relative !important;
-                        height: 100%  !important;
+                        height: 100% !important;
                         width: 100% !important;
-                        left:unset !important;
-                        top:unset !important;
+                        left: unset !important;
+                        top: unset !important;
                     }
                 }
+
                 .audiobox-linker-mini {
-                    width:8px;
-                    min-height:8px;
-                    height:8px;
+                    width: 8px;
+                    min-height: 8px;
+                    height: 8px;
                     box-shadow: black 1px 1px 1px;
                     margin-left: -1;
                     margin-top: -2;
+
                     .linkAnchorBox-cont {
                         position: relative !important;
-                        height: 100%  !important;
+                        height: 100% !important;
                         width: 100% !important;
-                        left:unset !important;
-                        top:unset !important;
+                        left: unset !important;
+                        top: unset !important;
                     }
                 }
-                .audiobox-linker:hover, .audiobox-linker-mini:hover {
-                    opacity:1;
+
+                .audiobox-linker:hover,
+                .audiobox-linker-mini:hover {
+                    opacity: 1;
                 }
-                .audiobox-marker-container, .audiobox-marker-minicontainer {
-                    position:absolute;
-                    width:10px;
-                    height:90%;
-                    top:2.5%;
-                    background:gray;
+
+                .audiobox-marker-container,
+                .audiobox-marker-minicontainer {
+                    position: absolute;
+                    width: 10px;
+                    height: 90%;
+                    top: 2.5%;
+                    background: gray;
                     border-radius: 5px;
                     box-shadow: black 2px 2px 1px;
+
                     .audiobox-marker {
-                        position:relative;
+                        position: relative;
                         height: calc(100% - 15px);
                         margin-top: 15px;
                     }
+
                     .audio-marker:hover {
                         border: orange 2px solid;
                     }
                 }
+
                 .audiobox-marker-minicontainer {
-                    width:5px;
+                    width: 5px;
                     border-radius: 1px;
+
                     .audiobox-marker {
-                        position:relative;
+                        position: relative;
                         height: calc(100% - 8px);
                         margin-top: 8px;
                     }
@@ -143,4 +171,80 @@
             }
         }
     }
+}
+
+
+@media only screen and (max-width: 1000px) {
+
+    .audiobox-container,
+    .audiobox-container-interactive {
+        width: max-content;
+        /* align-self: center; */
+        left: 50%;
+        top: 40%;
+        transform: translate(-50%, 0);
+        height: 100px;
+        position: absolute;
+        display: flex;
+        pointer-events: all;
+        /* cursor: default; */
+    }
+
+    .audiobox-container .audiobox-buttons,
+    .audiobox-container-interactive .audiobox-buttons {
+        display: flex;
+        width: 500px;
+        /* left: 50%; */
+        /* transform: translate(-50%,0); */
+        align-items: center;
+    }
+
+    .audiobox-dictation {
+        width: 100;
+        height: 100;
+        font-size: 50;
+        /* background-color: white; */
+    }
+
+    .audiobox-container .audiobox-record-interactive,
+    .audiobox-container-interactive .audiobox-record-interactive {
+        width: 95%;
+        user-select: none;
+        font-size: 50px;
+        font-weight: 100;
+        left: 5%;
+        height: 100%;
+        position: relative;
+    }
+
+    .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead,
+    .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
+    .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead,
+    .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-dictation {
+        position: relative;
+        align-self: center;
+        width: 50px;
+        height: max-content;
+        padding: 0;
+    }
+
+    .audiobox-container .audiobox-controls .audiobox-player,
+    .audiobox-container-interactive .audiobox-controls .audiobox-player {
+        margin-top: auto;
+        margin-bottom: auto;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        padding-right: 5px;
+        display: flex;
+    }
+
+    .audiobox-container .audiobox-controls,
+    .audiobox-container-interactive .audiobox-controls {
+        width: 500px;
+        height: 100%;
+        position: relative;
+        display: flex;
+        padding-left: 2px;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 0d6258cf3..f49b1f763 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -60,9 +60,9 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
                     StrCast(selDoc?._backgroundColor, StrCast(selDoc?.backgroundColor, "black")))} />
             <div style={{ display: "grid", gridTemplateColumns: "20% 80%", paddingTop: "10px" }}>
                 <div> {ActiveInkWidth() ?? 2}</div>
-                <input type="range" value={ActiveInkWidth() ?? 2} defaultValue={2} min={1} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => SetActiveInkWidth(e.target.value)} />
+                <input type="range" value={ActiveInkWidth() ?? 2} min={1} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => SetActiveInkWidth(e.target.value)} />
                 <div> {ActiveInkBezierApprox() ?? 2}</div>
-                <input type="range" value={ActiveInkBezierApprox() ?? 2} defaultValue={2} min={0} max={300} onChange={(e: React.ChangeEvent<HTMLInputElement>) => SetActiveBezierApprox(e.target.value)} />
+                <input type="range" value={ActiveInkBezierApprox() ?? 2} min={0} max={300} onChange={(e: React.ChangeEvent<HTMLInputElement>) => SetActiveBezierApprox(e.target.value)} />
                 <br />
                 <br />
             </div>
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index d9399d549..687422cf2 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -46,903 +46,6 @@ library.add(faTasks, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faP
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
     faThumbtack, faTree, faTv, faUndoAlt, faBook, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft);
 
-// @observer
-// export class MobileInterface extends React.Component {
-//     @observable static Instance: MobileInterface;
-//     @computed private get userDoc() { return Doc.UserDoc(); }
-//     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
-//     @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
-//     // @observable private currentView: "main" | "ink" | "upload" = "main";
-//     @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc);
-//     @observable private renderView?: () => JSX.Element;
-//     @observable private sidebarActive = true;
-
-//     public _activeDoc: Doc = this.mainDoc;
-//     public _homeDoc: Doc = this.mainDoc;
-//     private _homeMenu: boolean = true;
-
-//     // private inkDoc?: Doc;
-//     public drawingInk: boolean = false;
-//     private _ink: boolean = false;
-
-//     // private _uploadDoc: Doc = this.userDoc;
-//     private _child: Doc | null = null;
-//     private _parents: Array<Doc> = [];
-//     private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc);
-//     private _open: boolean = false;
-
-//     constructor(props: Readonly<{}>) {
-//         super(props);
-//         MobileInterface.Instance = this;
-//     }
-
-//     @action
-//     componentDidMount = () => {
-//         library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]);
-
-//         if (this.userDoc && !this.mainContainer) {
-//             this.userDoc.activeMobile = this._homeDoc;
-//         }
-
-//         InkingControl.Instance.switchTool(InkTool.None);
-//         MobileInterface.Instance.drawingInk = false;
-//         InkingControl.Instance.updateSelectedColor("#FF0000");
-//         InkingControl.Instance.switchWidth("2");
-//         this.switchCurrentView((userDoc: Doc) => this._homeDoc);
-//     }
-
-//     @action
-//     switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => {
-//         if (!this.userDoc) return;
-
-//         this.userDoc.activeMobile = doc(this.userDoc);
-//         onSwitch && onSwitch();
-
-//         this.renderView = renderView;
-//     }
-
-//     onSwitchInking = () => {
-//         const button = document.getElementById("inkButton") as HTMLElement;
-//         const color = InkingControl.Instance.selectedColor;
-//         button.style.backgroundColor = this._ink ? "white" : color;
-//         button.style.color = this._ink ? "black" : "white";
-
-//         if (!this._ink) {
-//             console.log("INK IS ACTIVE");
-//             InkingControl.Instance.switchTool(InkTool.Pen);
-//             MobileInterface.Instance.drawingInk = true;
-//             this._ink = true;
-//         } else {
-//             console.log("INK IS INACTIVE");
-//             InkingControl.Instance.switchTool(InkTool.None);
-//             MobileInterface.Instance.drawingInk = false;
-//             this._ink = false;
-//         }
-//     }
-
-//     onSwitchUpload = async () => {
-//         let width = 300;
-//         let height = 300;
-//         const res = await rp.get(Utils.prepend("/getUserDocumentId"));
-
-//         // get width and height of the collection doc
-//         if (this.mainContainer) {
-//             const data = Cast(this.mainContainer.data, listSpec(Doc));
-//             if (data) {
-//                 const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked
-//                 const docView = DocumentManager.Instance.getDocumentView(collectionDoc);
-//                 if (docView) {
-//                     width = docView.nativeWidth ? docView.nativeWidth : 300;
-//                     height = docView.nativeHeight ? docView.nativeHeight : 300;
-//                 }
-//             }
-//         }
-//         DocServer.Mobile.dispatchOverlayTrigger({
-//             enableOverlay: true,
-//             width: width,
-//             height: height,
-//             text: "Documents uploaded from mobile will show here",
-//         });
-//     }
-
-//     back = () => {
-//         let header = document.getElementById("header") as HTMLElement;
-//         let doc = Cast(this._parents.pop(), Doc) as Doc;
-//         if (doc === Cast(this._library, Doc) as Doc) {
-//             this._child = null;
-//             this.userDoc.activeMobile = this._library;
-//         } else if (doc === Cast(this._homeDoc, Doc) as Doc) {
-//             this._homeMenu = true;
-//             this._parents = [];
-//             this._activeDoc = this._homeDoc;
-//             this._child = null;
-//             this.switchCurrentView((userDoc: Doc) => this._homeDoc);
-//         } else {
-//             if (doc) {
-//                 this._child = doc;
-//                 this.switchCurrentView((userDoc: Doc) => doc);
-//                 this._homeMenu = false;
-//                 header.textContent = String(doc.title);
-//             }
-//         }
-//         if (doc) {
-//             this._activeDoc = doc;
-//         }
-//         this._ink = false;
-//     }
-
-//     returnHome = () => {
-//         if (this._homeMenu === false || this._open === true) {
-//             this._homeMenu = true;
-//             this._parents = [];
-//             this._activeDoc = this._homeDoc;
-//             this._child = null;
-//             this.switchCurrentView((userDoc: Doc) => this._homeDoc);
-//         }
-//         if (this._open) {
-//             this.toggleSidebar();
-//         }
-//     }
-
-//     returnMain = () => {
-//         this._parents = [];
-//         // this.toggleSidebar();
-//         this._activeDoc = this._library;
-//         this.switchCurrentView((userDoc: Doc) => this._library);
-//         this._homeMenu = false;
-//         this._child = null;
-//     }
-
-//     displayWorkspaces = () => {
-//         if (this.mainContainer) {
-//             const backgroundColor = () => "white";
-//             if (this._activeDoc.title === "mobile audio") {
-//                 return (
-//                     <div style={{ position: "relative", top: '600px', height: `calc(50% - 450px)`, width: "80%", overflow: "hidden", left: "10%", cursor: "pointer" }}>
-//                         <DocumentView
-//                             Document={this.mainContainer}
-//                             DataDoc={undefined}
-//                             LibraryPath={emptyPath}
-//                             addDocument={returnFalse}
-//                             addDocTab={returnFalse}
-//                             pinToPres={emptyFunction}
-//                             rootSelected={returnFalse}
-//                             removeDocument={undefined}
-//                             onClick={undefined}
-//                             ScreenToLocalTransform={Transform.Identity}
-//                             ContentScaling={returnOne}
-//                             NativeHeight={returnZero}
-//                             NativeWidth={returnZero}
-//                             PanelWidth={() => window.screen.width}
-//                             PanelHeight={() => window.screen.height}
-//                             renderDepth={0}
-//                             focus={emptyFunction}
-//                             backgroundColor={backgroundColor}
-//                             parentActive={returnTrue}
-//                             whenActiveChanged={emptyFunction}
-//                             bringToFront={emptyFunction}
-//                             ContainingCollectionView={undefined}
-//                             ContainingCollectionDoc={undefined}
-//                         />
-//                     </div>
-//                 );
-//             } else {
-//                 return (
-//                     <div style={{ position: "relative", top: '200px', height: `calc(100% - 200px)`, width: "100%", overflow: "hidden", left: "0%" }}>
-//                         <DocumentView
-//                             Document={this.mainContainer}
-//                             DataDoc={undefined}
-//                             LibraryPath={emptyPath}
-//                             addDocument={returnFalse}
-//                             addDocTab={returnFalse}
-//                             pinToPres={emptyFunction}
-//                             rootSelected={returnFalse}
-//                             removeDocument={undefined}
-//                             onClick={undefined}
-//                             ScreenToLocalTransform={Transform.Identity}
-//                             ContentScaling={returnOne}
-//                             PanelWidth={this.returnWidth}
-//                             PanelHeight={this.returnHeight}
-//                             NativeHeight={returnZero}
-//                             NativeWidth={returnZero}
-//                             renderDepth={0}
-//                             focus={emptyFunction}
-//                             backgroundColor={backgroundColor}
-//                             parentActive={returnTrue}
-//                             whenActiveChanged={emptyFunction}
-//                             bringToFront={emptyFunction}
-//                             ContainingCollectionView={undefined}
-//                             ContainingCollectionDoc={undefined}
-//                         // mobile={true}
-//                         />
-//                     </div>
-//                 );
-//             }
-//         }
-//     }
-
-//     returnWidth = () => 2000;
-//     returnHeight = () => 2000;
-
-//     handleClick(doc: Doc) {
-//         let children = DocListCast(doc.data);
-//         if (doc.type !== "collection") {
-//             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) {
-//             console.log("This collection has no children");
-//         } else {
-//             this._parents.push(this._activeDoc);
-//             this._activeDoc = doc;
-//             this.switchCurrentView((userDoc: Doc) => doc);
-//             this._homeMenu = false;
-//             this._child = doc;
-//         }
-
-//         // let sidebar = document.getElementById("sidebar") as HTMLElement;
-//         // sidebar.classList.toggle('active');
-//     }
-
-//     createPathname = () => {
-//         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;
-//     }
-
-//     renderPathbar = () => {
-//         // if (this._homeMenu == false) {
-//         let docArray = this.createPathname();
-//         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>);
-//             } else if (doc === this._activeDoc) {
-//                 return (
-//                     <div className="pathbarItem">
-//                         <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" />
-//                         <div className="pathbarText"
-//                             style={{ backgroundColor: "rgb(119, 37, 37)" }}
-//                             key={index}
-//                             onClick={() => this.handlePathClick(doc, index)}>{doc.title}
-//                         </div>
-//                     </div>);
-//             } else {
-//                 return (
-//                     <div className="pathbarItem">
-//                         <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" />
-//                         <div className="pathbarText"
-//                             key={index}
-//                             onClick={() => this.handlePathClick(doc, index)}>{doc.title}
-//                         </div>
-//                     </div>);
-//             }
-
-//         });
-//         if (this._parents.length !== 0) {
-//             return (<div className="pathbar">
-//                 <div className="scrollmenu">
-//                     {items}
-//                 </div>
-//                 <div className="back" >
-//                     <FontAwesomeIcon onClick={this.back} icon={"chevron-left"} color="white" size={"2x"} />
-//                 </div>
-//                 <div className="hidePath" />
-//             </div>);
-//         } else {
-//             return (<div className="pathbar">
-//                 <div className="scrollmenu">
-//                     {items}
-//                 </div>
-//                 <div className="hidePath" />
-//             </div>);
-//         }
-//         //     }
-//         // } else {
-
-//         //     return (
-//         //         <div className="pathbar">
-//         //             <div className="scrollmenu">
-//         //                 <div className="pathbarItem">
-//         //                     <div className="pathbarText"
-//         //                         style={{ backgroundColor: "rgb(119, 37, 37)" }}
-//         //                         key={0}
-//         //                         onClick={() => this.returnHome()}>Home
-//         //                     </div>
-//         //                 </div>
-//         //             </div>
-//         //             <div className="hidePath" />
-//         //         </div>
-//         //     );
-//         // }
-
-//         // }
-//     }
-
-//     handlePathClick = (doc: Doc, index: number) => {
-//         if (doc === this._library) {
-//             this._activeDoc = doc;
-//             this._child = null;
-//             this.switchCurrentView((userDoc: Doc) => doc);
-//             this._parents.length = index;
-//         } else if (doc === this._homeDoc) {
-//             this.returnHome();
-//         } else {
-//             console.log(index);
-//             this._activeDoc = doc;
-//             this._child = doc;
-//             this.switchCurrentView((userDoc: Doc) => doc);
-//             this._parents.length = index;
-//         }
-//     }
-
-//     @action
-//     toggleSidebar = () => this.sidebarActive = !this.sidebarActive
-
-//     switchToLibrary = () => {
-//         this._parents.push(this._activeDoc);
-//         this.switchCurrentView((userDoc: Doc) => this._library);
-//         this._activeDoc = this._library;
-//         this._homeMenu = false;
-//         this.toggleSidebar();
-//     }
-
-//     // renderDefaultContent = () => {
-//     //     let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => {
-//     //         if (doc.type !== "ink") {
-//     //             return (
-//     //                 <div
-//     //                     className="item"
-//     //                     key={index}
-//     //                     onClick={() => doc.click}>{doc.title}
-//     //                 </div>);
-//     //         }
-//     //     });
-
-//     //     if (this._homeMenu === true) {
-//     //         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">
-//     //                         {menuButtons}
-//     //                     </div>
-//     //                 </div>
-//     //             </div>
-//     //         );
-//     //     }
-
-//     //     const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
-//     //     const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => {
-//     //         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>);
-//     //     });
-//     //     return (
-//     //         <>
-//     //             <div className="navbar">
-//     //                 <div className={"header"}>{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}</div>
-//     //                 <div
-//     //                     className={`toggle-btn ${this.sidebarActive ? "active" : ""}`}
-//     //                     onClick={this.toggleSidebar}
-//     //                 />
-//     //             </div>
-//     //             <div className="pathbar">
-//     //                 <div className="pathname">{this.createPathname()}</div>
-//     //             </div>
-//     //             <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}>
-//     //                 <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
-//     //                 {this._child ?
-//     //                     <>
-//     //                         <div className="back" onClick={this.back}>&#8592;</div>
-//     //                         <div>{buttons}</div>
-//     //                         <div className="item" key="home" onClick={this.returnHome}>Home</div>
-//     //                     </> :
-//     //                     <>
-//     //                         {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.setupDefaultPresentation}>Presentation</div>
-//     //                         <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>Settings</div>
-//     //                     </>
-//     //                 }
-//     //             </div>
-//     //             {this._child ? null : <div>{this.renderView}</div>}
-//     //         </>
-//     //     );
-//     // }
-
-//     recordAudio = async () => {
-//         // upload to server with known URL
-//         if (this._activeDoc.title !== "mobile audio") {
-//             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;
-//             // this.toggleSidebar();
-//         }
-//         // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
-//         // this.audioState = await audioDoc.getProto;
-//         // if (this.audioState) {
-//         //     console.log(this.audioState);
-//         //     const data = Cast(audioRightSidebar.data, listSpec(Doc));
-//         //     if (data) {
-//         //         data.push(audioDoc);
-//         //     }
-//         // }
-//     }
-
-//     uploadAudio = () => {
-//         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);
-//         }
-//         // this.recordAudio();
-//     }
-
-//     uploadAudioButton = () => {
-//         if (this._activeDoc.type === "audio") {
-//             return <div className="docButton"
-//                 title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
-//                 style={{ backgroundColor: "black", color: "white" }}
-//                 onClick={this.uploadAudio}
-//             >
-//                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload"
-//                 />
-//             </div>;
-//         }
-//     }
-
-//     toggleSelector = () => {
-//         console.log("toggle selector!");
-//         let toolbar = document.getElementById("toolbar") as HTMLElement;
-//         toolbar.classList.toggle('active');
-//     }
-
-//     colorTool = () => {
-//         if (this._activeDoc._viewType === "docking") {
-//             const color = InkingControl.Instance.selectedColor;
-//             console.log(color);
-//             return (
-//                 <div
-//                     className="docButton"
-//                     style={{ backgroundColor: color }}
-//                     onClick={this.toggleSelector}
-//                 >
-//                     <div className="toolbar" id="toolbar">
-//                         <div className="colorSelector">
-//                             <div className="colorButton"
-//                                 style={{ backgroundColor: "red" }}
-//                                 onClick={() => {
-//                                     InkingControl.Instance.updateSelectedColor("rgb(255,0,0)");
-//                                     Doc.UserDoc().inkColor = "rgb(255,0,0)";
-//                                     console.log(InkingControl.Instance.selectedColor);
-//                                 }}>
-//                             </div>
-//                             <div className="colorButton"
-//                                 style={{ backgroundColor: "green" }}
-//                                 onClick={e => {
-//                                     InkingControl.Instance.updateSelectedColor("rgb(0,128,0)");
-//                                     Doc.UserDoc().inkColor = "rgb(0,128,0)";
-//                                     console.log(InkingControl.Instance.selectedColor);
-//                                 }}>
-//                             </div>
-//                             <div className="colorButton"
-//                                 style={{ backgroundColor: "blue" }}
-//                                 onClick={e => {
-//                                     InkingControl.Instance.updateSelectedColor("rgb(0,0,255)");
-//                                     Doc.UserDoc().inkColor = "rgb(0,0,255)";
-//                                     console.log(InkingControl.Instance.selectedColor);
-//                                 }}>
-//                             </div>
-//                         </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>
-//                     </div>
-//                 </div>
-//             );
-//         }
-//     }
-
-//     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>;
-//         }
-//     }
-
-//     downloadDocument = () => {
-//         if (this._activeDoc.type === "image") {
-//             const url = this._activeDoc["data-path"]?.toString();
-//             return <div className="docButton"
-//                 title={"Download Image"}
-//                 style={{ backgroundColor: "white", color: "black" }}
-//                 onClick={e => {
-//                     window.open(url);
-//                     console.log(url);
-//                 }}>
-//                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download"
-//                 />
-//             </div>;
-//         }
-//     }
-
-//     pinToPresentation = () => {
-//         // Only making button available if it is an image
-//         if (this._activeDoc.type === "image") {
-//             const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
-//             return <div className="docButton"
-//                 title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"}
-//                 style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
-//                 onClick={e => {
-//                     if (isPinned) {
-//                         DockedFrameRenderer.UnpinDoc(this._activeDoc);
-//                     }
-//                     else {
-//                         DockedFrameRenderer.PinDoc(this._activeDoc);
-//                     }
-//                 }}>
-//                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
-//                 />
-//             </div>;
-//         }
-//     }
-
-//     setupDefaultPresentation = () => {
-//         if (this._activeDoc.title !== "Presentation") {
-//             this._parents.push(this._activeDoc);
-//         }
-
-//         const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
-
-//         if (presentation) {
-//             console.log(this._activeDoc.mobile);
-//             console.log("presentation clicked: " + presentation.title);
-//             this._activeDoc = presentation;
-//             this.switchCurrentView((userDoc: Doc) => presentation);
-//             this._homeMenu = false;
-//             // this.toggleSidebar();
-//         }
-//     }
-
-//     // mobileHome = () => {
-//     //     return (
-//     //         <div className="homeContainer">
-//     //             <div className="uploadButton">
-
-//     //             </div>
-//     //             <div className="presentationButton">
-
-//     //             </div>
-//     //             <div className="recordAudioButton">
-
-//     //             </div>
-//     //             <div className="inkButton">
-
-//     //             </div>
-//     //             <div className="settingsButton">
-
-//     //             </div>
-//     //         </div>
-//     //     );
-//     // }
-
-//     renderActiveCollection = (userDoc: Doc) => {
-//         if (this.activeContainer) {
-//             const active = Cast(this.activeContainer.data, listSpec(Doc));
-//             if (active) {
-//                 return (
-//                     <div className="mobileInterface-background">HELLO!</div>
-//                 );
-//             }
-//         }
-//     }
-
-//     onBack = (e: React.MouseEvent) => {
-//         this.switchCurrentView((userDoc: Doc) => this.mainDoc);
-//         InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
-
-//         DocServer.Mobile.dispatchOverlayTrigger({
-//             enableOverlay: false,
-//             width: window.innerWidth,
-//             height: window.innerHeight
-//         });
-
-//         // this.inkDoc = undefined;
-//         this.drawingInk = false;
-//     }
-
-//     shiftLeft = (e: React.MouseEvent) => {
-//         DocServer.Mobile.dispatchOverlayPositionUpdate({
-//             dx: -10
-//         });
-//         e.preventDefault();
-//         e.stopPropagation();
-//     }
-
-//     shiftRight = (e: React.MouseEvent) => {
-//         DocServer.Mobile.dispatchOverlayPositionUpdate({
-//             dx: 10
-//         });
-//         e.preventDefault();
-//         e.stopPropagation();
-//     }
-
-//     panelHeight = () => window.innerHeight;
-//     panelWidth = () => window.innerWidth;
-//     //WAS 3
-
-//     //WAS 1
-
-//     upload = async (e: React.MouseEvent) => {
-//         if (this.mainContainer) {
-//             const data = Cast(this.mainContainer.data, listSpec(Doc));
-//             if (data) {
-//                 const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked
-//                 const children = DocListCast(collectionDoc.data);
-//                 const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, {
-//                     title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300
-//                 });
-//                 if (uploadDoc) {
-//                     DocServer.Mobile.dispatchMobileDocumentUpload({
-//                         docId: uploadDoc[Id],
-//                     });
-//                 }
-//             }
-//         }
-//         e.stopPropagation();
-//         e.preventDefault();
-//     }
-
-//     addWebToCollection = async () => {
-//         let url = "https://en.wikipedia.org/wiki/Hedgehog";
-//         if (this.mainContainer) {
-//             const data = Cast(this.mainContainer.data, listSpec(Doc));
-//             if (data) {
-//                 const webDoc = await data[0];
-//                 const urlField: FieldResult<WebField> = Cast(webDoc.data, WebField);
-//                 url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog";
-
-//             }
-//         }
-//         Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" });
-//     }
-
-//     clearUpload = async () => {
-//         if (this.mainContainer) {
-//             const data = Cast(this.mainContainer.data, listSpec(Doc));
-//             if (data) {
-//                 const collectionDoc = await data[1];
-//                 const children = DocListCast(collectionDoc.data);
-//                 children.forEach(doc => {
-//                 });
-//                 // collectionDoc[data] = new List<Doc>();
-//             }
-//         }
-//     }
-
-//     onDragOver = (e: React.DragEvent) => {
-//         e.preventDefault();
-//         e.stopPropagation();
-//     }
-
-//     render() {
-//         // const content = this.currentView === "main" ? this.mainContent :
-//         //     this.currentView === "ink" ? this.inkContent :
-//         //         this.currentView === "upload" ? this.uploadContent : <></>;
-//         return (
-//             <div className="mobileInterface-container" onDragOver={this.onDragOver}>
-//                 {/* <DocumentDecorations />
-//                 <GestureOverlay>
-//                     {this.renderView ? this.renderView() : this.renderDefaultContent()}
-//                 </GestureOverlay> */}
-//                 {/* <GestureOverlay> */}
-//                 <SettingsManager />
-//                 {/* {this.menuOptions()} */}
-//                 {/* {this.displayHome()} */}
-//                 <div className="docButtonContainer">
-//                     {this.pinToPresentation()}
-//                     {this.downloadDocument()}
-//                     {this.drawInk()}
-//                     {this.uploadAudioButton()}
-//                     {this.colorTool()}
-//                 </div>
-//                 <GestureOverlay>
-
-//                 </GestureOverlay>
-//                 {this.renderDefaultContent()}
-//                 {this.displayWorkspaces()}
-//                 {/* </GestureOverlay> */}
-//                 {/* <DictationOverlay />
-//                 <SharingManager />
-//                 <GoogleAuthenticationManager /> */}
-//                 {/* <DocumentDecorations /> */}
-//                 {/* <div>
-//                     {this.renderDefaultContent()}
-//                 </div> */}
-//                 {/* <PreviewCursor /> */}
-//                 {/* <ContextMenu /> */}
-//                 {/* <RadialMenu />
-//                 <RichTextMenu /> */}
-//                 {/* <PDFMenu />
-//                 <MarqueeOptionsMenu />
-//                 <OverlayView /> */}
-//             </div>
-//         );
-//     }
-// }
-
-// Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
-// Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); });
-// Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); });
-// Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); });
-// Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); });
-// Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); });
-// // WAS 2
-
-// // 1
-// // renderUploadContent() {
-// //     if (this.mainContainer) {
-// //         return (
-// //             <div className="mobileInterface" onDragOver={this.onDragOver}>
-// //                 <div className="mobileInterface-inkInterfaceButtons">
-// //                     <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
-// //                     {/* <button className="mobileInterface-button" onClick={this.clearUpload} title="Clear Upload">CLEAR</button> */}
-// //                     {/* <button className="mobileInterface-button" onClick={this.addWeb} title="Add Web Doc to Upload Collection"></button> */}
-// //                     <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button>
-// //                 </div>
-// //                 <DocumentView
-// //                     Document={this.mainContainer}
-// //                     DataDoc={undefined}
-// //                     LibraryPath={emptyPath}
-// //                     addDocument={returnFalse}
-// //                     addDocTab={returnFalse}
-// //                     pinToPres={emptyFunction}
-// //                     rootSelected={returnFalse}
-// //                     removeDocument={undefined}
-// //                     onClick={undefined}
-// //                     ScreenToLocalTransform={Transform.Identity}
-// //                     ContentScaling={returnOne}
-// //                     NativeHeight={returnZero}
-// //                     NativeWidth={returnZero}
-// //                     PanelWidth={() => window.screen.width}
-// //                     PanelHeight={() => window.screen.height}
-// //                     renderDepth={0}
-// //                     focus={emptyFunction}
-// //                     backgroundColor={returnEmptyString}
-// //                     parentActive={returnTrue}
-// //                     whenActiveChanged={emptyFunction}
-// //                     bringToFront={emptyFunction}
-// //                     ContainingCollectionView={undefined}
-// //                     ContainingCollectionDoc={undefined} />
-// //             </div>
-// //         );
-// //     }
-// // }
-
-// // 2
-// // Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); });
-// // Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); });
-// // Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); });
-// // Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); });
-//     // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); });
-
-
-// // 3
-//     // renderInkingContent = () => {
-//         //     console.log("rendering inking content");
-//         //     // TODO: support panning and zooming
-//         //     // TODO: handle moving of ink strokes
-//         //     if (this.mainContainer) {
-//         //         return (
-//         //             <div className="mobileInterface">
-//         //                 <div className="mobileInterface-inkInterfaceButtons">
-//         //                     <div className="navButtons">
-//         //                         <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing">BACK</button>
-//         //                     </div>
-//         //                     <div className="inkSettingButtons">
-//         //                         <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
-//         //                     </div>
-//         //                     <div className="navButtons">
-//         //                         <button className="mobileInterface-button" onClick={this.shiftLeft} title="Shift left">left</button>
-//         //                         <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button>
-//         //                     </div>
-//         //                 </div>
-//         //                 <CollectionView
-//         //                     Document={this.mainContainer}
-//         //                     DataDoc={undefined}
-//         //                     LibraryPath={emptyPath}
-//         //                     fieldKey={""}
-//         //                     dropAction={"alias"}
-//         //                     bringToFront={emptyFunction}
-//         //                     addDocTab={returnFalse}
-//         //                     pinToPres={emptyFunction}
-//         //                     PanelWidth={this.panelWidth}
-//         //                     PanelHeight={this.panelHeight}
-//         //                     NativeHeight={returnZero}
-//         //                     NativeWidth={returnZero}
-//         //                     focus={emptyFunction}
-//         //                     isSelected={returnFalse}
-//         //                     select={emptyFunction}
-//         //                     active={returnFalse}
-//         //                     ContentScaling={returnOne}
-//         //                     whenActiveChanged={returnFalse}
-//         //                     ScreenToLocalTransform={Transform.Identity}
-//         //                     renderDepth={0}
-//         //                     ContainingCollectionView={undefined}
-//         //                     ContainingCollectionDoc={undefined}
-//         //                     rootSelected={returnTrue}>
-//         //                 </CollectionView>
-//         //             </div>
-//         //         );
-//         //     }
-//         // }
-
 @observer
 export class MobileInterface extends React.Component {
     @observable static Instance: MobileInterface;
@@ -1035,28 +138,6 @@ export class MobileInterface extends React.Component {
     @action
     toggleSidebar = () => this.sidebarActive = !this.sidebarActive
 
-    // 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 sidebar = document.getElementById("sidebar") as HTMLElement;
-    //     //sidebar.classList.toggle('active');
-
-    //     let header = document.getElementById("header") as HTMLElement;
-
-    //     if (!sidebar.classList.contains('active')) {
-    //         header.textContent = String(this._activeDoc.title);
-    //     } else {
-    //         header.textContent = "library";
-    //     }
-    // }
-
     /**
      * Method called when 'Library' button is pressed
      */
@@ -1134,66 +215,35 @@ export class MobileInterface extends React.Component {
     displayWorkspaces = () => {
         if (this.mainContainer) {
             const backgroundColor = () => "white";
-            if (this._activeDoc.title === "mobile audio") {
-                return (
-                    <div style={{ position: "relative", top: '600px', height: `calc(50% - 450px)`, width: "80%", overflow: "hidden", left: "10%", cursor: "pointer" }}>
-                        <DocumentView
-                            Document={this.mainContainer}
-                            DataDoc={undefined}
-                            LibraryPath={emptyPath}
-                            addDocument={returnFalse}
-                            addDocTab={returnFalse}
-                            pinToPres={emptyFunction}
-                            rootSelected={returnFalse}
-                            removeDocument={undefined}
-                            ScreenToLocalTransform={Transform.Identity}
-                            ContentScaling={returnOne}
-                            NativeHeight={returnZero}
-                            NativeWidth={returnZero}
-                            PanelWidth={() => window.screen.width}
-                            PanelHeight={() => window.screen.height}
-                            renderDepth={0}
-                            focus={emptyFunction}
-                            backgroundColor={backgroundColor}
-                            parentActive={returnTrue}
-                            whenActiveChanged={emptyFunction}
-                            bringToFront={emptyFunction}
-                            ContainingCollectionView={undefined}
-                            ContainingCollectionDoc={undefined}
-                        />
-                    </div>
-                );
-            } else {
-                return (
-                    <div style={{ position: "relative", top: '200px', height: `calc(100% - 200px)`, width: "100%", overflow: "hidden", left: "0%" }}>
-                        <DocumentView
-                            Document={this.mainContainer}
-                            DataDoc={undefined}
-                            LibraryPath={emptyPath}
-                            addDocument={returnFalse}
-                            addDocTab={returnFalse}
-                            pinToPres={emptyFunction}
-                            rootSelected={returnFalse}
-                            removeDocument={undefined}
-                            onClick={undefined}
-                            ScreenToLocalTransform={Transform.Identity}
-                            ContentScaling={returnOne}
-                            PanelWidth={this.returnWidth}
-                            PanelHeight={this.returnHeight}
-                            NativeHeight={returnZero}
-                            NativeWidth={returnZero}
-                            renderDepth={0}
-                            focus={emptyFunction}
-                            backgroundColor={backgroundColor}
-                            parentActive={returnTrue}
-                            whenActiveChanged={emptyFunction}
-                            bringToFront={emptyFunction}
-                            ContainingCollectionView={undefined}
-                            ContainingCollectionDoc={undefined}
-                        />
-                    </div>
-                );
-            }
+            return (
+                <div style={{ position: "relative", top: '200px', height: `calc(100% - 200px)`, width: "100%", overflow: "hidden", left: "0%" }}>
+                    <DocumentView
+                        Document={this.mainContainer}
+                        DataDoc={undefined}
+                        LibraryPath={emptyPath}
+                        addDocument={returnFalse}
+                        addDocTab={returnFalse}
+                        pinToPres={emptyFunction}
+                        rootSelected={returnFalse}
+                        removeDocument={undefined}
+                        onClick={undefined}
+                        ScreenToLocalTransform={Transform.Identity}
+                        ContentScaling={returnOne}
+                        PanelWidth={this.returnWidth}
+                        PanelHeight={this.returnHeight}
+                        NativeHeight={returnZero}
+                        NativeWidth={returnZero}
+                        renderDepth={0}
+                        focus={emptyFunction}
+                        backgroundColor={backgroundColor}
+                        parentActive={returnTrue}
+                        whenActiveChanged={emptyFunction}
+                        bringToFront={emptyFunction}
+                        ContainingCollectionView={undefined}
+                        ContainingCollectionDoc={undefined}
+                    />
+                </div>
+            );
         }
     }
 
@@ -1451,9 +501,9 @@ export class MobileInterface extends React.Component {
                 >
                     <div className={`toolbar ${this.activeToolbar ? "active" : ""}`}>
                         <div className="colorSelector">
-                            {/* <SketchPicker onChange={InkingControl.Instance.switchColor} presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} */}
+                            {/* <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")))} />
+                                StrCast(selDoc?._backgroundColor, StrCast(selDoc?.backgroundColor, "black")))} /> */}
                         </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)} /> */}
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 16eb035b3..f602b85a0 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -245,11 +245,12 @@ body {
     position: relative;
     width: 100px;
     height: 100px;
-    font-size: 90px;
+    font-size: 70px;
+    padding: 5px;
     text-align: center;
     border-style: solid;
     border-radius: 50px;
-    border-width: medium;
+    border-width: 5px;
     margin: 20px;
     z-index: 100;
 }
-- 
cgit v1.2.3-70-g09d2