diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 16 | ||||
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 197 | ||||
| -rw-r--r-- | src/mobile/MobileMenu.scss | 22 |
3 files changed, 89 insertions, 146 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 3d38e7370..d99d11c1f 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -496,8 +496,8 @@ export class CurrentUserUtils { }); } - // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. - // when clicked, this panel will be displayed in the target container (ie, sidebarContainer) + // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. + // when clicked, this panel will be displayed in the target container (ie, sidebarContainer) static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) { // setup a masonry view of all he creators const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc); @@ -588,7 +588,7 @@ export class CurrentUserUtils { return doc["tabs-button-library"] as Doc; } - // setup the Search button which will display the search panel. + // setup the Search button which will display the search panel. static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) { if (doc["tabs-button-search"] === undefined) { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ @@ -647,7 +647,7 @@ export class CurrentUserUtils { 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: 'uploadMobileImage()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, + { title: "UPLOAD", icon: "upload", click: 'console.log("hi")', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it 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: "INK", icon: "pen-nib", backgroundColor: "lightgrey", info: "Doodle and draw with ink on your mobile and have it directly available on Dash Web" }, { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" } @@ -764,13 +764,13 @@ export class CurrentUserUtils { doc.activePen = doc; doc.inkColor = StrCast(doc.backgroundColor, "rgb(0, 0, 0)"); doc.fontSize = NumCast(doc.fontSize, 12); - doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // - doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // + doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // + doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]); 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.setupOverlays(doc); // documents in overlay layer + this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels @@ -809,4 +809,4 @@ export class CurrentUserUtils { Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); }); Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); }); -Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); });
\ No newline at end of file +Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); }); diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index e2de7fed2..0f6f51295 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -892,7 +892,7 @@ library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTras // // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); -// // 3 +// // 3 // // renderInkingContent = () => { // // console.log("rendering inking content"); // // // TODO: support panning and zooming @@ -953,6 +953,7 @@ export class MobileInterface extends React.Component { @observable private renderView?: () => JSX.Element; @observable private audioState: any; @observable private activeToolbar: boolean = false; + @observable private sidebarActive: boolean = false; public _activeDoc: Doc = this.mainDoc; public _homeDoc: Doc = this.mainDoc; @@ -987,8 +988,6 @@ export class MobileInterface extends React.Component { 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); } @@ -1028,30 +1027,30 @@ export class MobileInterface extends React.Component { }); } - /** - * Handles the functionality to toggle the sidebar - */ - 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'); + @action + toggleSidebar = () => this.sidebarActive = !this.sidebarActive - let sidebar = document.getElementById("sidebar") as HTMLElement; - sidebar.classList.toggle('active'); + // 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 header = document.getElementById("header") as HTMLElement; + // let sidebar = document.getElementById("sidebar") as HTMLElement; + // //sidebar.classList.toggle('active'); - if (!sidebar.classList.contains('active')) { - header.textContent = String(this._activeDoc.title); - } else { - header.textContent = "library"; - } - } + // let header = document.getElementById("header") as HTMLElement; + + // if (!sidebar.classList.contains('active')) { + // header.textContent = String(this._activeDoc.title); + // } else { + // header.textContent = "library"; + // } + // } /** * Method called when 'Library' button is pressed @@ -1061,7 +1060,7 @@ export class MobileInterface extends React.Component { this.switchCurrentView((userDoc: Doc) => this._library); this._activeDoc = this._library; this._homeMenu = false; - this.toggleSidebar(); + this.sidebarActive = true; } /** @@ -1097,14 +1096,14 @@ export class MobileInterface extends React.Component { * Return 'Home", which implies returning to 'Home' buttons */ returnHome = () => { - if (this._homeMenu === false || this._open === true) { + if (this._homeMenu === false || this.sidebarActive === true) { this._homeMenu = true; this._parents = []; this._activeDoc = this._homeDoc; this._child = null; this.switchCurrentView((userDoc: Doc) => this._homeDoc); } - if (this._open) { + if (this.sidebarActive) { this.toggleSidebar(); } } @@ -1230,32 +1229,9 @@ export class MobileInterface extends React.Component { // let titleArray = []; 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; } @@ -1344,7 +1320,6 @@ export class MobileInterface extends React.Component { } else if (doc === this._homeDoc) { this.returnHome(); } else { - console.log(index); this._activeDoc = doc; this._child = doc; this.switchCurrentView((userDoc: Doc) => doc); @@ -1359,7 +1334,7 @@ export class MobileInterface extends React.Component { <div className="item" key={index} - onClick={() => doc.proto?.onClick}>{doc.title} + onClick={() => doc.onClick}>{doc.title} </div>); } }); @@ -1370,6 +1345,7 @@ export class MobileInterface extends React.Component { <div className="navbar"> <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> <div className="header" id="header">{this._homeDoc.title}</div> + <div className="cover" id="cover" onClick={(e) => this.stop(e)}></div> <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}> <span></span> <span></span> @@ -1385,7 +1361,12 @@ export class MobileInterface extends React.Component { </div> ); } - const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + + let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + if (this._child) { + workspaces = this._child + } + let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { if (doc.type !== "ink") { return ( @@ -1399,88 +1380,39 @@ export class MobileInterface extends React.Component { } }); - if (this._child) { - buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { - if (doc.type !== "ink") { - return ( - <div - className="item" - key={index} - onClick={() => this.handleClick(doc)}>{doc.title} - <div className="type">{doc.type}</div> - <FontAwesomeIcon className="right" icon="angle-right" size="lg" /> - </div>); - } - }); - } - - if (!this._child) { - return ( - <div> - <div className="navbar"> - <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> - <div className="header" id="header">{this._homeDoc.title}</div> - <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}> - <span></span> - <span></span> - <span></span> - </div> - </div> - {this.renderPathbar()} - <div className="sidebar" id="sidebar"> - <div className="sidebarButtons"> - {buttons} - {/* <div className="item" key="library" onClick={this.openLibrary}> - Library - </div> */} - {/* <Uploader Document={workspaces} /> - <div className="item" key="audio" onClick={this.recordAudio}> - Record Audio - </div> - <div className="item" key="presentation" onClick={this.openDefaultPresentation}> - Presentation - </div> */} - {/* <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}> - Settings - </div> */} - <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}> - Ink On - </div> - </div> + return ( + <div> + <div className="navbar"> + <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> + <div className="header" id="header">{this.sidebarActive ? "library" : this._activeDoc.title}</div> + <div className={`toggle-btn ${this.sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}> + <span></span> + <span></span> + <span></span> </div> - {/* <div> - {this.renderView} - </div> */} </div> - ); - } - else { - return ( - <div> - <div className="navbar"> - <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} /> - <div className="header" id="header">library</div> - <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}> - <span></span> - <span></span> - <span></span> - </div> - </div> - {this.renderPathbar()} - <div className="sidebar" id="sidebar"> - <div className="sidebarButtons"> - {buttons} - <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}> - Ink On + {this.renderPathbar()} + <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}> + <div className="sidebarButtons"> + {this._child ? + <> + {buttons} + <div className="item" key="home" onClick={this.returnMain}> + Return to library </div> - <div className="item" key="home" onClick={this.returnMain}> - Home - </div> - </div> + </> : + <> + {buttons} + </> + } </div> </div> - ); - } + </div> + ); + } + + stop = (e: React.MouseEvent) => { + e.stopPropagation(); } uploadAudioButton = () => { @@ -1580,9 +1512,7 @@ export class MobileInterface extends React.Component { 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; @@ -1603,7 +1533,6 @@ export class MobileInterface extends React.Component { 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); } @@ -1900,4 +1829,4 @@ Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instan // </div> // ); // } - // }
\ No newline at end of file + // } diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 2641cdfd2..669b55601 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -22,6 +22,16 @@ body { border-bottom: 5px solid black; } +.navbar .cover { + position: absolute; + right: 20px; + top: 30px; + height: 70px; + width: 70px; + background-color: whitesmoke; + z-index: 200; +} + .navbar .toggle-btn { position: absolute; right: 20px; @@ -31,6 +41,10 @@ body { transition: all 300ms ease-in-out 200ms; } +.navbar .toggle-btn-home { + right: -200px; +} + .navbar .header { position: absolute; top: 50%; @@ -311,7 +325,7 @@ body { .toolbar.active { display: inline-block; - width: fit-content; + width: 300px; padding: 5px; opacity: 1; height: max-content; @@ -320,7 +334,7 @@ body { .toolbar .colorSelector { display: inline-flex; - width: fit-content; + width: max-content; padding: 5px; height: max-content; pointer-events: all; @@ -328,9 +342,9 @@ body { .widthSelector { display: inline-flex; - width: 90%; + width: max-content; height: 100px; - padding: 5px; + padding: 10px; } .slider { |