diff options
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 12 | ||||
| -rw-r--r-- | src/mobile/ImageUpload.scss | 12 | ||||
| -rw-r--r-- | src/mobile/ImageUpload.tsx | 11 | ||||
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 28 | ||||
| -rw-r--r-- | src/mobile/MobileMenu.scss | 1 |
5 files changed, 48 insertions, 16 deletions
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index a11c97b09..8cf2cdf55 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -115,12 +115,12 @@ export default class GestureOverlay extends Touchable { onReactTouchStart = (te: React.TouchEvent) => { document.removeEventListener("touchmove", this.onReactHoldTouchMove); document.removeEventListener("touchend", this.onReactHoldTouchEnd); - // if (RadialMenu.Instance._display === true) { - // te.preventDefault(); - // te.stopPropagation(); - // RadialMenu.Instance.closeMenu(); - // return; - // } + if (RadialMenu.Instance?._display === true) { + te.preventDefault(); + te.stopPropagation(); + RadialMenu.Instance.closeMenu(); + return; + } // this chunk adds new touch targets to a map of pointer events; this helps us keep track of individual fingers // so that we can know, for example, if two fingers are pinching out or in. diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 6c782d4d8..d5ab31469 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -5,6 +5,7 @@ justify-content: center; flex-direction: column; align-items: center; + max-width: 400px; .upload_label { font-size: 3em; @@ -17,6 +18,13 @@ border-radius: 10px; } + .file { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: ltr; + } + .upload_label:hover { background-color: darkred; } @@ -55,6 +63,10 @@ background-color: darkred; } + .status { + font-size: 2em; + } + } .backgroundUpload { diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 504e4ceae..8f050aedd 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -32,6 +32,7 @@ export class Uploader extends React.Component { @observable error: string = ""; @observable status: string = ""; @observable nm: string = "Choose an image"; + @observable process: string = ""; onClick = async () => { console.log("uploader click"); @@ -48,6 +49,7 @@ export class Uploader extends React.Component { console.log("hi"); const files: FileList | null = inputRef.current!.files; 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]); @@ -100,15 +102,18 @@ export class Uploader extends React.Component { pending.data = new List([doc]); } this.status = "finished"; + console.log("hi"); const slab7 = document.getElementById("slab7"); if (slab7) { slab7.style.opacity = "1"; } - + this.process = "Image Uploaded"; } }); + } else { + this.process = "No file selected"; } setTimeout(this.clearUpload, 3000); } @@ -163,6 +168,7 @@ export class Uploader extends React.Component { if (inputRef.current) { inputRef.current.value = ""; } + this.process = ""; console.log(inputRef.current!.files); } @@ -172,7 +178,7 @@ export class Uploader extends React.Component { return ( <div className="imgupload_cont"> <input type="file" accept="image/*" className="inputFile" id="input_image_file" ref={inputRef} onChange={this.inputLabel}></input> - <label id="label" htmlFor="input_image_file">{this.nm}</label> + <label className="file" id="label" htmlFor="input_image_file">{this.nm}</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> @@ -187,6 +193,7 @@ export class Uploader extends React.Component { <div className="loadingSlab" id="slab6" /> <div className="loadingSlab" id="slab7" /> </div> + <p className="status">{this.process}</p> </div> ); } diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 820a6885d..0b5855e1f 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1115,7 +1115,7 @@ export class MobileInterface extends React.Component { */ returnMain = () => { console.log("home"); - this._parents = []; + this._parents = [this._homeDoc]; // this.toggleSidebar(); this._activeDoc = this._library; this.switchCurrentView((userDoc: Doc) => this._library); @@ -1201,7 +1201,7 @@ export class MobileInterface extends React.Component { * Handles the click functionality in the library panel * @param doc: doc for which the method is called */ - handleClick(doc: Doc) { + handleClick = async (doc: Doc) => { let children = DocListCast(doc.data); if (doc.type !== "collection") { this._parents.push(this._activeDoc); @@ -1244,12 +1244,24 @@ export class MobileInterface extends React.Component { let items = docArray.map((doc: Doc, index: any) => { if (index === 0) { return ( - <div className="pathbarItem"> - <div className="pathbarText" - key={index} - onClick={() => this.handlePathClick(doc, index)}>{doc.title} - </div> - </div>); + <> + {this._homeMenu ? + <div className="pathbarItem"> + <div className="pathbarText" + style={{ backgroundColor: "rgb(119, 37, 37)" }} + key={index} + onClick={() => this.handlePathClick(doc, index)}>{doc.title} + </div> + </div> + : + <div className="pathbarItem"> + <div className="pathbarText" + key={index} + onClick={() => this.handlePathClick(doc, index)}>{doc.title} + </div> + </div>} + </>); + } else if (doc === this._activeDoc) { return ( <div className="pathbarItem"> diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 669b55601..b98b51f31 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -309,6 +309,7 @@ body { text-align: center; user-select: none; z-index: 99; + pointer-events: none; } .toolbar { |