diff options
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 46 | ||||
| -rw-r--r-- | src/mobile/MobileMenu.scss | 12 |
2 files changed, 49 insertions, 9 deletions
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 5c89d7612..dc0d70c0b 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -69,6 +69,7 @@ export default class MobileInterface extends React.Component { constructor(props: Readonly<{}>) { super(props); MobileInterface.Instance = this; + } @action @@ -78,6 +79,8 @@ export default class MobileInterface extends React.Component { if (this.userDoc && !this.mainContainer) { this.userDoc.activeMobile = this.mainDoc; } + InkingControl.Instance.switchTool(InkTool.None) + MobileInterface.Instance.drawingInk = false; } @action @@ -94,9 +97,33 @@ export default class MobileInterface extends React.Component { if (!this._ink) { InkingControl.Instance.switchTool(InkTool.Pen); MobileInterface.Instance.drawingInk = true; + this._ink = true; + DocServer.Mobile.dispatchOverlayTrigger({ + enableOverlay: true, + width: window.innerWidth, + height: window.innerHeight + }); } else { + InkingControl.Instance.switchTool(InkTool.None) MobileInterface.Instance.drawingInk = false; + this._ink = false; + + DocServer.Mobile.dispatchOverlayTrigger({ + enableOverlay: false, + width: window.innerWidth, + height: window.innerHeight + }); + } + + this.toggleSidebar(); + } + + getInkStatus = () => { + if (this._ink) { + return "ink off"; + } else { + return "ink on"; } } @@ -144,7 +171,7 @@ export default class MobileInterface extends React.Component { back = () => { let doc = Cast(this._parents.pop(), Doc) as Doc; - if (doc == Cast(this._menu, Doc) as Doc) { + if (doc === Cast(this._menu, Doc) as Doc) { this._child = null; this.userDoc.activeMobile = this.mainDoc; } else { @@ -223,9 +250,9 @@ export default class MobileInterface extends React.Component { if (doc === this.mainDoc) { pathname = pathname; } else if (doc.title === "mobile audio" || doc.title === "Presentation") { - pathname = pathname + pathname = pathname; } else if (doc.type !== "collection") { - pathname = pathname + pathname = pathname; } else { pathname = pathname + " > " + doc.title; } @@ -283,6 +310,7 @@ export default class MobileInterface extends React.Component { <div> <div className="navbar"> <div className="header" id="header">MENU</div> + <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}> <span></span> <span></span> @@ -296,7 +324,6 @@ export default class MobileInterface extends React.Component { </div> <div className="sidebar" id="sidebar"> <div> - <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> {buttons} {/* <div className="item" key="library" onClick={this.openLibrary}> Library @@ -327,6 +354,7 @@ export default class MobileInterface extends React.Component { <div> <div className="navbar"> <div className="header" id="header">menu</div> + <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}> <span></span> <span></span> @@ -339,16 +367,15 @@ export default class MobileInterface extends React.Component { </div> </div> <div className="sidebar" id="sidebar"> - <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> <div className="back" onClick={this.back}> ← </div> <div> {buttons} </div> - <div className="item" key="ink" onClick={() => CurrentUserUtils.setupDockedButtons(this.userDoc)}> - Ink - </div> + <div className="item" key="ink" onClick={() => this.onSwitchInking()}> + {this.getInkStatus()} + </div> <div className="item" key="home" onClick={this.returnHome}> Home </div> @@ -362,6 +389,7 @@ export default class MobileInterface extends React.Component { // upload to server with known URL this._parents.push(this._activeDoc); const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; + console.log(audioDoc.data); if (audioDoc) { console.log("audioClicked: " + audioDoc.title); this._activeDoc = audioDoc; @@ -369,7 +397,7 @@ export default class MobileInterface extends React.Component { this.toggleSidebar(); } const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - if (audioRightSidebar) { + if (audioDoc.data) { console.log(audioRightSidebar.title); const data = Cast(audioRightSidebar.data, listSpec(Doc)); if (data) { diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 250340e36..5042415a0 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -80,6 +80,16 @@ body { .navbar .toggle-btn.active span:nth-child(3) { top: 50%; } +.navbar .home { + position: absolute; + top: -135px; + right: 80px; + font-size: 40; + user-select: none; + text-transform: uppercase; + font-family: Arial, Helvetica, sans-serif; + z-index: 200; +} .sidebar { position: absolute; @@ -92,6 +102,8 @@ body { background-color: whitesmoke; transition: all 400ms ease 50ms; padding: 20px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; // border-right: 5px solid black; } |