aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CurrentUserUtils.ts23
-rw-r--r--src/client/views/GestureOverlay.scss2
-rw-r--r--src/client/views/collections/CollectionStackingView.scss10
-rw-r--r--src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx4
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx2
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx2
-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
10 files changed, 109 insertions, 238 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 1b0622f6d..e1605473c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -329,7 +329,8 @@ export class CurrentUserUtils {
doc.emptyWebpage = Docs.Create.WebDocument("", { title: "New Webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
}
if (doc.activeMobile === undefined) {
- doc.activeMobile = CurrentUserUtils.setupMobileMenu();
+ console.log("phone setup");
+ this.setupActiveMobile(doc);
}
return [
{ title: "Drag a comparison box", label: "Comp", icon: "columns", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' },
@@ -398,16 +399,18 @@ export class CurrentUserUtils {
return doc.myItemCreators as Doc;
}
- // static setupActiveMobile(doc: Doc) {
- // if (doc.activeMobile === undefined) {
- // doc.activeMobile = CurrentUserUtils.setupMobileMenu();
- // }
- // }
+ static setupActiveMobile(doc: Doc) {
+ if (doc.activeMobile === undefined) {
+ console.log("undefined");
+ doc.activeMobile = this.setupMobileMenu();
+ }
+ return doc.activeMobile as Doc;
+ }
static setupMobileMenu() {
- const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), {
- _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _yMargin: 100
- }), Doc) as Doc;
+ const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), {
+ _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100
+ }));
return menu;
}
@@ -740,7 +743,7 @@ export class CurrentUserUtils {
this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon
this.setupDocTemplates(doc); // sets up the template menu of templates
this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing
- // this.setupActiveMobile(doc);
+ this.setupActiveMobile(doc);
this.setupOverlays(doc); // documents in overlay layer
this.setupDockedButtons(doc); // the bottom bar of font icons
this.setupDefaultPresentation(doc); // presentation that's initially triggered
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index 107077792..f61f4a05e 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -1,7 +1,7 @@
.gestureOverlay-cont {
width: 100vw;
height: 100vh;
- position: absolute;
+ position: fixed;
top: 0;
left: 0;
touch-action: none;
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 714ff46a9..98efdfd23 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -428,11 +428,9 @@
.collectionStackingView .collectionStackingView-columnDragger,
.collectionMasonryView .collectionStackingView-columnDragger {
- width: 30;
- transform: translate(0, -40px);
- height: 30;
- font-size: 40;
- position: absolute;
- margin-left: -5;
+ width: 0.1;
+ height: 0.1;
+ opacity: 0;
+ font-size: 0;
}
} \ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 5a27f74e5..9f5e217bf 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -101,7 +101,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
title={`Draw ${btn}`}
key={btn}
onPointerDown={action(e => GestureOverlay.Instance.InkShape = btn)}
- style={{ backgroundColor: btn === GestureOverlay.Instance.InkShape ? "121212" : "" }}>
+ style={{ backgroundColor: btn === GestureOverlay.Instance?.InkShape ? "121212" : "" }}>
{this._icons[i]}
</button>)},
</>;
@@ -113,7 +113,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
title="Bezier changer"
key="bezier"
onPointerDown={e => this.changeBezier(e)}
- style={ { backgroundColor:ActiveInkBezierApprox() ? "121212":"" } }>
+ style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}>
B
</button>;
}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 1fab54d7e..e034e07a0 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1213,7 +1213,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : "";
const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground;
if (this.props.isSelected()) {
- this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props);
+ this._editorView && RichTextMenu.Instance?.updateFromDash(this._editorView, undefined, this.props);
} else if (FormattedTextBoxComment.textBox === this) {
FormattedTextBoxComment.Hide();
}
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index caee06d8f..793d4068f 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -49,7 +49,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
componentDidMount() {
this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight],
- params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true });
+ params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 200 : 0), { fireImmediately: true });
}
componentWillUnmount() {
this._heightDisposer?.();
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 2025-10-11 07:55:39 +0000