diff options
Diffstat (limited to 'src/mobile')
| -rw-r--r-- | src/mobile/ImageUpload.tsx | 100 | ||||
| -rw-r--r-- | src/mobile/MobileInkOverlay.tsx | 6 | ||||
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 12 | ||||
| -rw-r--r-- | src/mobile/MobileMain.tsx | 2 |
4 files changed, 59 insertions, 61 deletions
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index da01e099c..7a1e35636 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -1,9 +1,11 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import * as rp from 'request-promise'; -import { Utils } from '../Utils'; +import { ClientUtils } from '../ClientUtils'; import { DocServer } from '../client/DocServer'; import { Networking } from '../client/Network'; import { Docs } from '../client/documents/Documents'; @@ -13,8 +15,9 @@ import { List } from '../fields/List'; import { listSpec } from '../fields/Schema'; import { Cast } from '../fields/Types'; import './ImageUpload.scss'; -import { MobileInterface } from './MobileInterface'; + const { DFLT_IMAGE_NATIVE_DIM } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore + export interface ImageUploadProps { Document: Doc; // Target document for upload (upload location) } @@ -24,28 +27,30 @@ const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', '')); @observer export class Uploader extends React.Component<ImageUploadProps> { - @observable error: string = ''; @observable nm: string = 'Choose files'; // Text of 'Choose Files' button @observable process: string = ''; // Current status of upload + @observable private dialogueBoxOpacity = 1; onClick = async () => { try { + // eslint-disable-next-line react/destructuring-assignment const col = this.props.Document; await Docs.Prototypes.initialize(); const imgPrev = document.getElementById('img_preview'); this.setOpacity(1, '1'); // Slab 1 - if (imgPrev) { - const files: FileList | null = inputRef.current!.files; + if (imgPrev && inputRef.current) { + const { files } = inputRef.current; this.setOpacity(2, '1'); // Slab 2 if (files && files.length !== 0) { this.process = 'Uploading Files'; for (let index = 0; index < files.length; ++index) { const file = files[index]; + // eslint-disable-next-line no-await-in-loop const res = await Networking.UploadFilesToServer({ file }); this.setOpacity(3, '1'); // Slab 3 // For each item that the user has selected res.map(async ({ result }) => { - const name = file.name; + const { name } = file; if (result instanceof Error) { return; } @@ -62,17 +67,17 @@ export class Uploader extends React.Component<ImageUploadProps> { doc = Docs.Create.ImageDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name }); } this.setOpacity(4, '1'); // Slab 4 - const res = await rp.get(Utils.prepend('/getUserDocumentIds')); - if (!res) { + const docidsRes = await rp.get(ClientUtils.prepend('/getUserDocumentIds')); + if (!docidsRes) { throw new Error('No user id returned'); } - const field = await DocServer.GetRefField(JSON.parse(res).userDocumentId); + const field = await DocServer.GetRefField(JSON.parse(docidsRes).userDocumentId); let pending: Opt<Doc>; if (field instanceof Doc) { pending = col; } if (pending) { - const data = await Cast(pending.data, listSpec(Doc)); + const data = Cast(pending.data, listSpec(Doc)); if (data) data.push(doc); else pending.data = new List([doc]); this.setOpacity(5, '1'); // Slab 5 @@ -93,22 +98,49 @@ export class Uploader extends React.Component<ImageUploadProps> { setTimeout(this.clearUpload, 3000); } } catch (error) { - this.error = JSON.stringify(error); + console.log(JSON.stringify(error)); } }; + // Returns the upload interface for mobile + private get uploadInterface() { + return ( + <div className="imgupload_cont"> + <div className="closeUpload" onClick={() => this.closeUpload()}> + <FontAwesomeIcon icon="window-close" size="lg" /> + </div> + <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: '130' }} /> + <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple /> + <label className="file" id="label" htmlFor="input_image_file"> + {this.nm} + </label> + <div className="upload_label" onClick={this.onClick}> + Upload + </div> + <img id="img_preview" src="" alt="" /> + <div className="loadingImage"> + <div className="loadingSlab" id="slab1" /> + <div className="loadingSlab" id="slab2" /> + <div className="loadingSlab" id="slab3" /> + <div className="loadingSlab" id="slab4" /> + <div className="loadingSlab" id="slab5" /> + <div className="loadingSlab" id="slab6" /> + <div className="loadingSlab" id="slab7" /> + </div> + <p className="status">{this.process}</p> + </div> + ); + } + // Updates label after a files is selected (so user knows a file is uploaded) inputLabel = async () => { - const files: FileList | null = inputRef.current!.files; - await files; + const files: FileList | null = await inputRef.current!.files; if (files && files.length === 1) { this.nm = files[0].name; } else if (files && files.length > 1) { this.nm = files.length.toString() + ' files selected'; } - }; - - // Loops through load icons, and resets buttons + }; // Loops through load icons, and resets buttons @action clearUpload = () => { for (let i = 1; i < 8; i++) { @@ -125,7 +157,6 @@ export class Uploader extends React.Component<ImageUploadProps> { // Clears the upload and closes the upload menu closeUpload = () => { this.clearUpload(); - MobileInterface.Instance.toggleUpload(); }; // Handles the setting of the loading bar @@ -134,40 +165,7 @@ export class Uploader extends React.Component<ImageUploadProps> { if (slab) slab.style.opacity = opacity; }; - // Returns the upload interface for mobile - private get uploadInterface() { - return ( - <div className="imgupload_cont"> - <div className="closeUpload" onClick={() => this.closeUpload()}> - <FontAwesomeIcon icon="window-close" size={'lg'} /> - </div> - <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: '130' }} /> - <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== 'Choose files' ? 'active' : ''}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input> - <label className="file" id="label" htmlFor="input_image_file"> - {this.nm} - </label> - <div className="upload_label" onClick={this.onClick}> - Upload - </div> - <img id="img_preview" src=""></img> - <div className="loadingImage"> - <div className="loadingSlab" id="slab1" /> - <div className="loadingSlab" id="slab2" /> - <div className="loadingSlab" id="slab3" /> - <div className="loadingSlab" id="slab4" /> - <div className="loadingSlab" id="slab5" /> - <div className="loadingSlab" id="slab6" /> - <div className="loadingSlab" id="slab7" /> - </div> - <p className="status">{this.process}</p> - </div> - ); - } - - @observable private dialogueBoxOpacity = 1; - @observable private overlayOpacity = 0.4; - render() { - return <MainViewModal contents={this.uploadInterface} isDisplayed={true} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />; + return <MainViewModal contents={this.uploadInterface} isDisplayed interactive dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} closeOnExternalClick={this.closeUpload} />; } } diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx index 23e19585a..6babd2f39 100644 --- a/src/mobile/MobileInkOverlay.tsx +++ b/src/mobile/MobileInkOverlay.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { DocServer } from '../client/DocServer'; import { DragManager } from '../client/util/DragManager'; import { Doc } from '../fields/Doc'; -import { GestureUtils } from '../pen-gestures/GestureUtils'; +import { Gestures } from '../pen-gestures/GestureTypes'; import { GestureContent, MobileDocumentUploadContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from '../server/Message'; import './MobileInkOverlay.scss'; @@ -76,11 +76,11 @@ export default class MobileInkOverlay extends React.Component { const target = document.elementFromPoint(this._x + 10, this._y + 10); target?.dispatchEvent( - new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', { + new CustomEvent<GestureEvent>('dashOnGesture', { bubbles: true, detail: { points: points, - gesture: GestureUtils.Gestures.Stroke, + gesture: Gestures.Stroke, bounds: B, }, }) diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 818e2b953..d8ba89fdb 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -93,7 +93,6 @@ import { faTrash, faTrashAlt, faTree, - faRoute, faTv, faUndoAlt, faVideo, @@ -105,7 +104,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../Utils'; +import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../ClientUtils'; import { CollectionViewType, DocumentType } from '../client/documents/DocumentTypes'; import { Docs, DocumentOptions } from '../client/documents/Documents'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; @@ -113,8 +112,8 @@ import { ScriptingGlobals } from '../client/util/ScriptingGlobals'; import { SettingsManager } from '../client/util/SettingsManager'; import { Transform } from '../client/util/Transform'; import { UndoManager } from '../client/util/UndoManager'; +import { DashboardView } from '../client/views/DashboardView'; import { GestureOverlay } from '../client/views/GestureOverlay'; -import { TabDocView } from '../client/views/collections/TabDocView'; import { AudioBox } from '../client/views/nodes/AudioBox'; import { DocumentView } from '../client/views/nodes/DocumentView'; import { RadialMenu } from '../client/views/nodes/RadialMenu'; @@ -128,6 +127,7 @@ import './AudioUpload.scss'; import { Uploader } from './ImageUpload'; import './ImageUpload.scss'; import './MobileInterface.scss'; +import { emptyFunction } from '../Utils'; library.add( ...[ @@ -585,7 +585,7 @@ export class MobileInterface extends React.Component { }; const freeformDoc = Doc.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); - const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, 'row'); + const dashboardDoc = DashboardView.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, 'row'); const toggleComic = ScriptField.MakeScript(`toggleComicMode()`); const cloneDashboard = ScriptField.MakeScript(`cloneDashboard()`); @@ -692,7 +692,7 @@ export class MobileInterface extends React.Component { // Only making button available if it is an image if (!(this._activeDoc.type === 'collection' || this._activeDoc.type === 'presentation')) { return ( - <div className="docButton" title={'Pin to presentation'} style={{ backgroundColor: 'white', color: 'black' }} onClick={e => TabDocView.PinDoc(this._activeDoc, {})}> + <div className="docButton" title={'Pin to presentation'} style={{ backgroundColor: 'white', color: 'black' }} onClick={e => DocumentView.PinDoc(this._activeDoc, {})}> <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" /> </div> ); @@ -859,7 +859,7 @@ ScriptingGlobals.add(function switchToMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }, 'opens the presentation on Dash Mobile'); ScriptingGlobals.add(function openMobileSettings() { - return SettingsManager.Instance.open(); + return SettingsManager.Instance.openMgr(); }, 'opens settings on Dash Mobile'); // Other global functions for mobile diff --git a/src/mobile/MobileMain.tsx b/src/mobile/MobileMain.tsx index dc3a73def..07839b6f6 100644 --- a/src/mobile/MobileMain.tsx +++ b/src/mobile/MobileMain.tsx @@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom'; import { DocServer } from '../client/DocServer'; import { Docs } from '../client/documents/Documents'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; -import { AssignAllExtensions } from '../extensions/General/Extensions'; +import { AssignAllExtensions } from '../extensions/Extensions'; import { MobileInterface } from './MobileInterface'; AssignAllExtensions(); |