diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 151 |
1 files changed, 55 insertions, 96 deletions
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 34894250a..1bf1fb022 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -9,7 +9,7 @@ import { faThumbtack, faTree, faTv, faBook, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, reaction, trace } from 'mobx'; +import { action, computed, observable, reaction, trace, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast } from '../fields/Doc'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; @@ -45,21 +45,19 @@ library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngl @observer export class MobileInterface extends React.Component { - @observable static Instance: MobileInterface; - @observable private _mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(Doc.UserDoc()); + static Instance: MobileInterface; + private _library: Doc = CurrentUserUtils.setupLibrary(Doc.UserDoc()); // to access documents in Dash Web + 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; - - 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<Doc> = []; // array of parent docs (for pathbar) - private _library: Doc = CurrentUserUtils.setupLibrary(Doc.UserDoc()); // to access documents in Dash Web + @observable private _homeMenu: boolean = true; // to determine whether currently at home menu + @observable private _child: Doc | null = null; // currently selected document + @observable private _activeDoc: Doc = this._mainDoc; // doc updated as the active mobile page is updated (initially home menu) + @observable private _homeDoc: Doc = this._mainDoc; // home menu as a document + @observable private _parents: Array<Doc> = []; // array of parent docs (for pathbar) @computed private get mainContainer() { return Doc.UserDoc() ? FieldValue(Cast(Doc.UserDoc().activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } @@ -103,7 +101,6 @@ export class MobileInterface extends React.Component { Doc.UserDoc().activeMobile = doc; onSwitch?.(); - this.renderView = renderView; // Ensures that switching to home is not registed UndoManager.undoStack.length = 0; UndoManager.redoStack.length = 0; @@ -123,13 +120,14 @@ export class MobileInterface extends React.Component { */ switchToLibrary = async () => { this.switchCurrentView(this._library); - this._homeMenu = false; + runInAction(() => this._homeMenu = false); this.toggleSidebar(); } /** * Back method for navigating through items */ + @action back = () => { const header = document.getElementById("header") as HTMLElement; const doc = Cast(this._parents.pop(), Doc) as Doc; // Parent document @@ -156,6 +154,7 @@ export class MobileInterface extends React.Component { /** * Return 'Home", which implies returning to 'Home' menu buttons */ + @action returnHome = () => { if (!this._homeMenu || this._sidebarActive) { this._homeMenu = true; @@ -171,6 +170,7 @@ export class MobileInterface extends React.Component { /** * Return to primary Workspace in library (Workspaces Doc) */ + @action returnMain = () => { this._parents = [this._homeDoc]; this.switchCurrentView(this._library); @@ -179,9 +179,16 @@ export class MobileInterface extends React.Component { } /** - * DocumentView for graphic display of all documents + * Note: window.innerWidth and window.screen.width compute different values. + * window.screen.width is the display size, however window.innerWidth is the + * display resolution which computes differently. */ + returnWidth = () => window.innerWidth; //The windows width + returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar) whitebackground = () => "white"; + /** + * DocumentView for graphic display of all documents + */ @computed get displayWorkspaces() { return !this.mainContainer ? (null) : <div style={{ position: "relative", top: '198px', height: `calc(100% - 350px)`, width: "100%", left: "0%" }}> @@ -213,13 +220,6 @@ export class MobileInterface extends React.Component { /> </div>; } - /** - * Note: window.innerWidth and window.screen.width compute different values. - * window.screen.width is the display size, however window.innerWidth is the - * display resolution which computes differently. - */ - returnWidth = () => window.innerWidth; //The windows width - returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar) /** * Handles the click functionality in the library panel. @@ -227,18 +227,20 @@ export class MobileInterface extends React.Component { * @param doc: doc for which the method is called */ handleClick = async (doc: Doc) => { - if (doc.type !== "collection" && this._sidebarActive) { - this._parents.push(this._activeDoc); - this.switchCurrentView(doc); - this._homeMenu = false; - this.toggleSidebar(); - } - else { - this._parents.push(this._activeDoc); - this.switchCurrentView(doc); - this._homeMenu = false; - this._child = doc; - } + runInAction(() => { + if (doc.type !== "collection" && this._sidebarActive) { + this._parents.push(this._activeDoc); + this.switchCurrentView(doc); + this._homeMenu = false; + this.toggleSidebar(); + } + else { + this._parents.push(this._activeDoc); + this.switchCurrentView(doc); + this._homeMenu = false; + this._child = doc; + } + }); } /** @@ -246,6 +248,7 @@ export class MobileInterface extends React.Component { * be opened (open icon on RHS of all menu items) * @param doc doc to be opened */ + @action openFromSidebar = (doc: Doc) => { this._parents.push(this._activeDoc); this.switchCurrentView(doc); @@ -254,77 +257,31 @@ export class MobileInterface extends React.Component { this.toggleSidebar(); } - /** - * Handles creation of array which is then rendered in renderPathbar() - */ - createPathname = () => { - return [...this._parents, this._activeDoc]; - } - // Renders the graphical pathbar renderPathbar = () => { - const docArray = this.createPathname(); - const items = docArray.map((doc: Doc, index: any) => { - if (index === 0) { - return this._homeMenu ? - <div className="pathbarItem" key={index}> - <div className="pathbarText" - style={{ backgroundColor: "rgb(119, 37, 37)" }} - key={index} - onClick={() => this.handlePathClick(doc, index)}>{doc.title} - </div> - </div> - : - <div className="pathbarItem" key={index}> - <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} + const docPath = [...this._parents, this._activeDoc]; + const items = docPath.map((doc: Doc, index: any) => + <div className="pathbarItem" key={index}> + {index === 0 ? (null) : <FontAwesomeIcon key="icon" className="pathIcon" icon="angle-right" size="lg" />} + <div className="pathbarText" + style={{ backgroundColor: this._homeMenu || doc === this._activeDoc ? "rgb(119,17,37)" : undefined }} + onClick={() => this.handlePathClick(doc, index)}>{doc.title} </div> + </div>); + return (<div className="pathbar"> + <div className="scrollmenu"> + {items} + </div> + {!this._parents.length ? (null) : <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>); - } + </div>} + <div className="hidePath" /> + </div>); } // Handles when user clicks on a document in the pathbar + @action handlePathClick = (doc: Doc, index: number) => { if (doc === this._library) { this._child = null; @@ -608,6 +565,7 @@ export class MobileInterface extends React.Component { } // For setting up the presentation document for the home menu + @action setupDefaultPresentation = () => { const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; @@ -662,6 +620,7 @@ export class MobileInterface extends React.Component { * Switch view from mobile menu to access the mobile uploads * Global function name: openMobileUploads() */ + @action switchToMobileUploads = () => { const mobileUpload = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; this.switchCurrentView(mobileUpload); |