diff options
Diffstat (limited to 'src/mobile/MobileInterface.tsx')
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 602 |
1 files changed, 400 insertions, 202 deletions
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index bf06faeb9..e1360553a 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,52 +1,236 @@ - import { library } from '@fortawesome/fontawesome-svg-core'; import { - 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, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, - faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, - faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, - faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faBook, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft, - faAlignRight, faAlignLeft + 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, + faFile as fileSolid, + faExternalLinkAlt, + faLocationArrow, + faSearch, + faFileDownload, + faStop, + faCalculator, + faWindowMaximize, + faAddressCard, + faQuestionCircle, + faArrowLeft, + faArrowRight, + faArrowDown, + faArrowUp, + faBolt, + faBullseye, + faCaretUp, + faCat, + faCheck, + faChevronRight, + faClipboard, + faClone, + faCloudUploadAlt, + faCommentAlt, + faCompressArrowsAlt, + faCut, + faEllipsisV, + faEraser, + faExclamation, + faFileAlt, + faFileAudio, + faFilePdf, + faFilm, + faFilter, + faFont, + faGlobeAsia, + faHighlighter, + faLongArrowAltRight, + faMicrophone, + faMousePointer, + faMusic, + faObjectGroup, + faPause, + faPen, + faPenNib, + faPhone, + faPlay, + faPortrait, + faRedoAlt, + faStamp, + faStickyNote, + faThumbtack, + faTree, + faTv, + faBook, + faUndoAlt, + faVideo, + faAsterisk, + faBrain, + faImage, + faPaintBrush, + faTimes, + faEye, + faHome, + faLongArrowAltLeft, + faBars, + faTh, + faChevronLeft, + faAlignRight, + faAlignLeft, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; -import * as React from "react"; +import * as React from 'react'; import { Docs, DocumentOptions, DocUtils } from '../client/documents/Documents'; -import { DocumentType } from "../client/documents/DocumentTypes"; +import { DocumentType } from '../client/documents/DocumentTypes'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; import { SettingsManager, ColorScheme } from '../client/util/SettingsManager'; import { Transform } from '../client/util/Transform'; -import { UndoManager } from "../client/util/UndoManager"; +import { UndoManager } from '../client/util/UndoManager'; import { TabDocView } from '../client/views/collections/TabDocView'; -import { CollectionViewType } from "../client/views/collections/CollectionView"; -import { GestureOverlay } from "../client/views/GestureOverlay"; -import { AudioBox } from "../client/views/nodes/AudioBox"; +import { CollectionViewType } from '../client/views/collections/CollectionView'; +import { GestureOverlay } from '../client/views/GestureOverlay'; +import { AudioBox } from '../client/views/nodes/AudioBox'; import { DocumentView } from '../client/views/nodes/DocumentView'; -import { RichTextMenu } from "../client/views/nodes/formattedText/RichTextMenu"; -import { RadialMenu } from "../client/views/nodes/RadialMenu"; +import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu'; +import { RadialMenu } from '../client/views/nodes/RadialMenu'; import { Doc, DocListCast } from '../fields/Doc'; import { InkTool } from '../fields/InkField'; -import { List } from "../fields/List"; -import { ScriptField } from "../fields/ScriptField"; -import { Cast, FieldValue } from '../fields/Types'; +import { List } from '../fields/List'; +import { ScriptField } from '../fields/ScriptField'; +import { Cast, FieldValue, StrCast } from '../fields/Types'; import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero } from '../Utils'; -import { AudioUpload } from "./AudioUpload"; -import { Uploader } from "./ImageUpload"; -import "./AudioUpload.scss"; -import "./ImageUpload.scss"; -import "./MobileInterface.scss"; - -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, - faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, - faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, - 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, - faAlignLeft, faAlignRight].map(m => m as any)); - +import { AudioUpload } from './AudioUpload'; +import { Uploader } from './ImageUpload'; +import './AudioUpload.scss'; +import './ImageUpload.scss'; +import './MobileInterface.scss'; + +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, + faQuestionCircle, + faArrowLeft, + faArrowRight, + faArrowDown, + faArrowUp, + faBolt, + faBullseye, + faCaretUp, + faCat, + faCheck, + faChevronRight, + faClipboard, + faClone, + faCloudUploadAlt, + faCommentAlt, + faCompressArrowsAlt, + faCut, + faEllipsisV, + faEraser, + faExclamation, + faFileAlt, + faFileAudio, + faFilePdf, + faFilm, + faFilter, + faFont, + faGlobeAsia, + faHighlighter, + 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, + faAlignLeft, + faAlignRight, + ].map(m => m as any) +); @observer export class MobileInterface extends React.Component { @@ -64,36 +248,38 @@ export class MobileInterface extends React.Component { @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; } + @computed private get mainContainer() { + return Doc.UserDoc() ? FieldValue(Cast(Doc.UserDoc().activeMobile, Doc)) : CurrentUserUtils.GuestMobile; + } constructor(props: Readonly<{}>) { super(props); - this._library = CurrentUserUtils.setupDashboards(Doc.UserDoc(), "myDashboards"); // to access documents in Dash Web + this._library = CurrentUserUtils.setupDashboards(Doc.UserDoc(), 'myDashboards'); // to access documents in Dash Web MobileInterface.Instance = this; } @action componentDidMount = () => { // if the home menu is in list view -> adjust the menu toggle appropriately - this._menuListView = this._homeDoc._viewType === "stacking" ? true : false; + this._menuListView = this._homeDoc._viewType === 'stacking' ? true : false; CurrentUserUtils.ActiveTool = InkTool.None; // ink should intially be set to none Doc.UserDoc().activeMobile = this._homeDoc; // active mobile set to home AudioBox.Enabled = true; // remove double click to avoid mobile zoom in - document.removeEventListener("dblclick", this.onReactDoubleClick); - document.addEventListener("dblclick", this.onReactDoubleClick); - } + document.removeEventListener('dblclick', this.onReactDoubleClick); + document.addEventListener('dblclick', this.onReactDoubleClick); + }; @action componentWillUnmount = () => { document.removeEventListener('dblclick', this.onReactDoubleClick); - } + }; // Prevent zooming in when double tapping the screen onReactDoubleClick = (e: MouseEvent) => { e.stopPropagation(); - } + }; // Switch the mobile view to the given doc @action @@ -110,7 +296,7 @@ export class MobileInterface extends React.Component { // Ensures that switching to home is not registed UndoManager.undoStack.length = 0; UndoManager.redoStack.length = 0; - } + }; // For toggling the hamburger menu @action @@ -120,29 +306,29 @@ export class MobileInterface extends React.Component { if (this._ink) { this.onSwitchInking(); } - } + }; /** * Method called when 'Library' button is pressed on the home screen */ switchToLibrary = async () => { this.switchCurrentView(this._library); - runInAction(() => 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 header = document.getElementById('header') as HTMLElement; const doc = Cast(this._parents.pop(), Doc) as Doc; // Parent document // Case 1: Parent document is 'dashboards' - if (doc === Cast(this._library, Doc) as Doc) { + if (doc === (Cast(this._library, Doc) as Doc)) { this.dashboards = null; this.switchCurrentView(this._library); // Case 2: Parent document is the 'home' menu (root node) - } else if (doc === Cast(this._homeDoc, Doc) as Doc) { + } else if (doc === (Cast(this._homeDoc, Doc) as Doc)) { this._homeMenu = true; this._parents = []; this.dashboards = null; @@ -155,7 +341,7 @@ export class MobileInterface extends React.Component { header.textContent = String(doc.title); } this._ink = false; // turns ink off - } + }; /** * Return 'Home", which implies returning to 'Home' menu buttons @@ -171,7 +357,7 @@ export class MobileInterface extends React.Component { if (this._sidebarActive) { this.toggleSidebar(); } - } + }; /** * Return to primary Dashboard in library (Dashboards Doc) @@ -182,7 +368,7 @@ export class MobileInterface extends React.Component { this.switchCurrentView(this._library); this._homeMenu = false; this.dashboards = null; - } + }; /** * Note: window.innerWidth and window.screen.width compute different values. @@ -190,14 +376,14 @@ export class MobileInterface extends React.Component { * 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"; + returnHeight = () => window.innerHeight - 300; //Calculating the windows height (-300 to account for topbar) + whitebackground = () => 'white'; /** * DocumentView for graphic display of all documents */ @computed get displayDashboards() { - return !this.mainContainer ? (null) : - <div style={{ position: "relative", top: '198px', height: `calc(100% - 350px)`, width: "100%", left: "0%" }}> + return !this.mainContainer ? null : ( + <div style={{ position: 'relative', top: '198px', height: `calc(100% - 350px)`, width: '100%', left: '0%' }}> <DocumentView Document={this.mainContainer} DataDoc={undefined} @@ -223,7 +409,8 @@ export class MobileInterface extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} /> - </div>; + </div> + ); } /** @@ -233,20 +420,19 @@ export class MobileInterface extends React.Component { */ handleClick = async (doc: Doc) => { runInAction(() => { - if (doc.type !== "collection" && this._sidebarActive) { + if (doc.type !== 'collection' && this._sidebarActive) { this._parents.push(this._activeDoc); this.switchCurrentView(doc); this._homeMenu = false; this.toggleSidebar(); - } - else { + } else { this._parents.push(this._activeDoc); this.switchCurrentView(doc); this._homeMenu = false; this.dashboards = doc; } }); - } + }; /** * Called when an item in the library is clicked and should @@ -260,30 +446,31 @@ export class MobileInterface extends React.Component { this._homeMenu = false; this.dashboards = doc; this.toggleSidebar(); - } + }; // Renders the graphical pathbar renderPathbar = () => { const docPath = [...this._parents, this._activeDoc]; - const items = docPath.map((doc: Doc, index: any) => + 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} + {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)}> + {StrCast(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>); - } + )); + 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> + ); + }; // Handles when user clicks on a document in the pathbar @action @@ -300,7 +487,7 @@ export class MobileInterface extends React.Component { this.switchCurrentView(doc); this._parents.length = index; } - } + }; // Renders the contents of the menu and sidebar @computed get renderDefaultContent() { @@ -309,7 +496,9 @@ export class MobileInterface extends React.Component { <div> <div className="navbar"> <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> - <div className="header" id="header">{this._homeDoc.title}</div> + <div className="header" id="header"> + {StrCast(this._homeDoc.title)} + </div> <div className="cover" id="cover" onClick={e => e.stopPropagation()}></div> <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}> <span></span> @@ -328,14 +517,17 @@ export class MobileInterface extends React.Component { } // returns a list of navbar buttons as 'buttons' const buttons = DocListCast(dashboards.data).map((doc: Doc, index: any) => { - if (doc.type !== "ink") { + if (doc.type !== 'ink') { return ( - <div - className="item" - key={index}> - <div className="item-title" onClick={() => this.handleClick(doc)}> {doc.title} </div> - <div className="item-type" onClick={() => this.handleClick(doc)}>{doc.type}</div> - <FontAwesomeIcon onClick={() => this.handleClick(doc)} className="right" icon="angle-right" size="lg" style={{ display: `${doc.type === "collection" ? "block" : "none"}` }} /> + <div className="item" key={index}> + <div className="item-title" onClick={() => this.handleClick(doc)}> + {' '} + {doc.title as string}{' '} + </div> + <div className="item-type" onClick={() => this.handleClick(doc)}> + {doc.type as string} + </div> + <FontAwesomeIcon onClick={() => this.handleClick(doc)} className="right" icon="angle-right" size="lg" style={{ display: `${doc.type === 'collection' ? 'block' : 'none'}` }} /> <FontAwesomeIcon className="open" onClick={() => this.openFromSidebar(doc)} icon="external-link-alt" size="lg" /> </div> ); @@ -346,43 +538,39 @@ export class MobileInterface extends React.Component { <div> <div className="navbar"> <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> - <div className="header" id="header">{this._sidebarActive ? "library" : this._activeDoc.title}</div> - <div className={`toggle-btn ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}> + <div className="header" id="header"> + {this._sidebarActive ? 'library' : (this._activeDoc.title as string)} + </div> + <div className={`toggle-btn ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}> <span></span> <span></span> <span></span> </div> - <div className={`background ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}></div> + <div className={`background ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}></div> </div> {this.renderPathbar()} - <div className={`sidebar ${this._sidebarActive ? "active" : ""}`}> + <div className={`sidebar ${this._sidebarActive ? 'active' : ''}`}> <div className="sidebarButtons"> - {this.dashboards ? + {this.dashboards ? ( <> {buttons} - <div - className="item" key="home" - onClick={this.returnMain} - style={{ opacity: 0.7 }}> + <div className="item" key="home" onClick={this.returnMain} style={{ opacity: 0.7 }}> <FontAwesomeIcon className="right" icon="angle-double-left" size="lg" /> <div className="item-type">Return to dashboards</div> </div> - </> : + </> + ) : ( <> {buttons} - <div - className="item" - style={{ opacity: 0.7 }} - onClick={() => this.createNewDashboard()}> + <div className="item" style={{ opacity: 0.7 }} onClick={() => this.createNewDashboard()}> <FontAwesomeIcon className="right" icon="plus" size="lg" /> <div className="item-type">Create New Dashboard</div> </div> </> - } + )} </div> </div> - <div className={`blanket ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}> - </div> + <div className={`blanket ${this._sidebarActive ? 'active' : ''}`} onClick={this.toggleSidebar}></div> </div> ); } @@ -397,26 +585,26 @@ export class MobileInterface extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - title: "Collection " + dashboardCount, + title: 'Collection ' + dashboardCount, }; const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); - const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, "row"); + const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, 'row'); const toggleTheme = ScriptField.MakeScript(`self.colorScheme = self.colorScheme ? undefined: ${ColorScheme.Dark}}`); const toggleComic = ScriptField.MakeScript(`toggleComicMode()`); const cloneDashboard = ScriptField.MakeScript(`cloneDashboard()`); dashboardDoc.contextMenuScripts = new List<ScriptField>([toggleTheme!, toggleComic!, cloneDashboard!]); - dashboardDoc.contextMenuLabels = new List<string>(["Toggle Theme Colors", "Toggle Comic Mode", "New Dashboard Layout"]); + dashboardDoc.contextMenuLabels = new List<string>(['Toggle Theme Colors', 'Toggle Comic Mode', 'New Dashboard Layout']); - Doc.AddDocToList(scens, "data", dashboardDoc); - } + Doc.AddDocToList(scens, 'data', dashboardDoc); + }; // Button for switching between pen and ink mode @action onSwitchInking = () => { - const button = document.getElementById("inkButton") as HTMLElement; - button.style.backgroundColor = this._ink ? "white" : "black"; - button.style.color = this._ink ? "black" : "white"; + const button = document.getElementById('inkButton') as HTMLElement; + button.style.backgroundColor = this._ink ? 'white' : 'black'; + button.style.color = this._ink ? 'black' : 'white'; if (!this._ink) { CurrentUserUtils.ActiveTool = InkTool.Pen; @@ -425,23 +613,20 @@ export class MobileInterface extends React.Component { CurrentUserUtils.ActiveTool = InkTool.None; this._ink = false; } - } + }; // The static ink menu that appears at the top @computed get inkMenu() { - return this._activeDoc._viewType !== CollectionViewType.Docking || !this._ink ? (null) : - <div className="colorSelector"> - {/* <CollectionFreeFormViewChrome /> */} - </div>; + return this._activeDoc._viewType !== CollectionViewType.Docking || !this._ink ? null : <div className="colorSelector">{/* <CollectionFreeFormViewChrome /> */}</div>; } // DocButton that uses UndoManager and handles the opacity change if CanUndo is true @computed get undo() { - if (this.mainContainer && this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && - this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== "WORKSPACES") { + if (this.mainContainer && this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== 'WORKSPACES') { return ( - <div className="docButton" - style={{ backgroundColor: "black", color: "white", fontSize: "60", opacity: UndoManager.CanUndo() ? "1" : "0.4", }} + <div + className="docButton" + style={{ backgroundColor: 'black', color: 'white', fontSize: '60', opacity: UndoManager.CanUndo() ? '1' : '0.4' }} id="undoButton" title="undo" onClick={(e: React.MouseEvent) => { @@ -449,17 +634,18 @@ export class MobileInterface extends React.Component { e.stopPropagation(); }}> <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="undo-alt" /> - </div>); - } else return (null); + </div> + ); + } else return null; } // DocButton that uses UndoManager and handles the opacity change if CanRedo is true @computed get redo() { - if (this.mainContainer && this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && - this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== "WORKSPACES") { + if (this.mainContainer && this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc !== Doc.SharingDoc() && this._activeDoc.title !== 'WORKSPACES') { return ( - <div className="docButton" - style={{ backgroundColor: "black", color: "white", fontSize: "60", opacity: UndoManager.CanRedo() ? "1" : "0.4", }} + <div + className="docButton" + style={{ backgroundColor: 'black', color: 'white', fontSize: '60', opacity: UndoManager.CanRedo() ? '1' : '0.4' }} id="undoButton" title="redo" onClick={(e: React.MouseEvent) => { @@ -467,78 +653,81 @@ export class MobileInterface extends React.Component { e.stopPropagation(); }}> <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="redo-alt" /> - </div>); - } else return (null); + </div> + ); + } else return null; } // DocButton for switching into ink mode @computed get drawInk() { - return !this.mainContainer || this._activeDoc._viewType !== CollectionViewType.Docking ? (null) : - <div className="docButton" - id="inkButton" - title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"} - onClick={this.onSwitchInking}> + return !this.mainContainer || this._activeDoc._viewType !== CollectionViewType.Docking ? null : ( + <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> + ); } // DocButton: Button that appears on the bottom of the screen to initiate image upload @computed get uploadImageButton() { - if (this._activeDoc.type === DocumentType.COL && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== CollectionViewType.Docking && this._activeDoc.title !== "WORKSPACES") { - return <div className="docButton" - id="imageButton" - title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"} - onClick={this.toggleUpload}> - <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" /> - </div>; - } else return (null); + if (this._activeDoc.type === DocumentType.COL && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== CollectionViewType.Docking && this._activeDoc.title !== 'WORKSPACES') { + return ( + <div className="docButton" id="imageButton" title={Doc.isDocPinned(this._activeDoc) ? 'Pen on' : 'Pen off'} onClick={this.toggleUpload}> + <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" /> + </div> + ); + } else return null; } // DocButton to download images on the mobile @computed get downloadDocument() { - if (this._activeDoc.type === "image" || this._activeDoc.type === "pdf" || this._activeDoc.type === "video") { - return <div className="docButton" - title={"Download Image"} - style={{ backgroundColor: "white", color: "black" }} - onClick={e => window.open(this._activeDoc["data-path"]?.toString())}> {/* daa-path holds the url */} - <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download" /> - </div>; - } else return (null); + if (this._activeDoc.type === 'image' || this._activeDoc.type === 'pdf' || this._activeDoc.type === 'video') { + return ( + <div className="docButton" title={'Download Image'} style={{ backgroundColor: 'white', color: 'black' }} onClick={e => window.open(this._activeDoc['data-path']?.toString())}> + {' '} + {/* daa-path holds the url */} + <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download" /> + </div> + ); + } else return null; } // DocButton for pinning images to presentation @computed get pinToPresentation() { // Only making button available if it is an image - if (!(this._activeDoc.type === "collection" || this._activeDoc.type === "presentation")) { + if (!(this._activeDoc.type === 'collection' || this._activeDoc.type === 'presentation')) { 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 => TabDocView.PinDoc(this._activeDoc)}> - <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" /> - </div>; - } else return (null); + 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 => TabDocView.PinDoc(this._activeDoc)}> + <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" /> + </div> + ); + } else return null; } // Buttons for switching the menu between large and small icons @computed get switchMenuView() { - return this._activeDoc.title !== this._homeDoc.title ? (null) : + return this._activeDoc.title !== this._homeDoc.title ? null : ( <div className="homeSwitch"> - <div className={`list ${!this._menuListView ? "active" : ""}`} onClick={this.changeToIconView}> + <div className={`list ${!this._menuListView ? 'active' : ''}`} onClick={this.changeToIconView}> <FontAwesomeIcon size="sm" icon="th-large" /> </div> - <div className={`list ${this._menuListView ? "active" : ""}`} onClick={this.changeToListView}> + <div className={`list ${this._menuListView ? 'active' : ''}`} onClick={this.changeToListView}> <FontAwesomeIcon size="sm" icon="bars" /> </div> - </div>; + </div> + ); } // Logic for switching the menu into the icons @action changeToIconView = () => { - if (this._homeDoc._viewType = "stacking") { + if ((this._homeDoc._viewType = 'stacking')) { this._menuListView = false; - this._homeDoc._viewType = "masonry"; + this._homeDoc._viewType = 'masonry'; this._homeDoc.columnWidth = 300; this._homeDoc._columnWidth = 300; const menuButtons = DocListCast(this._homeDoc.data); @@ -551,13 +740,13 @@ export class MobileInterface extends React.Component { doc._nativeWidth = 400; }); } - } + }; // Logic for switching the menu into the stacking view @action changeToListView = () => { - if (this._homeDoc._viewType = "masonry") { - this._homeDoc._viewType = "stacking"; + if ((this._homeDoc._viewType = 'masonry')) { + this._homeDoc._viewType = 'stacking'; this._menuListView = true; const menuButtons = DocListCast(this._homeDoc.data); menuButtons.map(doc => { @@ -568,7 +757,7 @@ export class MobileInterface extends React.Component { doc._nativeWidth = 900; }); } - } + }; // For setting up the presentation document for the home menu @action @@ -579,49 +768,48 @@ export class MobileInterface extends React.Component { this.switchCurrentView(presentation); this._homeMenu = false; } - } + }; // For toggling image upload pop up @action - toggleUpload = () => this._imageUploadActive = !this._imageUploadActive + toggleUpload = () => (this._imageUploadActive = !this._imageUploadActive); // For toggling audio record and dictate pop up @action - toggleAudio = () => this._audioUploadActive = !this._audioUploadActive + toggleAudio = () => (this._audioUploadActive = !this._audioUploadActive); // Button for toggling the upload pop up in a collection @action toggleUploadInCollection = () => { - const button = document.getElementById("imageButton") as HTMLElement; - button.style.backgroundColor = this._imageUploadActive ? "white" : "black"; - button.style.color = this._imageUploadActive ? "black" : "white"; + const button = document.getElementById('imageButton') as HTMLElement; + button.style.backgroundColor = this._imageUploadActive ? 'white' : 'black'; + button.style.color = this._imageUploadActive ? 'black' : 'white'; this._imageUploadActive = !this._imageUploadActive; - } + }; // For closing the image upload pop up @action closeUpload = () => { this._imageUploadActive = false; - } + }; // Returns the image upload pop up @computed get uploadImage() { - const doc = !this._homeMenu ? this._activeDoc : Cast(Doc.SharingDoc(), Doc) as Doc; + const doc = !this._homeMenu ? this._activeDoc : (Cast(Doc.SharingDoc(), Doc) as Doc); return <Uploader Document={doc} />; } - // Radial menu can only be used if it is a colleciton and it is not a homeDoc + // Radial menu can only be used if it is a colleciton and it is not a homeDoc // (and cannot be used on Dashboard to avoid pin to presentation opening on right) @computed get displayRadialMenu() { - return this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && - this._activeDoc._viewType !== CollectionViewType.Docking ? <RadialMenu /> : (null); + return this._activeDoc.type === 'collection' && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== CollectionViewType.Docking ? <RadialMenu /> : null; } onDragOver = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); - } + }; /** * MENU BUTTON @@ -633,22 +821,22 @@ export class MobileInterface extends React.Component { const mobileUpload = Cast(Doc.SharingDoc(), Doc) as Doc; this.switchCurrentView(mobileUpload); this._homeMenu = false; - } + }; render() { return ( <div className="mobileInterface-container" onDragOver={this.onDragOver}> <SettingsManager /> - <div className={`image-upload ${this._imageUploadActive ? "active" : ""}`}> - {this.uploadImage} - </div> - <div className={`audio-upload ${this._audioUploadActive ? "active" : ""}`}> + <div className={`image-upload ${this._imageUploadActive ? 'active' : ''}`}>{this.uploadImage}</div> + <div className={`audio-upload ${this._audioUploadActive ? 'active' : ''}`}> <AudioUpload /> </div> {this.switchMenuView} {this.inkMenu} <GestureOverlay> - <div style={{ display: "none" }}><RichTextMenu key="rich" /></div> + <div style={{ display: 'none' }}> + <RichTextMenu key="rich" /> + </div> <div className="docButtonContainer"> {this.pinToPresentation} {this.downloadDocument} @@ -666,21 +854,31 @@ export class MobileInterface extends React.Component { } } - //Global functions for mobile menu -ScriptingGlobals.add(function switchToMobileLibrary() { return MobileInterface.Instance.switchToLibrary(); }, - "opens the library to navigate through dashboards on Dash Mobile"); -ScriptingGlobals.add(function openMobileUploads() { return MobileInterface.Instance.toggleUpload(); }, - "opens the upload files menu for Dash Mobile"); -ScriptingGlobals.add(function switchToMobileUploadCollection() { return MobileInterface.Instance.switchToMobileUploads(); }, - "opens the mobile uploads collection on Dash Mobile"); -ScriptingGlobals.add(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); }, - "opens the record and dictate menu on Dash Mobile"); -ScriptingGlobals.add(function switchToMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }, - "opens the presentation on Dash Mobile"); -ScriptingGlobals.add(function openMobileSettings() { return SettingsManager.Instance.open(); }, - "opens settings on Dash Mobile"); +ScriptingGlobals.add(function switchToMobileLibrary() { + return MobileInterface.Instance.switchToLibrary(); +}, 'opens the library to navigate through dashboards on Dash Mobile'); +ScriptingGlobals.add(function openMobileUploads() { + return MobileInterface.Instance.toggleUpload(); +}, 'opens the upload files menu for Dash Mobile'); +ScriptingGlobals.add(function switchToMobileUploadCollection() { + return MobileInterface.Instance.switchToMobileUploads(); +}, 'opens the mobile uploads collection on Dash Mobile'); +ScriptingGlobals.add(function openMobileAudio() { + return MobileInterface.Instance.toggleAudio(); +}, 'opens the record and dictate menu on Dash Mobile'); +ScriptingGlobals.add(function switchToMobilePresentation() { + return MobileInterface.Instance.setupDefaultPresentation(); +}, 'opens the presentation on Dash Mobile'); +ScriptingGlobals.add(function openMobileSettings() { + return SettingsManager.Instance.open(); +}, 'opens settings on Dash Mobile'); // Other global functions for mobile -ScriptingGlobals.add(function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }, - "changes the active document displayed on the Dash Mobile", "(doc: any)");
\ No newline at end of file +ScriptingGlobals.add( + function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { + return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); + }, + 'changes the active document displayed on the Dash Mobile', + '(doc: any)' +); |