diff options
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 55 |
1 files changed, 32 insertions, 23 deletions
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 7ff7063cd..0665e79ed 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -27,8 +27,8 @@ import "./TopBar.scss"; export class TopBar extends React.Component { navigateToHome = () => { CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => { - Doc.UserDoc().activePage = "home"; - CurrentUserUtils.closeActiveDashboard(); // bcz: if we do this, we need some other way to keep track, for user convenience, of the last dashboard in use + Doc.UserDoc().activePage = "home"; + CurrentUserUtils.closeActiveDashboard(); // bcz: if we do this, we need some other way to keep track, for user convenience, of the last dashboard in use }); } render() { @@ -38,39 +38,48 @@ export class TopBar extends React.Component { <div style={{ pointerEvents: "all", background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container"> <div className="topbar-inner-container"> <div className="topbar-left"> - {activeDashboard ? <div className="topbar-button-text" onClick={e => { - ContextMenu.Instance.addItem({ description: "Logout", event: () => window.location.assign(Utils.prepend("/logout")), icon: "edit" }); - ContextMenu.Instance.displayMenu(e.clientX +5, e.clientY + 10); - }}>{Doc.CurrentUserEmail}</div> : (null)} + {activeDashboard ? + <> + <div className="topbar-button-text" onClick={e => { + ContextMenu.Instance.addItem({ description: "Logout", event: () => window.location.assign(Utils.prepend("/logout")), icon: "edit" }); + ContextMenu.Instance.displayMenu(e.clientX + 5, e.clientY + 10); + }}>{Doc.CurrentUserEmail}</div> + <div className="topbar-button-icon" onClick={this.navigateToHome}> + <FontAwesomeIcon icon="home" /> + </div> + </> + : (null)} + </div> <div className="topbar-center" > <div className="topbar-title" onClick={() => SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}> {activeDashboard ? StrCast(activeDashboard.title) : "Dash"} </div> <div className="topbar-button-icon" onClick={e => { - const dashView = DocumentManager.Instance.getDocumentView(activeDashboard); - ContextMenu.Instance.addItem({ description: "Open Dashboard View", event: this.navigateToHome, icon: "edit" }); - ContextMenu.Instance.addItem({ description: "Snapshot Dashboard", event: async () => { - const batch = UndoManager.StartBatch("snapshot"); - await CurrentUserUtils.snapshotDashboard(Doc.UserDoc()); - batch.end(); - }, icon: "edit" }); - dashView?.showContextMenu(e.clientX+20, e.clientY+30); + const dashView = DocumentManager.Instance.getDocumentView(activeDashboard); + ContextMenu.Instance.addItem({ + description: "Snapshot Dashboard", event: async () => { + const batch = UndoManager.StartBatch("snapshot"); + await CurrentUserUtils.snapshotDashboard(Doc.UserDoc()); + batch.end(); + }, icon: "edit" + }); + dashView?.showContextMenu(e.clientX + 20, e.clientY + 30); }}> - <FontAwesomeIcon color="white" size="lg" icon="bars" /> + <FontAwesomeIcon color="white" size="lg" icon="bars" /> </div> <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom"> - <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}> - <FontAwesomeIcon color={MainView.Instance._exploreMode ? "red":"white"} icon="eye" size="lg" /> - </div> + <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}> + <FontAwesomeIcon color={MainView.Instance._exploreMode ? "red" : "white"} icon="eye" size="lg" /> + </div> </Tooltip> </div> <div className="topbar-right" > - {CurrentUserUtils.ActiveDashboard ? <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}> - {/* TODO: if I have edit access to the dashboard, display share + {CurrentUserUtils.ActiveDashboard ? <div className="topbar-button-text" onClick={() => { SharingManager.Instance.open(undefined, activeDashboard) }}> + {/* TODO: if I have edit access to the dashboard, display share if this is a shared dashboard, display "view original or view annotated" */} - {/* { Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author === Doc.CurrentUserEmail ? "Share": "view original" } */} - { GetEffectiveAcl(Doc.GetProto(CurrentUserUtils.ActiveDashboard)) === AclAdmin ? "Share": "view original" } + {/* { Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author === Doc.CurrentUserEmail ? "Share": "view original" } */} + {GetEffectiveAcl(Doc.GetProto(CurrentUserUtils.ActiveDashboard)) === AclAdmin ? "Share" : "view original"} </div> : (null)} <div className="topbar-button-icon" onClick={() => window.open( "https://brown-dash.github.io/Dash-Documentation/", "_blank")}> @@ -82,7 +91,7 @@ export class TopBar extends React.Component { </div> </div> </div> - + ); } }
\ No newline at end of file |