diff options
Diffstat (limited to 'src/client/views/topbar')
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 180 |
1 files changed, 96 insertions, 84 deletions
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index b447bdc19..0bf1575fb 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -1,94 +1,106 @@ -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Tooltip } from "@material-ui/core"; -import { action } from "mobx"; -import { observer } from "mobx-react"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Tooltip } from '@material-ui/core'; +import { action } from 'mobx'; +import { observer } from 'mobx-react'; import * as React from 'react'; -import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc'; -import { Id } from '../../../fields/FieldSymbols'; -import { Cast, StrCast } from '../../../fields/Types'; -import { GetEffectiveAcl } from "../../../fields/util"; +import { AclAdmin, Doc } from '../../../fields/Doc'; +import { 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 { CollectionDockingView } from "../collections/CollectionDockingView"; -import { ContextMenu } from "../ContextMenu"; -import { Borders, Colors } from "../global/globalEnums"; -import { MainView } from "../MainView"; -import "./TopBar.scss"; +import { DocumentManager } from '../../util/DocumentManager'; +import { SelectionManager } from '../../util/SelectionManager'; +import { SettingsManager } from '../../util/SettingsManager'; +import { SharingManager } from '../../util/SharingManager'; +import { UndoManager } from '../../util/UndoManager'; +import { CollectionDockingView } from '../collections/CollectionDockingView'; +import { ContextMenu } from '../ContextMenu'; +import { DashboardView } from '../DashboardView'; +import { Borders, Colors } from '../global/globalEnums'; +import { MainView } from '../MainView'; +import './TopBar.scss'; /** * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user - * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. + * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. */ @observer export class TopBar extends React.Component { - navigateToHome = () => { - CollectionDockingView.Instance.CaptureThumbnail()?.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-icon" 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={() => 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); + navigateToHome = () => { + CollectionDockingView.Instance.CaptureThumbnail()?.then(() => { + Doc.ActivePage = 'home'; + DashboardView.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 = Doc.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-icon" + 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); }}> - <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-button-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-icon" onClick={() => { SharingManager.Instance.open(undefined, activeDashboard) }}> - {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")}> - <FontAwesomeIcon icon="question-circle" /> - </div> - <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}> - <FontAwesomeIcon icon="cog" /> - </div> - </div> + {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={() => activeDashboard && SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}> + {activeDashboard ? StrCast(activeDashboard.title) : 'Dash'} </div> - </div> - - ); - } -}
\ No newline at end of file + <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 DashboardView.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-button-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"> + {Doc.ActiveDashboard ? ( + <div + className="topbar-button-icon" + onClick={() => { + SharingManager.Instance.open(undefined, activeDashboard); + }}> + {GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'view original'} + </div> + ) : null} + <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> + ); + } +} |