aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorgeireann <60007097+geireann@users.noreply.github.com>2020-06-16 23:53:16 +0800
committergeireann <60007097+geireann@users.noreply.github.com>2020-06-16 23:53:16 +0800
commit4b1dc65c9e0bb917c1f1f780f8a63fc0c91b4ad6 (patch)
treec18ea9f31fb2dbd1f02800742f7857686411ea8e
parent099a1942440efc2784bc9b2c5896777cf85842ec (diff)
mobile menu bug fixes + doc button fix
-rw-r--r--deploy/mobile/image.html1
-rw-r--r--src/client/util/CurrentUserUtils.ts73
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx2
-rw-r--r--src/client/views/nodes/AudioBox.tsx2
-rw-r--r--src/client/views/nodes/PresBox.scss5
-rw-r--r--src/client/views/nodes/RadialMenu.tsx6
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx3
-rw-r--r--src/client/views/presentationview/PresElementBox.scss2
-rw-r--r--src/mobile/MobileInterface.tsx69
-rw-r--r--src/mobile/MobileMenu.scss4
10 files changed, 77 insertions, 90 deletions
diff --git a/deploy/mobile/image.html b/deploy/mobile/image.html
index d30ad6ac2..718550f02 100644
--- a/deploy/mobile/image.html
+++ b/deploy/mobile/image.html
@@ -3,6 +3,7 @@
<head>
<title>Dash Mobile</title>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
</head>
<body>
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 323e398be..9ce162897 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -55,6 +55,15 @@ export class CurrentUserUtils {
});
}
+ if (doc["template-mobile-button"] === undefined) {
+ const queryTemplate = this.mobileButton({ title: "NEW MOBILE BUTTON", onClick: undefined, _backgroundColor: "lightgrey" }, [this.ficon({ ignoreClick: true, icon: "mobile", backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]);
+ doc["template-mobile-button"] = CurrentUserUtils.ficon({
+ onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
+ dragFactory: new PrefetchProxy(queryTemplate) as any as Doc,
+ removeDropProperties: new List<string>(["dropAction"]), title: "mobile button", icon: "mobile"
+ });
+ }
+
if (doc["template-button-slides"] === undefined) {
const slideTemplate = Docs.Create.MultirowDocument(
[
@@ -165,16 +174,6 @@ export class CurrentUserUtils {
});
}
- // if (doc["mobile-button"] === undefined) {
- // const mobileTemplate = this.mobileButton({ title: "mobile button", _backgroundColor: "lightgrey" }, [this.ficon({ ignoreClick: true, icon: "mobile", backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, "text"), this.mobileButtonInfo({}, "This is a default mobile button for use in the mobile menu")])]);
- // mobileTemplate.isTemplateDoc = makeTemplate(mobileTemplate);
- // doc["mobile-button"] = CurrentUserUtils.ficon({
- // onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
- // dragFactory: new PrefetchProxy(mobileTemplate) as any as Doc,
- // removeDropProperties: new List<string>(["dropAction"]), title: "mobile button view", icon: "mobile"
- // });
- // }
-
if (doc["template-button-detail"] === undefined) {
const { TextDocument, MasonryDocument, CarouselDocument } = Docs.Create;
@@ -229,6 +228,7 @@ export class CurrentUserUtils {
doc["template-button-slides"] as Doc,
doc["template-button-description"] as Doc,
doc["template-button-query"] as Doc,
+ doc["template-mobile-button"] as Doc,
doc["template-button-detail"] as Doc,
doc["template-button-link"] as Doc,
doc["template-button-switch"] as Doc];
@@ -378,9 +378,8 @@ export class CurrentUserUtils {
if (doc.emptyWebpage === undefined) {
doc.emptyWebpage = Docs.Create.WebDocument("", { title: "New Webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
}
- if (doc.activeMobile === undefined) {
- console.log("phone setup");
- this.setupActiveMobile(doc);
+ if (doc.activeMobileMenu === undefined) {
+ this.setupActiveMobileMenu(doc);
}
return [
{ title: "Drag a comparison box", label: "Comp", icon: "columns", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' },
@@ -395,7 +394,7 @@ export class CurrentUserUtils {
{ title: "Drag a search box", label: "Query", icon: "search", ignoreClick: true, drag: 'Docs.Create.QueryDocument({ _width: 200, title: "an image of a cat" })' },
{ title: "Drag a scripting box", label: "Script", icon: "terminal", ignoreClick: true, drag: 'Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250 title: "untitled script" })' },
{ title: "Drag an import folder", label: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
- { title: "Drag a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.activeMobile as Doc },
+ { title: "Drag a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
{ title: "Drag an instance of the device collection", label: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
// { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
// { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
@@ -449,12 +448,12 @@ export class CurrentUserUtils {
return doc.myItemCreators as Doc;
}
- static setupActiveMobile(doc: Doc) {
- if (doc.activeMobile === undefined) {
+ static setupActiveMobileMenu(doc: Doc) {
+ if (doc.activeMobileMenu === undefined) {
console.log("undefined");
- doc.activeMobile = this.setupMobileMenu();
+ doc.activeMobileMenu = this.setupMobileMenu();
}
- return doc.activeMobile as Doc;
+ return doc.activeMobileMenu as Doc;
}
static setupMobileMenu() {
@@ -466,37 +465,45 @@ export class CurrentUserUtils {
static setupMobileButtons(doc?: Doc, buttons?: string[]) {
const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [
- { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" },
- { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." },
- { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" },
+ { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections." },
+ { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your phone to record and upload audio onto Dash Web." },
+ { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload images or videos from your mobile device so they can be accessed on Dash Web." },
{ title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." },
- { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" }
+ { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security." }
];
- return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => this.mobileButton({ title: data.title, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, _backgroundColor: data.backgroundColor }, [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])]));
+ return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data =>
+ this.mobileButton({
+ title: data.title,
+ lockedPosition: true,
+ onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
+ _backgroundColor: data.backgroundColor
+ },
+ [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])])
+ );
}
- static mobileButton = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MulticolumnDocument(docs, {
+ static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, {
...opts,
dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15,
- borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled",
- })) as any as Doc
+ borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled"
+ }) as any as Doc
- static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MultirowDocument(docs, {
+ static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, {
...opts,
dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25,
backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true
- })) as any as Doc
+ }) as any as Doc
- static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonTitle, {
+ static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, {
...opts,
dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)"
- })) as any as Doc
+ }) as any as Doc
- static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonInfo, {
+ static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, {
...opts,
dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2,
- })) as any as Doc
+ }) as any as Doc
static setupThumbButtons(doc: Doc) {
@@ -795,7 +802,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.setupActiveMobileMenu(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/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 0a1b03522..bd0b69da8 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -476,7 +476,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
transformOrigin: "top left",
}}
onScroll={action(e => {
- if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll;
+ if (!this.props.isSelected() && window.innerWidth > 1000) e.currentTarget.scrollTop = this._scroll;
else this._scroll = e.currentTarget.scrollTop;
})}
onDrop={this.onExternalDrop.bind(this)}
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 1a935d9b0..2e0be1c6a 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -228,7 +228,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
{!this.path ?
<div className="audiobox-buttons">
<div className="audiobox-dictation" onClick={this.onFile}>
- <FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "dimGray" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+ <FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "rgba(0,0,0,0)" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
</div>
<button className={`audiobox-record${interactive}`} style={{ backgroundColor: this.audioState === "recording" ? "red" : "black" }}>
{this.audioState === "recording" ? "STOP" : "RECORD"}
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 2bb249ee4..ccce6e627 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -126,4 +126,9 @@
position: absolute;
min-width: 50px;
}
+
+ .input,
+ .select {
+ font-size: 100%;
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index ddfdb67b4..2bbb80b2a 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -1,9 +1,9 @@
import React = require("react");
import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
import { observer } from "mobx-react";
-import MobileInterface from "../../../mobile/MobileInterface";
import "./RadialMenu.scss";
import { RadialMenuItem, RadialMenuProps } from "./RadialMenuItem";
+import { MobileInterface } from "../../../mobile/MobileInterface";
@observer
export class RadialMenu extends React.Component {
@@ -38,7 +38,6 @@ export class RadialMenu extends React.Component {
this._mouseY = e.clientY;
this.used = false;
document.addEventListener("pointermove", this.onPointerMove);
-
}
@observable
@@ -176,7 +175,6 @@ export class RadialMenu extends React.Component {
@action
openMenu = (x: number, y: number) => {
-
this._pageX = x;
this._pageY = y;
this._shouldDisplay;
@@ -216,7 +214,7 @@ export class RadialMenu extends React.Component {
render() {
- if (!this._display || MobileInterface.Instance) {
+ if (!this._display) {
return null;
}
const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } :
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 1db50a5cc..912bafc46 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -262,7 +262,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
}
public unhighlightSearchTerms = () => {
- if (this._editorView && (this._editorView as any).docView) {
+ if (window.innerWidth < 1000) null;
+ else if (this._editorView && (this._editorView as any).docView) {
const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight);
const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true });
const end = this._editorView.state.doc.nodeSize - 2;
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index ec82b0c51..bf268eb8d 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -79,7 +79,7 @@
}
.presElementBox-name {
- font-size: 12pxππ;
+ font-size: 12px;
position: absolute;
display: inline-block;
width: calc(100% - 45px);
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 25dc9fd55..7af11a9c4 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -35,6 +35,7 @@ import { nullAudio } from '../fields/URLField';
import GestureOverlay from "../client/views/GestureOverlay";
import { ScriptField } from "../fields/ScriptField";
import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu";
+import { RadialMenu } from "../client/views/nodes/RadialMenu";
library.add(faTasks, faMobile, faThLarge, 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,
@@ -48,7 +49,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; }
- @observable private mainDoc: any = CurrentUserUtils.setupActiveMobile(this.userDoc);
+ @observable private mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(this.userDoc);
@observable private renderView?: () => JSX.Element;
@observable private sidebarActive: boolean = false;
@observable private imageUploadActive: boolean = false;
@@ -94,31 +95,6 @@ export class MobileInterface extends React.Component {
this.renderView = renderView;
}
- onSwitchUpload = async () => {
- let width = 300;
- let height = 300;
- const res = await rp.get(Utils.prepend("/getUserDocumentId"));
-
- // get width and height of the collection doc
- 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 docView = DocumentManager.Instance.getDocumentView(collectionDoc);
- if (docView) {
- width = docView.nativeWidth ? docView.nativeWidth : 300;
- height = docView.nativeHeight ? docView.nativeHeight : 300;
- }
- }
- }
- DocServer.Mobile.dispatchOverlayTrigger({
- enableOverlay: true,
- width: width,
- height: height,
- text: "Documents uploaded from mobile will show here",
- });
- }
-
// For toggling the hamburger menu
@action
toggleSidebar = () => this.sidebarActive = !this.sidebarActive
@@ -138,8 +114,8 @@ export class MobileInterface extends React.Component {
* Back method for navigating
*/
back = () => {
- let header = document.getElementById("header") as HTMLElement;
- let doc = Cast(this._parents.pop(), Doc) as Doc;
+ const header = document.getElementById("header") as HTMLElement;
+ const doc = Cast(this._parents.pop(), Doc) as Doc;
if (doc === Cast(this._library, Doc) as Doc) {
this._child = null;
@@ -198,7 +174,7 @@ export class MobileInterface extends React.Component {
if (this.mainContainer) {
const backgroundColor = () => "white";
return (
- <div style={{ position: "relative", top: '200px', height: `calc(100% - 200px)`, width: "100%", overflow: "hidden", left: "0%" }}>
+ <div style={{ position: "relative", top: '200px', height: `calc(100% - 350px)`, width: "100%", left: "0%" }}>
<DocumentView
Document={this.mainContainer}
DataDoc={undefined}
@@ -238,16 +214,15 @@ export class MobileInterface extends React.Component {
* @param doc: doc for which the method is called
*/
handleClick = async (doc: Doc) => {
- let children = DocListCast(doc.data);
+ const children = DocListCast(doc.data);
if (doc.type !== "collection") {
this._parents.push(this._activeDoc);
this._activeDoc = doc;
this.switchCurrentView((userDoc: Doc) => doc);
this._homeMenu = false;
this.toggleSidebar();
- } else if (doc.type === "collection" && children.length === 0) {
- console.log("This collection has no children");
- } else {
+ } else if (doc.type === "collection" && children.length === 0) console.log("This collection has no children");
+ else {
this._parents.push(this._activeDoc);
this._activeDoc = doc;
this.switchCurrentView((userDoc: Doc) => doc);
@@ -260,7 +235,7 @@ export class MobileInterface extends React.Component {
* Handles creation of array which is then rendered in renderPathbar()
*/
createPathname = () => {
- let docArray = [];
+ const docArray = [];
this._parents.map((doc: Doc, index: any) => {
docArray.push(doc);
});
@@ -270,8 +245,8 @@ export class MobileInterface extends React.Component {
// Renders the graphical pathbar
renderPathbar = () => {
- let docArray = this.createPathname();
- let items = docArray.map((doc: Doc, index: any) => {
+ const docArray = this.createPathname();
+ const items = docArray.map((doc: Doc, index: any) => {
if (index === 0) {
return (
<>
@@ -341,9 +316,8 @@ export class MobileInterface extends React.Component {
this._child = null;
this.switchCurrentView((userDoc: Doc) => doc);
this._parents.length = index;
- } else if (doc === this._homeDoc) {
- this.returnHome();
- } else {
+ } else if (doc === this._homeDoc) this.returnHome();
+ else {
this._activeDoc = doc;
this._child = doc;
this.switchCurrentView((userDoc: Doc) => doc);
@@ -384,7 +358,7 @@ export class MobileInterface extends React.Component {
workspaces = this._child;
}
- let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
+ const buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
if (doc.type !== "ink") {
return (
<div
@@ -473,7 +447,7 @@ export class MobileInterface extends React.Component {
console.log("here");
return <div className="colorSelector">
<InkOptionsMenu />
- </div>
+ </div>;
}
}
@@ -677,17 +651,18 @@ export class MobileInterface extends React.Component {
{this.uploadImage()}
</div>
{this.switchMenuView()}
- <div className="docButtonContainer">
- {this.pinToPresentation()}
- {this.downloadDocument()}
- {this.drawInk()}
- {this.uploadAudioButton()}
- </div>
{this.inkMenu()}
<GestureOverlay>
+ <div className="docButtonContainer">
+ {this.pinToPresentation()}
+ {this.downloadDocument()}
+ {this.drawInk()}
+ {this.uploadAudioButton()}
+ </div>
{this.displayWorkspaces()}
{this.renderDefaultContent()}
</GestureOverlay>
+ <RadialMenu />
</div>
);
}
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 8d996f779..3126a7d0e 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -256,7 +256,7 @@ body {
}
.docButtonContainer {
- top: 90%;
+ top: 80%;
position: absolute;
display: flex;
transform: translate(-50%, 0);
@@ -306,7 +306,7 @@ body {
width: 200px;
left: 0px;
top: 0px;
- background-image: linear-gradient(to right, #1a1a1a, rgba(255, 0, 0, 0));
+ background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0));
text-align: center;
user-select: none;
z-index: 99;