aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/topbar
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2022-07-08 00:17:26 -0400
committerbobzel <zzzman@gmail.com>2022-07-08 00:17:26 -0400
commit146f8622d5bac2edc6b09f57c173bd057dfbcfad (patch)
treef871089c438a476543ca96bac163c0532b9557c7 /src/client/views/topbar
parentb7e66da6b23cdb41c127000dfe13843d35f7d0cc (diff)
restructured currentUserUtils to avoid having import cycles.
Diffstat (limited to 'src/client/views/topbar')
-rw-r--r--src/client/views/topbar/TopBar.tsx180
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>
+ );
+ }
+}