From 713b200804fa84d654aeb0051e086641d55d95d9 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 2 Jul 2020 10:17:26 -0400 Subject: started some cleanup for Mobile .. lookslike workspaces view is broken now --- src/mobile/MobileInterface.tsx | 393 +++++++++++++++++------------------------ 1 file changed, 164 insertions(+), 229 deletions(-) (limited to 'src/mobile') diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 1b934df93..34894250a 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -13,7 +13,7 @@ import { action, computed, observable, reaction, trace } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast } from '../fields/Doc'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; -import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from '../Utils'; +import { emptyFunction, emptyPath, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from '../Utils'; import { Docs, DocumentOptions } from '../client/documents/Documents'; import { Scripting } from '../client/util/Scripting'; import { DocumentView } from '../client/views/nodes/DocumentView'; @@ -35,7 +35,6 @@ import { AudioUpload } from "./AudioUpload"; import { Cast, FieldValue } from '../fields/Types'; import RichTextMenu from "../client/views/nodes/formattedText/RichTextMenu"; import { AudioBox } from "../client/views/nodes/AudioBox"; -import { Compute } from "google-auth-library"; library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, 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, @@ -47,22 +46,22 @@ library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngl @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; } - @observable private mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(this.userDoc); - @observable private renderView?: () => JSX.Element; - @observable private sidebarActive: boolean = false; //to toggle sidebar display - @observable private imageUploadActive: boolean = false; //to toggle image upload - @observable private audioUploadActive: boolean = false; - @observable private menuListView: boolean = false; //to switch between menu view (list / icon) + @observable private _mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(Doc.UserDoc()); + @observable private _sidebarActive: boolean = false; //to toggle sidebar display + @observable private _imageUploadActive: boolean = false; //to toggle image upload + @observable private _audioUploadActive: boolean = false; + @observable private _menuListView: boolean = false; //to switch between menu view (list / icon) @observable private _ink: boolean = false; //toggle whether ink is being dispalyed + @observable private renderView?: () => JSX.Element; - public _activeDoc: Doc = this.mainDoc; // doc updated as the active mobile page is updated (initially home menu) - public _homeDoc: Doc = this.mainDoc; // home menu as a document + private _activeDoc: Doc = this._mainDoc; // doc updated as the active mobile page is updated (initially home menu) + private _homeDoc: Doc = this._mainDoc; // home menu as a document private _homeMenu: boolean = true; // to determine whether currently at home menu private _child: Doc | null = null; // currently selected document private _parents: Array = []; // array of parent docs (for pathbar) - private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); // to access documents in Dash Web + private _library: Doc = CurrentUserUtils.setupLibrary(Doc.UserDoc()); // to access documents in Dash Web + + @computed private get mainContainer() { return Doc.UserDoc() ? FieldValue(Cast(Doc.UserDoc().activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } constructor(props: Readonly<{}>) { super(props); @@ -72,7 +71,7 @@ export class MobileInterface extends React.Component { @action componentDidMount = () => { // if the home menu is in list view -> adjust the menu toggle appropriately - this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false; + this._menuListView = this._homeDoc._viewType === "stacking" ? true : false; Doc.SetSelectedTool(InkTool.None); // ink should intially be set to none Doc.UserDoc().activeMobile = this._homeDoc; // active mobile set to home AudioBox.Enabled = true; @@ -95,14 +94,14 @@ export class MobileInterface extends React.Component { // Switch the mobile view to the given doc @action switchCurrentView = (doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { - if (!this.userDoc) return; + if (!Doc.UserDoc()) return; if (this._activeDoc === this._homeDoc) { this._parents.push(this._activeDoc); this._homeMenu = false; } this._activeDoc = doc; Doc.UserDoc().activeMobile = doc; - onSwitch && onSwitch(); + onSwitch?.(); this.renderView = renderView; // Ensures that switching to home is not registed @@ -113,7 +112,7 @@ export class MobileInterface extends React.Component { // For toggling the hamburger menu @action toggleSidebar = () => { - this.sidebarActive = !this.sidebarActive; + this._sidebarActive = !this._sidebarActive; if (this._ink) { this.onSwitchInking(); @@ -126,7 +125,6 @@ export class MobileInterface extends React.Component { this.switchCurrentView(this._library); this._homeMenu = false; this.toggleSidebar(); - //setTimeout(this.toggleSidebar, 300); } /** @@ -146,13 +144,11 @@ export class MobileInterface extends React.Component { this._child = null; this.switchCurrentView(this._homeDoc); // Case 3: Parent document is any document - } else { - if (doc) { - this._child = doc; - this.switchCurrentView(doc); - this._homeMenu = false; - header.textContent = String(doc.title); - } + } else if (doc) { + this._child = doc; + this.switchCurrentView(doc); + this._homeMenu = false; + header.textContent = String(doc.title); } this._ink = false; // turns ink off } @@ -161,13 +157,13 @@ export class MobileInterface extends React.Component { * Return 'Home", which implies returning to 'Home' menu buttons */ returnHome = () => { - if (!this._homeMenu || this.sidebarActive) { + if (!this._homeMenu || this._sidebarActive) { this._homeMenu = true; this._parents = []; this._child = null; this.switchCurrentView(this._homeDoc); } - if (this.sidebarActive) { + if (this._sidebarActive) { this.toggleSidebar(); } } @@ -185,42 +181,38 @@ export class MobileInterface extends React.Component { /** * DocumentView for graphic display of all documents */ + whitebackground = () => "white"; @computed get displayWorkspaces() { - if (this.mainContainer) { - const backgroundColor = () => "white"; - return ( -
- -
- ); - } + return !this.mainContainer ? (null) : +
+ +
; } - /** * Note: window.innerWidth and window.screen.width compute different values. * window.screen.width is the display size, however window.innerWidth is the @@ -235,8 +227,7 @@ export class MobileInterface extends React.Component { * @param doc: doc for which the method is called */ handleClick = async (doc: Doc) => { - const children = DocListCast(doc.data); - if (doc.type !== "collection" && this.sidebarActive) { + if (doc.type !== "collection" && this._sidebarActive) { this._parents.push(this._activeDoc); this.switchCurrentView(doc); this._homeMenu = false; @@ -267,12 +258,7 @@ export class MobileInterface extends React.Component { * Handles creation of array which is then rendered in renderPathbar() */ createPathname = () => { - const docArray = []; - this._parents.map((doc: Doc, index: any) => { - docArray.push(doc); - }); - docArray.push(this._activeDoc); - return docArray; + return [...this._parents, this._activeDoc]; } // Renders the graphical pathbar @@ -280,24 +266,21 @@ export class MobileInterface extends React.Component { const docArray = this.createPathname(); const items = docArray.map((doc: Doc, index: any) => { if (index === 0) { - return ( - <> - {this._homeMenu ? -
-
this.handlePathClick(doc, index)}>{doc.title} -
-
- : -
-
this.handlePathClick(doc, index)}>{doc.title} -
-
} - ); + return this._homeMenu ? +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
+ : +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
; } else if (doc === this._activeDoc) { return ( @@ -357,14 +340,14 @@ export class MobileInterface extends React.Component { } // Renders the contents of the menu and sidebar - renderDefaultContent = () => { + @computed get renderDefaultContent() { if (this._homeMenu) { return (
-
this.stop(e)}>
+
e.stopPropagation()}>