From 0bd7f4f85be56de4326f0671453fc5e5e917a5d0 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sun, 7 Jun 2020 21:22:25 -0700 Subject: pull current work in --- src/mobile/MobileHome.scss | 101 +++ src/mobile/MobileInterface.tsx | 1819 +++++++++++++++++++++++++++++++++++---- src/mobile/MobileMenu.scss | 122 ++- src/mobile/SideBar.scss | 79 -- src/mobile/SideBar.tsx | 39 - src/mobile/WorkSpaceButton.scss | 0 src/mobile/WorkSpaceButton.tsx | 14 - 7 files changed, 1819 insertions(+), 355 deletions(-) create mode 100644 src/mobile/MobileHome.scss delete mode 100644 src/mobile/SideBar.scss delete mode 100644 src/mobile/SideBar.tsx delete mode 100644 src/mobile/WorkSpaceButton.scss delete mode 100644 src/mobile/WorkSpaceButton.tsx (limited to 'src/mobile') diff --git a/src/mobile/MobileHome.scss b/src/mobile/MobileHome.scss new file mode 100644 index 000000000..e1566b622 --- /dev/null +++ b/src/mobile/MobileHome.scss @@ -0,0 +1,101 @@ +$navbar-height: 120px; +$pathbar-height: 50px; + +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: "Open Sans"; +} + +.homeContainer { + position: relative; + top: 200px; + overflow: scroll; + width: 100%; + left: 0; + height: calc(100% - 120px); + overflow-y: scroll; +} + +.homeButton { + width: 96%; + margin-left: 2.5%; + height: 250px; + border-radius: 30px; + margin-top: 15px; + margin-bottom: 15px; +} + +.iconRight { + position: absolute; + width: 50%; + height: 80px; + transform: translate(0, 50%); + right: 0px; + text-align: center; + font-size: 80; +} + +.iconLeft { + position: absolute; + width: 50%; + height: 80px; + transform: translate(0%, 50%); + left: 0px; + text-align: center; + font-size: 80; +} + +.textLeft { + position: absolute; + width: 50%; + left: 0px; + font-size: 40px; + text-align: left; + margin-left: 110px; + margin-top: 40px; + font-family: sans-serif; + font-weight: bold; +} + +.textRight { + position: absolute; + width: 50%; + right: 0px; + font-size: 40px; + text-align: right; + margin-right: 110px; + margin-top: 40px; + font-family: sans-serif; + font-weight: bold; +} + +.menuView { + position: absolute; + top: 135px; + left: 50%; + transform: translate(-50%, 0%); + display: flex; +} + +.iconView { + height: 60px; + width: 60px; + background-color: darkgray; + border-radius: 5px; + border-style: solid; + border-width: 2px; + border-color: black; +} + +.listView { + height: 60px; + width: 60px; + margin-left: 20; + background-color: darkgray; + border-radius: 5px; + border-style: solid; + border-width: 2px; + border-color: black; +} \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 052c8975a..6b75ce07d 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -6,7 +6,7 @@ import { 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, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; @@ -25,6 +25,7 @@ import { Transform } from '../client/util/Transform'; import { InkingControl } from '../client/views/InkingControl'; import "./MobileInterface.scss"; import "./MobileMenu.scss"; +import "./MobileHome.scss"; import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; @@ -32,26 +33,1056 @@ import { DockedFrameRenderer } from '../client/views/collections/CollectionDocki import { InkTool } from '../fields/InkField'; import { listSpec } from '../fields/Schema'; import { nullAudio, WebField } from '../fields/URLField'; +import GestureOverlay from "../client/views/GestureOverlay"; library.add(faTasks, 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, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft); + +// @observer +// 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; } +// // @observable private currentView: "main" | "ink" | "upload" = "main"; +// @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); +// @observable private renderView?: () => JSX.Element; +// @observable private sidebarActive = true; + +// public _activeDoc: Doc = this.mainDoc; +// public _homeDoc: Doc = this.mainDoc; +// private _homeMenu: boolean = true; + +// // private inkDoc?: Doc; +// public drawingInk: boolean = false; +// private _ink: boolean = false; + +// // private _uploadDoc: Doc = this.userDoc; +// private _child: Doc | null = null; +// private _parents: Array = []; +// private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); +// private _open: boolean = false; + +// constructor(props: Readonly<{}>) { +// super(props); +// MobileInterface.Instance = this; +// } + +// @action +// componentDidMount = () => { +// library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); + +// if (this.userDoc && !this.mainContainer) { +// this.userDoc.activeMobile = this._homeDoc; +// } + +// InkingControl.Instance.switchTool(InkTool.None); +// MobileInterface.Instance.drawingInk = false; +// InkingControl.Instance.updateSelectedColor("#FF0000"); +// InkingControl.Instance.switchWidth("2"); +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } + +// @action +// switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { +// if (!this.userDoc) return; + +// this.userDoc.activeMobile = doc(this.userDoc); +// onSwitch && onSwitch(); + +// this.renderView = renderView; +// } + +// onSwitchInking = () => { +// const button = document.getElementById("inkButton") as HTMLElement; +// const color = InkingControl.Instance.selectedColor; +// button.style.backgroundColor = this._ink ? "white" : color; +// button.style.color = this._ink ? "black" : "white"; + +// if (!this._ink) { +// console.log("INK IS ACTIVE"); +// InkingControl.Instance.switchTool(InkTool.Pen); +// MobileInterface.Instance.drawingInk = true; +// this._ink = true; +// } else { +// console.log("INK IS INACTIVE"); +// InkingControl.Instance.switchTool(InkTool.None); +// MobileInterface.Instance.drawingInk = false; +// this._ink = false; +// } +// } + +// 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", +// }); +// } + +// back = () => { +// let header = document.getElementById("header") as HTMLElement; +// let doc = Cast(this._parents.pop(), Doc) as Doc; +// if (doc === Cast(this._library, Doc) as Doc) { +// this._child = null; +// this.userDoc.activeMobile = this._library; +// } else if (doc === Cast(this._homeDoc, Doc) as Doc) { +// this._homeMenu = true; +// this._parents = []; +// this._activeDoc = this._homeDoc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } else { +// if (doc) { +// this._child = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// header.textContent = String(doc.title); +// } +// } +// if (doc) { +// this._activeDoc = doc; +// } +// this._ink = false; +// } + +// returnHome = () => { +// if (this._homeMenu === false || this._open === true) { +// this._homeMenu = true; +// this._parents = []; +// this._activeDoc = this._homeDoc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } +// if (this._open) { +// this.toggleSidebar(); +// } +// } + +// returnMain = () => { +// this._parents = []; +// // this.toggleSidebar(); +// this._activeDoc = this._library; +// this.switchCurrentView((userDoc: Doc) => this._library); +// this._homeMenu = false; +// this._child = null; +// } + +// displayWorkspaces = () => { +// if (this.mainContainer) { +// const backgroundColor = () => "white"; +// if (this._activeDoc.title === "mobile audio") { +// return ( +//
+// window.screen.width} +// PanelHeight={() => window.screen.height} +// renderDepth={0} +// focus={emptyFunction} +// backgroundColor={backgroundColor} +// parentActive={returnTrue} +// whenActiveChanged={emptyFunction} +// bringToFront={emptyFunction} +// ContainingCollectionView={undefined} +// ContainingCollectionDoc={undefined} +// /> +//
+// ); +// } else { +// return ( +//
+// +//
+// ); +// } +// } +// } + +// returnWidth = () => 2000; +// returnHeight = () => 2000; + +// handleClick(doc: Doc) { +// let 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 { +// this._parents.push(this._activeDoc); +// this._activeDoc = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// this._child = doc; +// } + +// // let sidebar = document.getElementById("sidebar") as HTMLElement; +// // sidebar.classList.toggle('active'); +// } + +// createPathname = () => { +// let docArray = []; +// this._parents.map((doc: Doc, index: any) => { +// // if (doc === this.mainDoc) { +// // pathname = pathname; +// // } else if (doc.type === "audio" || doc.type === "presentation") { +// // pathname = pathname; +// // } else if (doc.type !== "collection") { +// // pathname = pathname; +// // } else { +// // pathname = pathname + " > " + doc.title; +// // titleArray.push(doc.title); +// // docArray.push(doc); +// // } +// docArray.push(doc); +// }); +// docArray.push(this._activeDoc); +// // if (this._activeDoc.title === "mobile audio") { +// // pathname = this._activeDoc.title; +// // } else if (this._activeDoc.title === "Presentation") { +// // pathname = this._activeDoc.title; +// // } else if (this._activeDoc === this.mainDoc) { +// // pathname = pathname; +// // } else { +// // pathname = pathname + " > " + this._activeDoc.title; +// // docArray.push(this._activeDoc); +// // titleArray.push(this._activeDoc.title); +// // } + +// return docArray; +// } + +// renderPathbar = () => { +// // if (this._homeMenu == false) { +// let docArray = this.createPathname(); +// let items = docArray.map((doc: Doc, index: any) => { +// if (index == 0) { +// return ( +//
+//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } else if (doc === this._activeDoc) { +// return ( +//
+// +//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } else { +// return ( +//
+// +//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } + +// }); +// if (this._parents.length !== 0) { +// return (
+//
+// {items} +//
+//
+// +//
+//
+//
); +// } else { +// return (
+//
+// {items} +//
+//
+//
); +// } +// // } +// // } else { + +// // return ( +// //
+// //
+// //
+// //
this.returnHome()}>Home +// //
+// //
+// //
+// //
+// //
+// // ); +// // } + +// // } +// } + +// handlePathClick = (doc: Doc, index: number) => { +// if (doc === this._library) { +// this._activeDoc = doc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._parents.length = index; +// } else if (doc === this._homeDoc) { +// this.returnHome(); +// } else { +// console.log(index); +// this._activeDoc = doc; +// this._child = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._parents.length = index; +// } +// } + +// @action +// toggleSidebar = () => this.sidebarActive = !this.sidebarActive + +// switchToLibrary = () => { +// this._parents.push(this._activeDoc); +// this.switchCurrentView((userDoc: Doc) => this._library); +// this._activeDoc = this._library; +// this._homeMenu = false; +// this.toggleSidebar(); +// } + +// // renderDefaultContent = () => { +// // let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { +// // if (doc.type !== "ink") { +// // return ( +// //
doc.click}>{doc.title} +// //
); +// // } +// // }); + +// // if (this._homeMenu === true) { +// // return ( +// //
+// //
+// // +// // +// // +// //
+// // {this.renderPathbar()} +// // +// //
+// // ); +// // } + +// // const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; +// // const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { +// // return ( +// //
this.handleClick(doc)}>{doc.title} +// //
{doc.type}
+// // +// //
); +// // }); +// // return ( +// // <> +// //
+// //
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
+// //
+// //
+// //
+// //
{this.createPathname()}
+// //
+// //
+// // +// // {this._child ? +// // <> +// //
←
+// //
{buttons}
+// //
Home
+// // : +// // <> +// // {buttons} +// // {/*
+// // Library +// //
*/} +// // +// //
Record Audio
+// //
Presentation
+// //
SettingsManager.Instance.open()}>Settings
+// // +// // } +// //
+// // {this._child ? null :
{this.renderView}
} +// // +// // ); +// // } + +// renderDefaultContent = () => { +// let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
doc.click}>{doc.title} +//
); +// } +// }); + +// if (this._homeMenu === true) { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +//
+// ); +// } +// const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; +// let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
this.handleClick(doc)}>{doc.title} +//
{doc.type}
+// +//
); +// } +// }); + +// if (this._child) { +// buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
this.handleClick(doc)}>{doc.title} +//
{doc.type}
+// +//
); +// } +// }); +// } + +// if (!this._child) { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +// {/*
+// {this.renderView} +//
*/} +//
+// ); +// } +// else { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +//
+// ); +// } +// } + +// recordAudio = async () => { +// // upload to server with known URL +// if (this._activeDoc.title !== "mobile audio") { +// 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); +// if (audioDoc) { +// console.log("audioClicked: " + audioDoc.title); +// this._activeDoc = audioDoc; +// this.switchCurrentView((userDoc: Doc) => audioDoc); +// this._homeMenu = false; +// // this.toggleSidebar(); +// } +// // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; +// // this.audioState = await audioDoc.getProto; +// // if (this.audioState) { +// // console.log(this.audioState); +// // const data = Cast(audioRightSidebar.data, listSpec(Doc)); +// // if (data) { +// // data.push(audioDoc); +// // } +// // } +// } + +// uploadAudio = () => { +// const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; +// const audioDoc = this._activeDoc; +// const data = Cast(audioRightSidebar.data, listSpec(Doc)); +// console.log(audioDoc.proto); +// if (data) { +// data.push(audioDoc); +// } +// // this.recordAudio(); +// } + +// uploadAudioButton = () => { +// if (this._activeDoc.type === "audio") { +// return
+// +//
; +// } +// } + +// toggleSelector = () => { +// console.log("toggle selector!"); +// let toolbar = document.getElementById("toolbar") as HTMLElement; +// toolbar.classList.toggle('active'); +// } + +// colorTool = () => { +// if (this._activeDoc._viewType === "docking") { +// const color = InkingControl.Instance.selectedColor; +// console.log(color); +// return ( +//
+//
+//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); +// Doc.UserDoc().inkColor = "rgb(255,0,0)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); +// Doc.UserDoc().inkColor = "rgb(0,128,0)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); +// Doc.UserDoc().inkColor = "rgb(0,0,255)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
+//
+// ) => InkingControl.Instance.switchWidth(e.target.value)} /> +//
+//
+//
+// ); +// } +// } + +// drawInk = () => { +// if (this._activeDoc._viewType === "docking") { +// const inkIsOn = this._ink; +// return
+// +//
; +// } +// } + +// downloadDocument = () => { +// if (this._activeDoc.type === "image") { +// const url = this._activeDoc["data-path"]?.toString(); +// return
{ +// window.open(url); +// console.log(url); +// }}> +// +//
; +// } +// } + +// pinToPresentation = () => { +// // Only making button available if it is an image +// if (this._activeDoc.type === "image") { +// const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); +// return
{ +// if (isPinned) { +// DockedFrameRenderer.UnpinDoc(this._activeDoc); +// } +// else { +// DockedFrameRenderer.PinDoc(this._activeDoc); +// } +// }}> +// +//
; +// } +// } + +// setupDefaultPresentation = () => { +// if (this._activeDoc.title !== "Presentation") { +// this._parents.push(this._activeDoc); +// } + +// const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + +// if (presentation) { +// console.log(this._activeDoc.mobile); +// console.log("presentation clicked: " + presentation.title); +// this._activeDoc = presentation; +// this.switchCurrentView((userDoc: Doc) => presentation); +// this._homeMenu = false; +// // this.toggleSidebar(); +// } +// } + +// // mobileHome = () => { +// // return ( +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+// // ); +// // } + +// renderActiveCollection = (userDoc: Doc) => { +// if (this.activeContainer) { +// const active = Cast(this.activeContainer.data, listSpec(Doc)); +// if (active) { +// return ( +//
HELLO!
+// ); +// } +// } +// } + +// onBack = (e: React.MouseEvent) => { +// this.switchCurrentView((userDoc: Doc) => this.mainDoc); +// InkingControl.Instance.switchTool(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 = 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(); +// } +// } +// } + +// onDragOver = (e: React.DragEvent) => { +// e.preventDefault(); +// e.stopPropagation(); +// } + +// render() { +// // const content = this.currentView === "main" ? this.mainContent : +// // this.currentView === "ink" ? this.inkContent : +// // this.currentView === "upload" ? this.uploadContent : <>; +// return ( +//
+// {/* +// +// {this.renderView ? this.renderView() : this.renderDefaultContent()} +// */} +// {/* */} +// +// {/* {this.menuOptions()} */} +// {/* {this.displayHome()} */} +//
+// {this.pinToPresentation()} +// {this.downloadDocument()} +// {this.drawInk()} +// {this.uploadAudioButton()} +// {this.colorTool()} +//
+// + +// +// {this.renderDefaultContent()} +// {this.displayWorkspaces()} +// {/* */} +// {/* +// +// */} +// {/* */} +// {/*
+// {this.renderDefaultContent()} +//
*/} +// {/* */} +// {/* */} +// {/* +// */} +// {/* +// +// */} +//
+// ); +// } +// } + +// 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(); }); +// Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +// Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); +// Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); +// // WAS 2 + +// // 1 +// // renderUploadContent() { +// // if (this.mainContainer) { +// // return ( +// //
+// //
+// // +// // {/* */} +// // {/* */} +// // +// //
+// // window.screen.width} +// // PanelHeight={() => window.screen.height} +// // renderDepth={0} +// // focus={emptyFunction} +// // backgroundColor={returnEmptyString} +// // parentActive={returnTrue} +// // whenActiveChanged={emptyFunction} +// // bringToFront={emptyFunction} +// // ContainingCollectionView={undefined} +// // ContainingCollectionDoc={undefined} /> +// //
+// // ); +// // } +// // } + +// // 2 +// // Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); +// // Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); +// // Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); +// // Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); +// // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); + + +// // 3 +// // renderInkingContent = () => { +// // console.log("rendering inking content"); +// // // TODO: support panning and zooming +// // // TODO: handle moving of ink strokes +// // if (this.mainContainer) { +// // return ( +// //
+// //
+// //
+// // +// //
+// //
+// // +// //
+// //
+// // +// // +// //
+// //
+// // +// // +// //
+// // ); +// // } +// // } @observer 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; } - // @observable private currentView: "main" | "ink" | "upload" = "main"; - @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); + // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } + @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); @observable private renderView?: () => JSX.Element; - @observable private sidebarActive = true; + @observable private audioState: any; public _activeDoc: Doc = this.mainDoc; + public _homeDoc: Doc = this.mainDoc; + private _homeMenu: boolean = true; // private inkDoc?: Doc; public drawingInk: boolean = false; @@ -59,9 +1090,11 @@ export class MobileInterface extends React.Component { // private _uploadDoc: Doc = this.userDoc; private _child: Doc | null = null; private _parents: Array = []; - private _menu: Doc = this.mainDoc; + private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); private _open: boolean = false; - private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + + // private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + private _ink: boolean = false; constructor(props: Readonly<{}>) { super(props); @@ -71,33 +1104,31 @@ 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.mainDoc; + this.userDoc.activeMobile = this._homeDoc; } + InkingControl.Instance.switchTool(InkTool.None); + MobileInterface.Instance.drawingInk = false; + InkingControl.Instance.updateSelectedColor("#FF0000"); + console.log(this.userDoc.inkColor); + console.log(InkingControl.Instance.selectedColor); + InkingControl.Instance.switchWidth("2"); + this.switchCurrentView((userDoc: Doc) => this._homeDoc); } @action switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { if (!this.userDoc) return; - this.userDoc.activeMobile = doc(this.userDoc); + Doc.UserDoc().activeMobile = doc(this.userDoc); onSwitch && onSwitch(); this.renderView = renderView; } - onSwitchInking = () => { - InkingControl.Instance.switchTool(InkTool.Pen); - MobileInterface.Instance.drawingInk = true; - - DocServer.Mobile.dispatchOverlayTrigger({ - enableOverlay: true, - width: window.innerWidth, - height: window.innerHeight - }); - } - onSwitchUpload = async () => { let width = 300; let height = 300; @@ -123,70 +1154,167 @@ export class MobileInterface extends React.Component { }); } + toggleSidebar = () => { + if (this._open === false) { + this._open = true; + } else { + this._open = false; + } + console.log("clicked"); + let menuButton = document.getElementById("menuButton") as HTMLElement; + menuButton.classList.toggle('active'); + + let sidebar = document.getElementById("sidebar") as HTMLElement; + sidebar.classList.toggle('active'); + + let header = document.getElementById("header") as HTMLElement; + + if (!sidebar.classList.contains('active')) { + header.textContent = String(this._activeDoc.title); + } else { + header.textContent = "library"; + } + } + + switchToLibrary = () => { + this._parents.push(this._activeDoc); + this.switchCurrentView((userDoc: Doc) => this._library); + this._activeDoc = this._library; + this._homeMenu = false; + this.toggleSidebar(); + } + back = () => { - const doc = Cast(this._parents.pop(), Doc) as Doc; - if (doc === Cast(this._menu, Doc) as Doc) { + let header = document.getElementById("header") as HTMLElement; + let doc = Cast(this._parents.pop(), Doc) as Doc; + if (doc === Cast(this._library, Doc) as Doc) { + this._child = null; + this.userDoc.activeMobile = this._library; + } else if (doc === Cast(this._homeDoc, Doc) as Doc) { + this._homeMenu = true; + this._parents = []; + this._activeDoc = this._homeDoc; this._child = null; - this.userDoc.activeMobile = this.mainDoc; + this.switchCurrentView((userDoc: Doc) => this._homeDoc); } else { if (doc) { this._child = doc; this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; + header.textContent = String(doc.title); } } if (doc) { this._activeDoc = doc; } + this._ink = false; } returnHome = () => { + if (this._homeMenu === false || this._open === true) { + this._homeMenu = true; + this._parents = []; + this._activeDoc = this._homeDoc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => this._homeDoc); + } + if (this._open) { + this.toggleSidebar(); + } + } + + returnMain = () => { + console.log("home"); this._parents = []; - this._activeDoc = this._menu; - this.switchCurrentView((userDoc: Doc) => this._menu); + // this.toggleSidebar(); + this._activeDoc = this._library; + this.switchCurrentView((userDoc: Doc) => this._library); + this._homeMenu = false; this._child = null; } + // @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); } + displayWorkspaces = () => { if (this.mainContainer) { const backgroundColor = () => "white"; - return ( -
- window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - focus={emptyFunction} - backgroundColor={backgroundColor} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - /> -
- ); + if (this._activeDoc.title === "mobile audio") { + return ( +
+ window.screen.width} + PanelHeight={() => window.screen.height} + renderDepth={0} + focus={emptyFunction} + backgroundColor={backgroundColor} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> +
+ ); + } else { + return ( +
+ +
+ ); + } } } + returnWidth = () => 2000; + returnHeight = () => 2000; + handleClick(doc: Doc) { - const children = DocListCast(doc.data); + console.log(screen.height) + console.log(screen.width) + let 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"); @@ -194,6 +1322,7 @@ export class MobileInterface extends React.Component { this._parents.push(this._activeDoc); this._activeDoc = doc; this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; this._child = doc; } @@ -201,167 +1330,426 @@ export class MobileInterface extends React.Component { // sidebar.classList.toggle('active'); } + /** + * Handles creation of array which is then rendered in renderPathbar() + */ createPathname = () => { - let pathname = ""; + // let pathname = 'workspaces'; + // let titleArray = []; + let docArray = []; this._parents.map((doc: Doc, index: any) => { - if (doc === this.mainDoc) { - pathname = pathname + doc.title; + // if (doc === this.mainDoc) { + // pathname = pathname; + // } else if (doc.type === "audio" || doc.type === "presentation") { + // pathname = pathname; + // } else if (doc.type !== "collection") { + // pathname = pathname; + // } else { + // pathname = pathname + " > " + doc.title; + // titleArray.push(doc.title); + // docArray.push(doc); + // } + docArray.push(doc); + }); + docArray.push(this._activeDoc); + // if (this._activeDoc.title === "mobile audio") { + // pathname = this._activeDoc.title; + // } else if (this._activeDoc.title === "Presentation") { + // pathname = this._activeDoc.title; + // } else if (this._activeDoc === this.mainDoc) { + // pathname = pathname; + // } else { + // pathname = pathname + " > " + this._activeDoc.title; + // docArray.push(this._activeDoc); + // titleArray.push(this._activeDoc.title); + // } + + return docArray; + } + + // Renders the graphical pathbar + renderPathbar = () => { + // if (this._homeMenu == false) { + let docArray = this.createPathname(); + let items = docArray.map((doc: Doc, index: any) => { + if (index == 0) { + return ( +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
); + } else if (doc === this._activeDoc) { + return ( +
+ +
this.handlePathClick(doc, index)}>{doc.title} +
+
); } else { - pathname = pathname + " > " + doc.title; + return ( +
+ +
this.handlePathClick(doc, index)}>{doc.title} +
+
); } + }); - if (this._activeDoc === this.mainDoc) { - pathname = pathname + this._activeDoc.title; + if (this._parents.length !== 0) { + return (
+
+ {items} +
+
+ +
+
+
); } else { - pathname = pathname + " > " + this._activeDoc.title; + return (
+
+ {items} +
+
+
); } - return pathname; - } + // } + // } else { - @action - toggleSidebar = () => this.sidebarActive = !this.sidebarActive + // return ( + //
+ //
+ //
+ //
this.returnHome()}>Home + //
+ //
+ //
+ //
+ //
+ // ); + // } - openLibrary() { - this._activeDoc = this.mainDoc; - this.switchCurrentView(() => this.mainDoc); - this._child = this._library; + // } + } + + handlePathClick = (doc: Doc, index: number) => { + if (doc === this._library) { + this._activeDoc = doc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => doc); + this._parents.length = index; + } else if (doc === this._homeDoc) { + this.returnHome(); + } else { + console.log(index); + this._activeDoc = doc; + this._child = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._parents.length = index; + } } renderDefaultContent = () => { - const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; - const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { - return ( -
this.handleClick(doc)}>{doc.title} -
{doc.type}
- -
); - }); - return ( - <> -
-
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
+ let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return (
-
-
-
{this.createPathname()}
+ className="item" + key={index} + onClick={() => doc.click}>{doc.title} +
); + } + }); + + if (this._homeMenu === true) { + return ( +
+
+ + + +
+ {this.renderPathbar()} +
-
- - {this._child ? - <> -
←
-
{buttons}
-
Home
- : - <> + ); + } + const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return ( +
this.handleClick(doc)}>{doc.title} +
{doc.type}
+ +
); + } + }); + + if (this._child) { + buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return ( +
this.handleClick(doc)}>{doc.title} +
{doc.type}
+ +
); + } + }); + } + + if (!this._child) { + return ( +
+
+ + + +
+ {this.renderPathbar()} + +
+ {/*
+ {this.renderView} +
*/}
- {this._child ? null :
{this.renderView}
} - - ); + ); + } + else { + return ( +
+
+ + + +
+ {this.renderPathbar()} + +
+ ); + } } - pinToPresentation = () => { - // Only making button available if it is an image + uploadAudioButton = () => { + if (this._activeDoc.type === "audio") { + return
+ +
; + } + } + + toggleSelector = () => { + console.log("toggle selector!"); + let toolbar = document.getElementById("toolbar") as HTMLElement; + toolbar.classList.toggle('active'); + } + + colorTool = () => { + if (this._activeDoc._viewType === "docking") { + const color = InkingControl.Instance.selectedColor; + console.log(color); + return ( +
+
+
+
{ + InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); + Doc.UserDoc().inkColor = "rgb(255,0,0)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
{ + InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); + Doc.UserDoc().inkColor = "rgb(0,128,0)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
{ + InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); + Doc.UserDoc().inkColor = "rgb(0,0,255)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
+
+ ) => InkingControl.Instance.switchWidth(e.target.value)} /> +
+
+
+ ); + } + } + + onSwitchInking = () => { + const button = document.getElementById("inkButton") as HTMLElement; + const color = InkingControl.Instance.selectedColor; + button.style.backgroundColor = this._ink ? "white" : color; + button.style.color = this._ink ? "black" : "white"; + + if (!this._ink) { + console.log("INK IS ACTIVE"); + InkingControl.Instance.switchTool(InkTool.Pen); + MobileInterface.Instance.drawingInk = true; + this._ink = true; + } else { + console.log("INK IS INACTIVE"); + InkingControl.Instance.switchTool(InkTool.None); + MobileInterface.Instance.drawingInk = false; + this._ink = false; + } + } + + drawInk = () => { + if (this._activeDoc._viewType === "docking") { + const inkIsOn = this._ink; + return
+ +
; + } + } + + downloadDocument = () => { if (this._activeDoc.type === "image") { - const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); - return
{ - if (isPinned) { - DockedFrameRenderer.UnpinDoc(this._activeDoc); - } - else { - DockedFrameRenderer.PinDoc(this._activeDoc); - } + window.open(url); + console.log(url); }}> -
; } } recordAudio = async () => { - // upload to server with known URL - this._parents.push(this._activeDoc); + // upload to server with known URL + if (this._activeDoc.title !== "mobile audio") { + 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); if (audioDoc) { console.log("audioClicked: " + audioDoc.title); this._activeDoc = audioDoc; this.switchCurrentView((userDoc: Doc) => audioDoc); - this.toggleSidebar(); - } - const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - if (audioRightSidebar) { - console.log(audioRightSidebar.title); - const data = Cast(audioRightSidebar.data, listSpec(Doc)); - if (data) { - data.push(audioDoc); - } + this._homeMenu = false; + // this.toggleSidebar(); } + // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + // this.audioState = await audioDoc.getProto; + // if (this.audioState) { + // console.log(this.audioState); + // const data = Cast(audioRightSidebar.data, listSpec(Doc)); + // if (data) { + // data.push(audioDoc); + // } + // } } - openDefaultPresentation = () => { - this._parents.push(this._activeDoc); - const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; - - if (presentation) { - console.log("presentation clicked: " + presentation.title); - this._activeDoc = presentation; - this.switchCurrentView((userDoc: Doc) => presentation); - this.toggleSidebar(); + uploadAudio = () => { + const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + const audioDoc = this._activeDoc; + const data = Cast(audioRightSidebar.data, listSpec(Doc)); + console.log(audioDoc.proto); + if (data) { + data.push(audioDoc); } + // this.recordAudio(); } - // mobileHome = () => { - // return ( - //
- //
- - //
- //
- - //
- //
- - //
- //
- - //
- //
- - //
- //
- // ); + // renderActiveCollection = (userDoc: Doc) => { + // if (this.activeContainer) { + // const active = Cast(this.activeContainer.data, listSpec(Doc)); + // if (active) { + // return ( + //
HELLO!
+ // ); + // } + // } // } - renderActiveCollection = (userDoc: Doc) => { - if (this.activeContainer) { - const active = Cast(this.activeContainer.data, listSpec(Doc)); - if (active) { - return ( -
HELLO!
- ); - } - } - } - onBack = (e: React.MouseEvent) => { this.switchCurrentView((userDoc: Doc) => this.mainDoc); InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool @@ -445,6 +1833,44 @@ export class MobileInterface extends React.Component { } } + pinToPresentation = () => { + // Only making button available if it is an image + if (this._activeDoc.type === "image") { + const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); + return
{ + if (isPinned) { + DockedFrameRenderer.UnpinDoc(this._activeDoc); + } + else { + DockedFrameRenderer.PinDoc(this._activeDoc); + } + }}> + +
; + } + } + + setupDefaultPresentation = () => { + if (this._activeDoc.title !== "Presentation") { + this._parents.push(this._activeDoc); + } + + const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + + if (presentation) { + console.log(this._activeDoc.mobile); + console.log("presentation clicked: " + presentation.title); + this._activeDoc = presentation; + this.switchCurrentView((userDoc: Doc) => presentation); + this._homeMenu = false; + // this.toggleSidebar(); + } + } + onDragOver = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); @@ -453,7 +1879,7 @@ export class MobileInterface extends React.Component { render() { // const content = this.currentView === "main" ? this.mainContent : // this.currentView === "ink" ? this.inkContent : - // this.currentView === "upload" ? this.uploadContent : <>; + // this.currentView === "upload" ? this.uploadContent : <>;onDragOver={this.onDragOver} return (
{/* @@ -462,16 +1888,28 @@ export class MobileInterface extends React.Component { */} {/* */} - {this.displayWorkspaces()} - {this.pinToPresentation()} + {/* {this.menuOptions()} */} + {/* {this.displayHome()} */} +
+ {this.pinToPresentation()} + {this.downloadDocument()} + {this.drawInk()} + {this.uploadAudioButton()} + {this.colorTool()} +
+ + {this.displayWorkspaces()} + {this.renderDefaultContent()} + + {/* */} {/* */} {/* */} -
+ {/*
{this.renderDefaultContent()} -
+
*/} {/* */} {/* */} {/* @@ -485,6 +1923,13 @@ export class MobileInterface extends React.Component { } 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(); }); +Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); +Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); + + // WAS 2 // 1 @@ -527,15 +1972,7 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render // } // } -// 2 -// Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); -// Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); -// Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); -// Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); - // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); - - -// 3 +// 3 // renderInkingContent = () => { // console.log("rendering inking content"); // // TODO: support panning and zooming @@ -583,4 +2020,4 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render //
// ); // } - // } + // } \ No newline at end of file diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 250340e36..f600ff637 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -83,15 +83,17 @@ body { .sidebar { position: absolute; - top: 200px; + top: 120px; opacity: 0; right: -100%; width: 100%; - height: calc(100% - (200px)); - z-index: 5; + height: calc(100% - (120px)); + z-index: 101; background-color: whitesmoke; transition: all 400ms ease 50ms; padding: 20px; + // overflow-y: auto; + // -webkit-overflow-scrolling: touch; // border-right: 5px solid black; } @@ -106,14 +108,23 @@ body { font-size: 35px; text-transform: uppercase; color: black; + } -.sidebar .home { +.sidebar .ink:focus { + outline: 1px solid blue; +} + +.sidebarButtons { + top: 80px; + position: relative; +} + +.home { position: absolute; - top: -135px; - right: calc(50% + 80px); - transform: translate(0%, -50%); - font-size: 40; + top: 30px; + left: 30px; + font-size: 60; user-select: none; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; @@ -173,23 +184,26 @@ body { .back { position: absolute; - top: -140px; - left: 50px; - transform: translate(0%, -50%); - color: black; - font-size: 60; + top: 44%; + left: 42px; + background-color: black; + width: 50px; + height: 50px; + text-align: center; + border-radius: 10px; + transform: translate(0, -50%); + font-size: 25px; user-select: none; - text-transform: uppercase; z-index: 100; - font-family: Arial, Helvetica, sans-serif; } .pathbar { position: absolute; top: 118px; + left: 0px; background: #1a1a1a; - z-index: 20; + z-index: 120; border-radius: 0px; width: 100%; height: 80px; @@ -200,8 +214,8 @@ body { position: relative; font-size: 25; top: 50%; - width: 90%; - left: 3%; + width: 86%; + left: 12%; color: whitesmoke; transform: translate(0%, -50%); z-index: 20; @@ -214,27 +228,71 @@ body { text-transform: uppercase; } -.homeContainer { - position: relative; - top: 200px; - height: calc(100% - 250px); - width: 90%; - overflow: scroll; - left: 5%; - background-color: lightpink; -} - -.pinButton { +.docButton { position: relative; width: 100px; height: 100px; font-size: 90px; text-align: center; - left: 50%; - transform: translate(-50%, 0); border-style: solid; border-radius: 50px; border-width: medium; - background-color: pink; + margin: 10px; z-index: 100; +} + +.docButtonContainer { + top: 90%; + position: absolute; + display: flex; + transform: translate(-50%, 0); + left: 50%; + z-index: 100; +} + +.scrollmenu { + overflow: auto; + white-space: nowrap; +} + +.pathbarItem { + position: relative; + display: inline-flex; + color: whitesmoke; + text-align: center; + transform: translate(100px, 0px); + font-size: 30px; + padding: 10px; + text-transform: uppercase; +} + +.pathbarText { + font-family: sans-serif; + text-align: center; + height: 50px; + padding: 10px; + background-color: rgb(48, 40, 40); + font-size: 30px; + border-radius: 10px; + text-transform: uppercase; + margin-left: 20px; + position: relative; +} + + +.pathIcon { + transform: translate(0px, 8px); + position: relative; +} + +.hidePath { + position: absolute; + height: 100%; + width: 200px; + left: 0px; + top: 0px; + background-image: linear-gradient(to right, #1a1a1a, rgba(255, 0, 0, 0)); + text-align: center; + user-select: none; + z-index: 99; } \ No newline at end of file diff --git a/src/mobile/SideBar.scss b/src/mobile/SideBar.scss deleted file mode 100644 index fb6d13a2b..000000000 --- a/src/mobile/SideBar.scss +++ /dev/null @@ -1,79 +0,0 @@ -* { - margin:0px; - padding:0px; - box-sizing:border-box; - font-family:"Open Sans"; -} -body { - overflow:hidden; -} -.navbar { - position:fixed; - top:0px; - left:0px; - width:100vw; - height:50px; - background:rgba(0,0,0,0.95); -} -.navbar .toggle-btn { - position:absolute; - right:20px; - height:50px; - width:50px; - transition:all 300ms ease-in-out 200ms; -} -.navbar .toggle-btn span { - position:absolute; - top:50%; - left:50%; - transform:translate(-50%,-50%); - width:70%; - height:4px; - background:#eee; - transition:all 200ms ease; -} -.navbar .toggle-btn span:nth-child(1) { - transition:top 200ms ease-in-out; - top:30%; -} -.navbar .toggle-btn span:nth-child(3) { - transition:top 200ms ease-in-out; - top:70%; -} -.navbar .toggle-btn.active { - transition:transform 200ms ease-in-out 200ms; - transform:rotate(135deg); -} -.navbar .toggle-btn.active span:nth-child(1) { - top:50%; -} -.navbar .toggle-btn.active span:nth-child(2) { - transform:translate(-50%,-50%) rotate(90deg); -} -.navbar .toggle-btn.active span:nth-child(3) { - top:50%; -} -.sidebar { - position:absolute; - top:50px; - opacity:0; - right:-100%; - width:100vw; - height:calc(100vh - 45px); - z-index:5; - background:rgba(40,40,40,1); - transition:all 400ms ease 50ms; - padding:15px; -} -.sidebar .item { - width:100%; - padding:13px 6px; - border-bottom:1px solid rgba(200,200,200,0.7); - font-size:18px; - text-transform:uppercase; - color:rgba(250,250,250,0.95); -} -.sidebar.active { - right:0%; - opacity:1; -} \ No newline at end of file diff --git a/src/mobile/SideBar.tsx b/src/mobile/SideBar.tsx deleted file mode 100644 index a06069ed8..000000000 --- a/src/mobile/SideBar.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React = require("react"); -import { observer } from "mobx-react"; -import "./SideBar.scss"; -import { computed } from "mobx"; -import { DocumentView } from '../client/views/nodes/DocumentView'; - -@observer -export class SideBar extends React.Component<{ views: (DocumentView | undefined)[], stack?: any }, {}>{ - - constructor(props: { views: (DocumentView | undefined)[] }) { - super(props); - } - - @computed - onClick() { - document.getElementsByClassName('sidebar') - [0].classList.toggle('active'); - } - - render() { - return ( - <> -
-
- - - -
-
-
-
Workspace1
-
Workspace2
-
Workspace3
-
- - ); - } - -} \ No newline at end of file diff --git a/src/mobile/WorkSpaceButton.scss b/src/mobile/WorkSpaceButton.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/mobile/WorkSpaceButton.tsx b/src/mobile/WorkSpaceButton.tsx deleted file mode 100644 index 70c3e6edc..000000000 --- a/src/mobile/WorkSpaceButton.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React = require('react'); -import { observer } from "mobx-react"; -import { observable } from 'mobx'; - -interface IProps { - open: boolean; -} - -@observer -export class MenuButton extends React.Component { - @observable static Instance: MenuButton; - - -} \ No newline at end of file -- cgit v1.2.3-70-g09d2