aboutsummaryrefslogtreecommitdiff
path: root/src/mobile
diff options
context:
space:
mode:
Diffstat (limited to 'src/mobile')
-rw-r--r--src/mobile/ImageUpload.scss1
-rw-r--r--src/mobile/ImageUpload.tsx139
-rw-r--r--src/mobile/MobileInterface.tsx156
-rw-r--r--src/mobile/MobileMenu.scss8
4 files changed, 87 insertions, 217 deletions
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index d5ab31469..95c0c2680 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -6,6 +6,7 @@
flex-direction: column;
align-items: center;
max-width: 400px;
+ min-width: 400px;
.upload_label {
font-size: 3em;
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 8f050aedd..3b4008e3f 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -14,6 +14,7 @@ import { listSpec } from '../fields/Schema';
import { List } from '../fields/List';
import { Scripting } from '../client/util/Scripting';
import MainViewModal from '../client/views/MainViewModal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
export interface ImageUploadProps {
Document: Doc;
@@ -35,83 +36,80 @@ export class Uploader extends React.Component {
@observable process: string = "";
onClick = async () => {
- console.log("uploader click");
try {
- this.status = "initializing protos";
+ await Docs.Prototypes.initialize();
+ const imgPrev = document.getElementById("img_preview");
const slab1 = document.getElementById("slab1");
if (slab1) {
slab1.style.opacity = "1";
}
- await Docs.Prototypes.initialize();
- const imgPrev = document.getElementById("img_preview");
- console.log("buddy");
if (imgPrev) {
- console.log("hi");
const files: FileList | null = inputRef.current!.files;
+ const slab2 = document.getElementById("slab2");
+ if (slab2) {
+ slab2.style.opacity = "1";
+ }
if (files && files.length !== 0) {
- this.process = "Uploading Image"
- console.log(files[0]);
- const name = files[0].name;
- const res = await Networking.UploadFilesToServer(files[0]);
- this.status = "uploading image";
- const slab2 = document.getElementById("slab2");
- if (slab2) {
- slab2.style.opacity = "1";
- }
- this.status = "upload image, getting json";
- const slab3 = document.getElementById("slab3");
- if (slab3) {
- slab3.style.opacity = "1";
- }
- res.map(async ({ result }) => {
- if (result instanceof Error) {
- return;
- }
- const path = Utils.prepend(result.accessPaths.agnostic.client);
- const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
-
- this.status = "getting user document";
- const slab4 = document.getElementById("slab4");
- if (slab4) {
- slab4.style.opacity = "1";
- }
- this.status = "upload image, getting json";
- const slab5 = document.getElementById("slab5");
- if (slab5) {
- slab5.style.opacity = "1";
+ this.process = "Uploading Files";
+ for (let index = 0; index < files.length; ++index) {
+ const file = files[index];
+ const res = await Networking.UploadFilesToServer(file);
+ const slab3 = document.getElementById("slab3");
+ if (slab3) {
+ slab3.style.opacity = "1";
}
- const res = await rp.get(Utils.prepend("/getUserDocumentId"));
- if (!res) {
- throw new Error("No user id returned");
- }
- const field = await DocServer.GetRefField(res);
- let pending: Opt<Doc>;
- if (field instanceof Doc) {
- pending = await Cast(field.rightSidebarCollection, Doc);
- }
- if (pending) {
- this.status = "has pending docs";
- const slab6 = document.getElementById("slab6");
- if (slab6) {
- slab6.style.opacity = "1";
+ res.map(async ({ result }) => {
+ const name = file.name;
+ if (result instanceof Error) {
+ return;
}
- const data = await Cast(pending.data, listSpec(Doc));
- if (data) {
- data.push(doc);
+ const path = Utils.prepend(result.accessPaths.agnostic.client);
+ let doc = null;
+ if (file.type === "video/mp4") {
+ doc = Docs.Create.VideoDocument(path, { _nativeWidth: 200, _width: 200, title: name });
} else {
- pending.data = new List([doc]);
+ doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
}
- this.status = "finished";
-
- console.log("hi");
- const slab7 = document.getElementById("slab7");
- if (slab7) {
- slab7.style.opacity = "1";
+ const slab4 = document.getElementById("slab4");
+ if (slab4) {
+ slab4.style.opacity = "1";
+ }
+ const res = await rp.get(Utils.prepend("/getUserDocumentId"));
+ if (!res) {
+ throw new Error("No user id returned");
+ }
+ const field = await DocServer.GetRefField(res);
+ let pending: Opt<Doc>;
+ if (field instanceof Doc) {
+ pending = await Cast(field.rightSidebarCollection, Doc);
}
- this.process = "Image Uploaded";
+ if (pending) {
+ const data = await Cast(pending.data, listSpec(Doc));
+ if (data) {
+ data.push(doc);
+ } else {
+ pending.data = new List([doc]);
+ }
+ this.status = "finished";
+ const slab5 = document.getElementById("slab5");
+ if (slab5) {
+ slab5.style.opacity = "1";
+ }
+ this.process = "File " + (index + 1).toString() + " Uploaded";
+ if (index === files.length) {
+ const slab6 = document.getElementById("slab6");
+ if (slab6) {
+ slab6.style.opacity = "1";
+ }
+ }
+ }
+ });
+ this.process = "All Files Uploaded";
+ const slab7 = document.getElementById("slab7");
+ if (slab7) {
+ slab7.style.opacity = "1";
}
-
- });
+ }
} else {
this.process = "No file selected";
}
@@ -120,16 +118,18 @@ export class Uploader extends React.Component {
} catch (error) {
this.error = JSON.stringify(error);
}
-
}
// 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;
- if (files && files.length !== 0) {
+ if (files && files.length === 1) {
console.log(files);
this.nm = files[0].name;
+ } else if (files && files.length > 1) {
+ console.log(files.length);
+ this.nm = files.length.toString() + " files selected";
}
}
@@ -163,7 +163,7 @@ export class Uploader extends React.Component {
if (slab7) {
slab7.style.opacity = "0.4";
}
- this.nm = "Choose an image";
+ this.nm = "Choose files";
if (inputRef.current) {
inputRef.current.value = "";
@@ -177,9 +177,12 @@ export class Uploader extends React.Component {
private get uploadInterface() {
return (
<div className="imgupload_cont">
- <input type="file" accept="image/*" className="inputFile" id="input_image_file" ref={inputRef} onChange={this.inputLabel}></input>
+ <input type="file" accept="video/*,image/*" className="inputFile" 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 Image</div>
+ <div className="upload_label" onClick={this.onClick}>
+ <FontAwesomeIcon icon="upload" size="lg" />
+ Upload
+ </div>
{/* <div onClick={this.onClick} className="upload_button">Upload</div> */}
<img id="img_preview" src=""></img>
{/* <p>{this.status}</p>
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index f2914eaae..211cc7a1a 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -52,10 +52,7 @@ 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; }
- // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
- // Sets up new mobile menu only if activeMobile already exists
- // @observable private mainDoc: any = this.userDoc.activeMobile === undefined ? CurrentUserUtils.setupMobileMenu() : this.userDoc.activeMobile;
- @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu();
+ @observable private mainDoc: any = CurrentUserUtils.setupActiveMobile(this.userDoc);
@observable private renderView?: () => JSX.Element;
@observable private audioState: any;
@observable private activeToolbar: boolean = false;
@@ -86,13 +83,7 @@ export class MobileInterface extends React.Component {
@action
componentDidMount = () => {
- library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]);
- if (this.userDoc.activeMobile) {
- console.log(Doc.UserDoc().activeMobile);
- }
- if (this.userDoc && !this.mainContainer) {
- this.userDoc.activeMobile = this._homeDoc;
- }
+ Doc.UserDoc().activeMobile = this._homeDoc;
this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false;
Doc.SetSelectedTool(InkTool.None);
this.switchCurrentView((userDoc: Doc) => this._homeDoc);
@@ -353,26 +344,6 @@ export class MobileInterface extends React.Component {
<div className="hidePath" />
</div>);
}
- // }
- // } else {
-
- // return (
- // <div className="pathbar">
- // <div className="scrollmenu">
- // <div className="pathbarItem">
- // <div className="pathbarText"
- // style={{ backgroundColor: "rgb(119, 37, 37)" }}
- // key={0}
- // onClick={() => this.returnHome()}>Home
- // </div>
- // </div>
- // </div>
- // <div className="hidePath" />
- // </div>
- // );
- // }
-
- // }
}
// Handles when user clicks on document in the pathbar
@@ -393,16 +364,6 @@ export class MobileInterface extends React.Component {
}
renderDefaultContent = () => {
- let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => {
- if (doc.type !== "ink") {
- return (
- <div
- className="item"
- key={index}
- onClick={() => doc.onClick}>{doc.title}
- </div>);
- }
- });
if (this._homeMenu === true) {
return (
@@ -420,7 +381,10 @@ export class MobileInterface extends React.Component {
{this.renderPathbar()}
<div className="sidebar" id="sidebar">
<div className="sidebarButtons">
- {menuButtons}
+ <div
+ className="item"
+ onClick={() => ScriptField.MakeScript("createNewWorkspace()")}>Create New Workspace
+ </div>
</div>
</div>
</div>
@@ -429,7 +393,7 @@ export class MobileInterface extends React.Component {
let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
if (this._child) {
- workspaces = this._child
+ workspaces = this._child;
}
let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
@@ -468,6 +432,10 @@ export class MobileInterface extends React.Component {
</> :
<>
{buttons}
+ <div
+ className="item"
+ onClick={() => ScriptField.MakeScript("createNewWorkspace()")}>Create New Workspace
+ </div>
</>
}
</div>
@@ -627,100 +595,12 @@ export class MobileInterface extends React.Component {
// this.recordAudio();
}
- // renderActiveCollection = (userDoc: Doc) => {
- // if (this.activeContainer) {
- // const active = Cast(this.activeContainer.data, listSpec(Doc));
- // if (active) {
- // return (
- // <div className="mobileInterface-background">HELLO!</div>
- // );
- // }
- // }
- // }
-
- onBack = (e: React.MouseEvent) => {
- this.switchCurrentView((userDoc: Doc) => this.mainDoc);
- Doc.SetSelectedTool(InkTool.None); // TODO: switch to previous tool
-
- DocServer.Mobile.dispatchOverlayTrigger({
- enableOverlay: false,
- width: window.innerWidth,
- height: window.innerHeight
- });
-
- // this.inkDoc = undefined;
- this.drawingInk = false;
- }
-
- shiftLeft = (e: React.MouseEvent) => {
- DocServer.Mobile.dispatchOverlayPositionUpdate({
- dx: -10
- });
- e.preventDefault();
- e.stopPropagation();
- }
-
- shiftRight = (e: React.MouseEvent) => {
- DocServer.Mobile.dispatchOverlayPositionUpdate({
- dx: 10
- });
- e.preventDefault();
- e.stopPropagation();
- }
-
panelHeight = () => window.innerHeight;
panelWidth = () => window.innerWidth;
//WAS 3
//WAS 1
- upload = async (e: React.MouseEvent) => {
- if (this.mainContainer) {
- const data = Cast(this.mainContainer.data, listSpec(Doc));
- if (data) {
- const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked
- const children = DocListCast(collectionDoc.data);
- const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, {
- title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300
- });
- if (uploadDoc) {
- DocServer.Mobile.dispatchMobileDocumentUpload({
- docId: uploadDoc[Id],
- });
- }
- }
- }
- e.stopPropagation();
- e.preventDefault();
- }
-
- addWebToCollection = async () => {
- let url = "https://en.wikipedia.org/wiki/Hedgehog";
- if (this.mainContainer) {
- const data = Cast(this.mainContainer.data, listSpec(Doc));
- if (data) {
- const webDoc = await data[0];
- const urlField: FieldResult<WebField> = Cast(webDoc.data, WebField);
- url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog";
-
- }
- }
- Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" });
- }
-
- clearUpload = async () => {
- if (this.mainContainer) {
- const data = Cast(this.mainContainer.data, listSpec(Doc));
- if (data) {
- const collectionDoc = await data[1];
- const children = DocListCast(collectionDoc.data);
- children.forEach(doc => {
- });
- // collectionDoc[data] = new List<Doc>();
- }
- }
- }
-
pinToPresentation = () => {
// Only making button available if it is an image
if (this._activeDoc.type === "image") {
@@ -845,7 +725,6 @@ export class MobileInterface extends React.Component {
{this.uploadAudioButton()}
{/* {this.colorTool()} */}
{this.inkMenu()}
- <InkOptionsMenu />
</div>
<GestureOverlay>
{this.displayWorkspaces()}
@@ -879,14 +758,6 @@ export class MobileInterface extends React.Component {
this.imageUploadActive = false;
}
- // toggleUpload = () => {
- // if (this.imageUploadActive === true) {
- // this.imageUploadActive = false;
- // } else {
- // this.imageUploadActive = true;
- // }
- // }
-
uploadImage = () => {
if (this.imageUploadActive) {
console.log("active");
@@ -905,11 +776,6 @@ export class MobileInterface extends React.Component {
}
}
-
-
-const inputRef = React.createRef<HTMLInputElement>();
-
-
Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); });
Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); });
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index da1e9d951..44d3acb6f 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -96,7 +96,7 @@ body {
}
.sidebar {
- position: absolute;
+ position: fixed;
top: 120px;
opacity: 0;
right: -100%;
@@ -212,7 +212,7 @@ body {
}
.pathbar {
- position: absolute;
+ position: fixed;
top: 118px;
left: 0px;
background: #1a1a1a;
@@ -373,7 +373,7 @@ body {
}
.homeSwitch {
- position: absolute;
+ position: fixed;
top: 212;
right: 36px;
display: inline-flex;
@@ -401,4 +401,4 @@ body {
.list.active {
color: darkred;
border-color: darkred;
-}
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-28 09:54:54 +0000