aboutsummaryrefslogtreecommitdiff
path: root/src/mobile
diff options
context:
space:
mode:
Diffstat (limited to 'src/mobile')
-rw-r--r--src/mobile/ImageUpload.scss138
-rw-r--r--src/mobile/ImageUpload.tsx74
-rw-r--r--src/mobile/MobileInterface.tsx46
3 files changed, 209 insertions, 49 deletions
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index afc4cc21e..6c782d4d8 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -5,21 +5,20 @@
justify-content: center;
flex-direction: column;
align-items: center;
- width: 90vw;
- height: 90vh;
.upload_label {
- font-weight: normal !important;
+ font-size: 3em;
+ font-weight: 700;
+ color: white;
+ background-color: black;
+ display: inline-block;
+ margin: 10;
width: 100%;
- padding: 13px 12px;
- border-bottom: 1px solid rgba(200, 200, 200, 0.7);
- font-family: Arial, Helvetica, sans-serif;
- font-style: normal;
- font-weight: normal;
- user-select: none;
- font-size: 35px;
- text-transform: uppercase;
- color: black;
+ border-radius: 10px;
+ }
+
+ .upload_label:hover {
+ background-color: darkred;
}
.button_file {
@@ -31,31 +30,92 @@
font-size: 3em;
}
- // .input_file {
- // display: none;
- // }
-
- // // .upload_label,
- // // .upload_button {
- // // background: $dark-color;
- // // font-size: 500%;
- // // font-family: $sans-serif;
- // // text-align: center;
- // // padding: 5vh;
- // // margin-bottom: 20px;
- // // color: white;
- // // }
-
- // .upload_button {
- // width: 100%;
- // padding: 13px 12px;
- // border-bottom: 1px solid rgba(200, 200, 200, 0.7);
- // font-family: Arial, Helvetica, sans-serif;
- // font-style: normal;
- // font-weight: normal;
- // user-select: none;
- // font-size: 35px;
- // text-transform: uppercase;
- // color: black;
- // }
+ .inputfile {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+ }
+
+ .inputfile+label {
+ font-size: 3em;
+ font-weight: 700;
+ color: white;
+ background-color: black;
+ display: inline-block;
+ margin: 10px;
+ width: 100%;
+ border-radius: 10px;
+ }
+
+ .inputfile:focus+label,
+ .inputfile+label:hover {
+ background-color: darkred;
+ }
+
+}
+
+.backgroundUpload {
+ height: 100vh;
+ top: 0;
+ z-index: 999;
+ width: 100vw;
+ position: absolute;
+ background-color: lightgrey;
+ opacity: 0.4;
+}
+
+.image-upload {
+ top: 100%;
+ opacity: 0;
+}
+
+.image-upload.active {
+ top: 0;
+ position: absolute;
+ z-index: 999;
+ height: 100vh;
+ width: 100vw;
+ opacity: 1;
+}
+
+.uploadContainer {
+ top: 40;
+ position: absolute;
+ z-index: 1000;
+ height: 20vh;
+ width: 80vw;
+ opacity: 1;
+}
+
+.closeUpload {
+ position: absolute;
+ border-radius: 10px;
+ top: 39.7%;
+ color: grey;
+ font-size: 40;
+ left: 65.8%;
+ z-index: 1002;
+ padding: 0px 3px;
+ background: aliceblue;
+ transition: 0.5s ease all;
+ border: 3px solid;
+ border-color: black;
+}
+
+.loadingImage {
+ display: inline-flex;
+ width: max-content;
+}
+
+.loadingSlab {
+ position: relative;
+ width: 30px;
+ height: 30px;
+ margin: 10;
+ border-radius: 20px;
+ opacity: 0.3;
+ background-color: black;
} \ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 8d7ccf450..df2beb85a 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -13,6 +13,7 @@ import { Cast } from '../fields/Types';
import { listSpec } from '../fields/Schema';
import { List } from '../fields/List';
import { Scripting } from '../client/util/Scripting';
+import MainViewModal from '../client/views/MainViewModal';
export interface ImageUploadProps {
Document: Doc;
@@ -35,6 +36,10 @@ export class Uploader extends React.Component<ImageUploadProps> {
console.log("uploader click");
try {
this.status = "initializing protos";
+ const slab1 = document.getElementById("slab1");
+ if (slab1) {
+ slab1.style.opacity = "1";
+ }
await Docs.Prototypes.initialize();
const imgPrev = document.getElementById("img_preview");
if (imgPrev) {
@@ -44,8 +49,15 @@ export class Uploader extends React.Component<ImageUploadProps> {
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;
@@ -54,7 +66,15 @@ export class Uploader extends React.Component<ImageUploadProps> {
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";
+ }
const res = await rp.get(Utils.prepend("/getUserDocumentId"));
if (!res) {
throw new Error("No user id returned");
@@ -66,6 +86,10 @@ export class Uploader extends React.Component<ImageUploadProps> {
}
if (pending) {
this.status = "has pending docs";
+ const slab6 = document.getElementById("slab6");
+ if (slab6) {
+ slab6.style.opacity = "1";
+ }
const data = await Cast(pending.data, listSpec(Doc));
if (data) {
data.push(doc);
@@ -74,6 +98,10 @@ export class Uploader extends React.Component<ImageUploadProps> {
}
this.status = "finished";
console.log("hi");
+ const slab7 = document.getElementById("slab7");
+ if (slab7) {
+ slab7.style.opacity = "1";
+ }
}
});
@@ -84,19 +112,55 @@ export class Uploader extends React.Component<ImageUploadProps> {
}
}
- render() {
+ // 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;
+ var inputs = document.querySelectorAll('.inputFile');
+ const label = document.getElementById("label");
+ if (files && label) {
+ label.innerText = files[0].name;
+ }
+ }
+
+ private get uploadInterface() {
return (
<div className="imgupload_cont">
- <label htmlFor="input_image_file" className="upload_label" onClick={this.onClick}>Upload Image</label>
- <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
+ <input type="file" accept="image/*" className="inputFile" id="input_image_file" onClick={this.inputLabel} ref={inputRef}></input>
+ <label id="label" htmlFor="input_image_file">Choose an image</label>
+ <div className="upload_label" onClick={this.onClick}>Upload Image</div>
{/* <div onClick={this.onClick} className="upload_button">Upload</div> */}
<img id="img_preview" src=""></img>
{/* <p>{this.status}</p>
<p>{this.error}</p> */}
+ <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>
</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}
+ />
+ );
+ }
+
}
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index d8ac7d1f1..c4b2ffbc1 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { library } from '@fortawesome/fontawesome-svg-core';
import {
- faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+ faTasks, 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,
@@ -26,6 +26,7 @@ import { InkingControl } from '../client/views/InkingControl';
import "./MobileInterface.scss";
import "./MobileMenu.scss";
import "./MobileHome.scss";
+import "./ImageUpload.scss";
import { DocumentManager } from '../client/util/DocumentManager';
import SettingsManager from '../client/util/SettingsManager';
import { Uploader } from "./ImageUpload";
@@ -38,7 +39,7 @@ import { SelectionManager } from "../client/util/SelectionManager";
import { SketchPicker } from "react-color";
import { ScriptField } from "../fields/ScriptField";
-library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+library.add(faTasks, 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,
@@ -1240,7 +1241,7 @@ export class MobileInterface extends React.Component {
// if (this._homeMenu == false) {
let docArray = this.createPathname();
let items = docArray.map((doc: Doc, index: any) => {
- if (index == 0) {
+ if (index === 0) {
return (
<div className="pathbarItem">
<div className="pathbarText"
@@ -1689,6 +1690,9 @@ export class MobileInterface extends React.Component {
<SettingsManager />
{/* {this.menuOptions()} */}
{/* {this.displayHome()} */}
+ <div className={`image-upload ${this.imageUploadActive ? "active" : ""}`}>
+ {this.uploadImage()}
+ </div>
<div className="docButtonContainer">
{this.pinToPresentation()}
{this.downloadDocument()}
@@ -1719,8 +1723,40 @@ export class MobileInterface extends React.Component {
);
}
+ @observable private imageUploadActive: boolean = false;
+
+ @action
+ toggleUpload = () => this.imageUploadActive = !this.imageUploadActive
+
+ @action
+ closeUpload = () => {
+ this.imageUploadActive = false;
+ }
+
+ // toggleUpload = () => {
+ // if (this.imageUploadActive === true) {
+ // this.imageUploadActive = false;
+ // } else {
+ // this.imageUploadActive = true;
+ // }
+ // }
+
uploadImage = () => {
- console.log("hello world of images");
+ if (this.imageUploadActive) {
+ console.log("active");
+ } else if (!this.imageUploadActive) {
+
+ }
+ console.log("upload");
+ const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+ return (
+ <div>
+ <div className="closeUpload" onClick={this.toggleUpload}>
+ <FontAwesomeIcon icon="window-close" size={"lg"} />
+ </div>
+ <Uploader Document={workspaces} />
+ </div>
+ );
}
}
@@ -1735,7 +1771,7 @@ Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Inst
Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); });
Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); });
Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); });
-Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.uploadImage(); });
+Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); });
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-28 18:30:21 +0000