aboutsummaryrefslogtreecommitdiff
path: root/src/mobile
diff options
context:
space:
mode:
Diffstat (limited to 'src/mobile')
-rw-r--r--src/mobile/AudioUpload.scss61
-rw-r--r--src/mobile/AudioUpload.tsx162
-rw-r--r--src/mobile/ImageUpload.scss13
-rw-r--r--src/mobile/ImageUpload.tsx97
-rw-r--r--src/mobile/MobileInkOverlay.tsx2
-rw-r--r--src/mobile/MobileInterface.tsx6
6 files changed, 52 insertions, 289 deletions
diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss
deleted file mode 100644
index dce0c724f..000000000
--- a/src/mobile/AudioUpload.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@import "../client/views/global/globalCssVariables.scss";
-
-.audioUpload_cont {
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
- margin-top: 10px;
- height: 400px;
- width: 600px;
-}
-
-.upload_label {
- position: relative;
- font-weight: 700;
- color: black;
- background-color: rgba(0, 0, 0, 0);
- border: solid 3px black;
- margin: 10px;
- font-size: 30;
- height: 70px;
- width: 60%;
- display: inline-flex;
- font-family: sans-serif;
- text-transform: uppercase;
- justify-content: center;
- flex-direction: column;
- border-radius: 10px;
-}
-
-.restart_label {
- position: relative;
- font-weight: 700;
- color: black;
- background-color: rgba(0, 0, 0, 0);
- border: solid 3px black;
- margin: 10px;
- font-size: 30;
- height: 70px;
- width: 60%;
- display: inline-flex;
- font-family: sans-serif;
- text-transform: uppercase;
- justify-content: center;
- flex-direction: column;
- border-radius: 10px;
-}
-
-.audio-upload {
- top: 100%;
- opacity: 0;
-}
-
-.audio-upload.active {
- top: 0;
- position: absolute;
- z-index: 999;
- height: 100vh;
- width: 100vw;
- opacity: 1;
-} \ No newline at end of file
diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx
deleted file mode 100644
index 7a1dde9fb..000000000
--- a/src/mobile/AudioUpload.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
-import { observer } from 'mobx-react';
-import { Docs } from '../client/documents/Documents';
-import { Transform } from '../client/util/Transform';
-import { ContextMenu } from '../client/views/ContextMenu';
-import { DictationOverlay } from '../client/views/DictationOverlay';
-import { MainViewModal } from '../client/views/MainViewModal';
-import { DocumentView } from '../client/views/nodes/DocumentView';
-import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu';
-import { Doc } from '../fields/Doc';
-import { listSpec } from '../fields/Schema';
-import { Cast, FieldValue } from '../fields/Types';
-import { nullAudio } from '../fields/URLField';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, emptyPath } from '../Utils';
-import './ImageUpload.scss';
-import { MobileInterface } from './MobileInterface';
-import React = require('react');
-
-@observer
-export class AudioUpload extends React.Component {
- @observable public _audioCol: Doc = FieldValue(
- Cast(
- Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: 'mobile audio', _width: 500, _height: 100 }), Doc) as Doc], {
- title: 'mobile audio',
- _width: 300,
- _height: 300,
- _layout_fitContentsToBox: true,
- layout_boxShadow: '0 0',
- }),
- Doc
- )
- ) as Doc;
-
- /**
- * Handles the onclick functionality for the 'Restart' button
- * Resets the document to its default view
- */
- @action
- clearUpload = () => {
- for (let i = 1; i < 8; i++) {
- this.setOpacity(i, '0.2');
- }
- this._audioCol = FieldValue(
- Cast(
- Docs.Create.FreeformDocument(
- [
- Cast(
- Docs.Create.AudioDocument(nullAudio, {
- title: 'mobile audio',
- _width: 500,
- _height: 100,
- }),
- Doc
- ) as Doc,
- ],
- { title: 'mobile audio', _width: 300, _height: 300, _layout_fitContentsToBox: true, layout_boxShadow: '0 0' }
- ),
- Doc
- )
- ) as Doc;
- };
-
- /**
- * Handles the onClick of the 'Close' button
- * Reset upload interface and toggle audio
- */
- closeUpload = () => {
- this.clearUpload();
- MobileInterface.Instance.toggleAudio();
- };
-
- /**
- * Handles the on click of the 'Upload' button.
- * Pushing the audio doc onto Dash Web through the right side bar
- */
- uploadAudio = () => {
- const audioRightSidebar = Cast(Doc.SharingDoc(), Doc, null);
- const audioDoc = this._audioCol;
- const data = Cast(audioRightSidebar.data, listSpec(Doc));
- for (let i = 1; i < 8; i++) {
- setTimeout(() => this.setOpacity(i, '1'), i * 200);
- }
- if (data) {
- data.push(audioDoc);
- }
- // Resets uploader after 3 seconds
- setTimeout(this.clearUpload, 3000);
- };
-
- // Returns the upload audio menu
- private get uploadInterface() {
- return (
- <>
- <ContextMenu />
- <DictationOverlay />
- <div style={{ display: 'none' }}>
- <RichTextMenu key="rich" />
- </div>
- <div className="closeUpload" onClick={() => this.closeUpload()}>
- <FontAwesomeIcon icon="window-close" size={'lg'} />
- </div>
- <FontAwesomeIcon icon="microphone" size="lg" style={{ fontSize: '130' }} />
- <div className="audioUpload_cont">
- <DocumentView
- Document={this._audioCol}
- DataDoc={undefined}
- addDocument={undefined}
- addDocTab={returnFalse}
- pinToPres={emptyFunction}
- rootSelected={returnTrue}
- removeDocument={undefined}
- childFilters={returnEmptyFilter}
- childFiltersByRanges={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- ScreenToLocalTransform={Transform.Identity}
- PanelWidth={() => 600}
- PanelHeight={() => 400}
- renderDepth={0}
- isDocumentActive={returnTrue}
- isContentActive={emptyFunction}
- focus={emptyFunction}
- styleProvider={() => 'rgba(0,0,0,0)'}
- docViewPath={returnEmptyDoclist}
- whenChildContentsActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- />
- </div>
- <div className="restart_label" onClick={this.clearUpload}>
- Restart
- </div>
- <div className="upload_label" onClick={this.uploadAudio}>
- Upload
- </div>
- <div className="loadingImage">
- <div className="loadingSlab" id="slab01" />
- <div className="loadingSlab" id="slab02" />
- <div className="loadingSlab" id="slab03" />
- <div className="loadingSlab" id="slab04" />
- <div className="loadingSlab" id="slab05" />
- <div className="loadingSlab" id="slab06" />
- <div className="loadingSlab" id="slab07" />
- </div>
- </>
- );
- }
-
- // Handles the setting of the loading bar
- setOpacity = (index: number, opacity: string) => {
- const slab = document.getElementById('slab0' + index);
- if (slab) {
- slab.style.opacity = opacity;
- }
- };
-
- @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} />;
- }
-}
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 6669a3d21..e4156ee8e 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -1,4 +1,4 @@
-@import "../client/views/global/globalCssVariables.scss";
+@import '../client/views/global/globalCssVariables.module.scss';
.imgupload_cont {
display: flex;
@@ -50,7 +50,7 @@
z-index: -1;
}
- .inputfile+label {
+ .inputfile + label {
font-weight: 700;
color: black;
background-color: rgba(0, 0, 0, 0);
@@ -71,7 +71,7 @@
border-radius: 10px;
}
- .inputfile.active+label {
+ .inputfile.active + label {
font-style: italic;
color: black;
background-color: lightgreen;
@@ -81,7 +81,6 @@
.status {
font-size: 2em;
}
-
}
.image-upload {
@@ -134,5 +133,7 @@
border-radius: 20px;
opacity: 0.2;
background-color: black;
- transition: all 2s, opacity 1.5s;
-} \ No newline at end of file
+ transition:
+ all 2s,
+ opacity 1.5s;
+}
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index da38fcaee..d2598c2db 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -5,45 +5,44 @@ import * as rp from 'request-promise';
import { DocServer } from '../client/DocServer';
import { Docs } from '../client/documents/Documents';
import { Networking } from '../client/Network';
-import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/global/globalCssVariables.scss';
import { MainViewModal } from '../client/views/MainViewModal';
import { Doc, Opt } from '../fields/Doc';
import { List } from '../fields/List';
import { listSpec } from '../fields/Schema';
import { Cast } from '../fields/Types';
import { Utils } from '../Utils';
-import "./ImageUpload.scss";
+import './ImageUpload.scss';
import { MobileInterface } from './MobileInterface';
-import React = require('react');
-
+import * as React from 'react';
+const { default: { DFLT_IMAGE_NATIVE_DIM } } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore
export interface ImageUploadProps {
Document: Doc; // Target document for upload (upload location)
}
const inputRef = React.createRef<HTMLInputElement>();
-const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", ""));
+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 error: string = '';
+ @observable nm: string = 'Choose files'; // Text of 'Choose Files' button
+ @observable process: string = ''; // Current status of upload
onClick = async () => {
try {
const col = this.props.Document;
await Docs.Prototypes.initialize();
- const imgPrev = document.getElementById("img_preview");
- this.setOpacity(1, "1"); // Slab 1
+ const imgPrev = document.getElementById('img_preview');
+ this.setOpacity(1, '1'); // Slab 1
if (imgPrev) {
const files: FileList | null = inputRef.current!.files;
- this.setOpacity(2, "1"); // Slab 2
+ this.setOpacity(2, '1'); // Slab 2
if (files && files.length !== 0) {
- this.process = "Uploading Files";
+ this.process = 'Uploading Files';
for (let index = 0; index < files.length; ++index) {
const file = files[index];
- const res = await Networking.UploadFilesToServer({file});
- this.setOpacity(3, "1"); // Slab 3
+ 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;
@@ -53,19 +52,19 @@ export class Uploader extends React.Component<ImageUploadProps> {
const path = result.accessPaths.agnostic.client;
let doc = null;
// Case 1: File is a video
- if (file.type === "video/mp4") {
+ if (file.type === 'video/mp4') {
doc = Docs.Create.VideoDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
// Case 2: File is a PDF document
- } else if (file.type === "application/pdf") {
+ } else if (file.type === 'application/pdf') {
doc = Docs.Create.PdfDocument(path, { _nativeWidth: defaultNativeImageDim, _width: 400, title: name });
// Case 3: File is another document type (most likely Image)
} else {
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"));
+ this.setOpacity(4, '1'); // Slab 4
+ const res = await rp.get(Utils.prepend('/getUserDocumentIds'));
if (!res) {
- throw new Error("No user id returned");
+ throw new Error('No user id returned');
}
const field = await DocServer.GetRefField(JSON.parse(res).userDocumentId);
let pending: Opt<Doc>;
@@ -76,19 +75,19 @@ export class Uploader extends React.Component<ImageUploadProps> {
const data = await Cast(pending.data, listSpec(Doc));
if (data) data.push(doc);
else pending.data = new List([doc]);
- this.setOpacity(5, "1"); // Slab 5
- this.process = "File " + (index + 1).toString() + " Uploaded";
- this.setOpacity(6, "1"); // Slab 6
+ this.setOpacity(5, '1'); // Slab 5
+ this.process = 'File ' + (index + 1).toString() + ' Uploaded';
+ this.setOpacity(6, '1'); // Slab 6
}
- if ((index + 1) === files.length) {
- this.process = "Uploads Completed";
- this.setOpacity(7, "1"); // Slab 7
+ if (index + 1 === files.length) {
+ this.process = 'Uploads Completed';
+ this.setOpacity(7, '1'); // Slab 7
}
});
}
// Case in which the user pressed upload and no files were selected
} else {
- this.process = "No file selected";
+ this.process = 'No file selected';
}
// Three seconds after upload the menu will reset
setTimeout(this.clearUpload, 3000);
@@ -96,7 +95,7 @@ export class Uploader extends React.Component<ImageUploadProps> {
} catch (error) {
this.error = JSON.stringify(error);
}
- }
+ };
// Updates label after a files is selected (so user knows a file is uploaded)
inputLabel = async () => {
@@ -105,46 +104,48 @@ export class Uploader extends React.Component<ImageUploadProps> {
if (files && files.length === 1) {
this.nm = files[0].name;
} else if (files && files.length > 1) {
- this.nm = files.length.toString() + " files selected";
+ this.nm = files.length.toString() + ' files selected';
}
- }
+ };
// Loops through load icons, and resets buttons
@action
clearUpload = () => {
for (let i = 1; i < 8; i++) {
- this.setOpacity(i, "0.2");
+ this.setOpacity(i, '0.2');
}
- this.nm = "Choose files";
+ this.nm = 'Choose files';
if (inputRef.current) {
- inputRef.current.value = "";
+ inputRef.current.value = '';
}
- this.process = "";
- }
+ this.process = '';
+ };
// Clears the upload and closes the upload menu
closeUpload = () => {
this.clearUpload();
MobileInterface.Instance.toggleUpload();
- }
+ };
// Handles the setting of the loading bar
setOpacity = (index: number, opacity: string) => {
- const slab = document.getElementById("slab" + index);
+ const slab = document.getElementById('slab' + index);
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"} />
+ <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>
+ <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>
@@ -167,16 +168,6 @@ export class Uploader extends React.Component<ImageUploadProps> {
@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={true} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.closeUpload} />;
}
-
-} \ No newline at end of file
+}
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 6415099fd..2e595e4bc 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -1,4 +1,4 @@
-import React = require('react');
+import * as React from 'react';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { DocServer } from '../client/DocServer';
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index e24bcd733..bdd657575 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -122,7 +122,6 @@ 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';
@@ -385,11 +384,9 @@ export class MobileInterface extends React.Component {
<div style={{ position: 'relative', top: '198px', height: `calc(100% - 350px)`, width: '100%', left: '0%' }}>
<DocumentView
Document={this.mainContainer}
- DataDoc={undefined}
addDocument={returnFalse}
addDocTab={returnFalse}
pinToPres={emptyFunction}
- rootSelected={returnFalse}
removeDocument={undefined}
ScreenToLocalTransform={Transform.Identity}
PanelWidth={this.returnWidth}
@@ -820,9 +817,6 @@ export class MobileInterface extends React.Component {
<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' : ''}`}>
- <AudioUpload />
- </div>
{this.switchMenuView}
{this.inkMenu}
<GestureOverlay isActive={true}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 15:27:11 +0000