diff options
Diffstat (limited to 'src/client/views/topbar/TopBar.tsx')
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 126 |
1 files changed, 65 insertions, 61 deletions
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index e486bcb52..6a4deca38 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -3,13 +3,18 @@ import { Tooltip } from "@material-ui/core"; import { action } from "mobx"; import { observer } from "mobx-react"; import * as React from 'react'; -import { Doc, DocListCast } from '../../../fields/Doc'; +import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; -import { StrCast } from '../../../fields/Types'; +import { Cast, StrCast } from '../../../fields/Types'; +import { GetEffectiveAcl } from "../../../fields/util"; import { Utils } from '../../../Utils'; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; +import { DocumentManager } from "../../util/DocumentManager"; +import { SelectionManager } from "../../util/SelectionManager"; import { SettingsManager } from "../../util/SettingsManager"; +import { SharingManager } from "../../util/SharingManager"; import { undoBatch, UndoManager } from "../../util/UndoManager"; +import { ContextMenu } from "../ContextMenu"; import { Borders, Colors } from "../global/globalEnums"; import { MainView } from "../MainView"; import "./TopBar.scss"; @@ -20,64 +25,63 @@ import "./TopBar.scss"; */ @observer export class TopBar extends React.Component { - render() { - const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data); - return ( - //TODO:glr Add support for light / dark mode - <div style={{ pointerEvents: "all" }} className="topbar-container"> - <div className="topbar-bar" style={{ background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }}> - <div className="topbar-left"> - <div className="topbar-lozenge-user"> - {`${Doc.CurrentUserEmail}`} + navigateToHome = () => { + CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => { + CurrentUserUtils.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() { + const activeDashboard = CurrentUserUtils.ActiveDashboard; + return ( + //TODO:glr Add support for light / dark mode + <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)} + </div> + <div className="topbar-center" > + <div className="topbar-title" onClick={() => activeDashboard && SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}> + {activeDashboard ? StrCast(activeDashboard.title) : "Dash"} + </div> + <div className="topbar-button-icon" onClick={e => { + const dashView = activeDashboard && 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(); + batch.end(); + }, icon: "edit" }); + dashView?.showContextMenu(e.clientX+20, e.clientY+30); + }}> + <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> + </Tooltip> + </div> + <div className="topbar-right" > + <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}> + {/* TODO: if this is my dashboard, display share + if this is a shared dashboard, display "view original or view annotated" */} + { CurrentUserUtils.ActiveDashboard && (Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author === Doc.CurrentUserEmail ? "Share": "view original") } + </div> + <div className="topbar-button-icon" onClick={() => window.open( + "https://brown-dash.github.io/Dash-Documentation/", "_blank")}> + <FontAwesomeIcon icon="question-circle" /> + </div> + <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}> + <FontAwesomeIcon icon="cog" /> + </div> + </div> </div> - <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}> - {"Log out"} - </div> - </div> - <div className="topbar-center" > - <div className="topbar-lozenge-dashboard"> - <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))} - value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)} - style={{ color: Colors.WHITE }}> - {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)} - </select> - </div> - <div className="topbar-dashboards"> - <Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => { - const batch = UndoManager.StartBatch("new dash"); - await CurrentUserUtils.createNewDashboard(Doc.UserDoc()); - batch.end(); - }}> - New<FontAwesomeIcon icon="plus" /> - </div> - </Tooltip> - <Tooltip title={<div className="dash-tooltip">Work on a copy of the dashboard layout</div>} placement="bottom"> - <div className="topbar-icon" onClick={async () => { - const batch = UndoManager.StartBatch("snapshot"); - await CurrentUserUtils.snapshotDashboard(Doc.UserDoc()); - batch.end(); - }}> - Snapshot<FontAwesomeIcon icon="camera" /> - </div> - </Tooltip> - <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)}> - Explore<FontAwesomeIcon icon="map" /> - </div> - </Tooltip> - </div> - </div> - <div className="topbar-right" > - <div className="topbar-icon" onClick={() => window.open( - "https://brown-dash.github.io/Dash-Documentation/", "_blank")}> - {"Help"}<FontAwesomeIcon icon="question-circle" /> - </div> - <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}> - {"Settings"}<FontAwesomeIcon icon="cog" /> - </div> - </div> - </div> - </div > - ); - } + </div> + + ); + } }
\ No newline at end of file |